Question

我想根据主视图中的Select按钮动态显示/隐藏部分视图中的内容。

如果我在主视图中点击Catalogue Style Unedited，然后点击 partial视图，应选择Horse（第一个）单选按钮第一个文本框和其他内容将被隐藏。
如果我在主视图中点击Internet Pedigree Dam（第二）广播第二个文本框的按钮将可见，其余内容将被隐藏。
如果我点击主视图中的Research Document Theoretical （第3个）单选按钮将被选中，两个文本框都将被选中可见

我的model：

public class ClsTest
{        
    public int HorseId { get; set; }
    public string Horse { get; set; }
    public int DamId { get; set; }
    public string Dam { get; set; }
    public int TheoreticalId { get; set; }
    public string Theoretical { get; set; }  
}

我的main查看：

@model IEnumerable<Test.Website.Models.ClsTest>
<table id="tblTest">
    <tr>
        <th>@Html.DisplayNameFor(m => m.ProductName)</th>
        ....
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.ProductName)</td>
            ....
            <td>
                <input class="search btn-default" type="button" value="Select" data-assigned-id="@item.ProductCode" />
            </td>
        </tr>
    }

</table>
<script type="text/javascript">
    $("document").ready(function() {
        $('#Partial').on('change', '.AddContainer input[type="radio"]', function()  {     
            var divs = $('.Add1').find('.container');
            var id = $(this).data('divid');
            divs.hide(); 
            $('#' + id).show();
        });

        $('.search').click(function () {
            var id = $(this).data('assigned-id');
            var route = '@Url.Action("DisplayPartialView", "Home")?id=' + id;
            $('#Partial').load(route);
        });
    });
</script>

我的JavaScript：

我的main view Image：我的partial视图：

<div class="AddContainer">
    <div class="col-sm-12">
        <label>
            <input type="radio" name="Service" value="false" data-divid="A" checked />
            <span>Horse</span>
        </label>
        <label>
            <input type="radio" name="Service" value="true" data-divid="B" />
            <span>Dam</span>
        </label>
        <label>
            <input type="radio" name="Service" value="true" data-divid="C" />
            <span>Theoretical</span>
        </label>
    </div>
</div>
<div class="Add1">
    <div class="form-inline">
        <div id="A" class="container">
            <div class="col-sm-4">
                @using (Html.BeginForm("Index", "Home", FormMethod.Get))
                {
                    @Html.TextBoxFor(m => m.Horse, new { @class = "form-control", placeholder = Html.DisplayNameFor(n => n.Horse) })
                    @Html.HiddenFor(m => m.HorseId)
                    <input type="button" value="Search" class="btn btn-default active" />
                }
            </div>
        </div>
        <div id="B" class="container">
            <div class="col-sm-4">
                @Html.TextBoxFor(m => m.Dam, new { @class = "form-control", 
                 placeholder = Html.DisplayNameFor(n => n.Dam) })
                @Html.HiddenFor(m => m.DamId)
                <input type="button" value="Search" class="btn btn-default 
                   active" />
            </div>
        </div>
        <div class="col-sm-12">
            <input type="submit" value="Produce Page" class="btn btn-default 
             active" />
        </div>
    </div>
</div>

我们可以做到这一点吗？如果可以的话，任何人都可以指导我。谢谢。

根据主视图中的按钮单击动态显示/隐藏局部视图的内容

0 个答案: