Question

在我的主要部分视图中，我有一个语言下拉列表，之后我有部分视图，显示此页面的子项目，条件是语言属性与下拉列表选定值匹配。默认情况下，将显示所有子项目。

<div class="rtd">
                  @{
                  var slang=new SelectList(
                    new List<SelectListItem>
                    {
                        new SelectListItem { Selected = true, Text = "All", Value = ""},
                        new SelectListItem { Selected = false, Text = "English", Value = "English"},
                        new SelectListItem { Selected = false, Text = "Gujarati", Value = "Gujarati"},
                        new SelectListItem { Selected = false, Text = "Hindi", Value = "Hindi"},
                    }, "Value" , "Text", 1);
                  @Html.DropDownList("drpLang", @slang,  new { @class = "dropdown"}) 

</div>

<div class="list">
      @Html.Partial("_List")
</div>

因此，视图应根据下拉列表的值进行刷新。那么，如何实现这一目标呢？

Partialview如下所示。

@{ var selection = CurrentPage.Children.Where("Visible").Where("language=\"English\""); }

@if (selection.Any())
{
<ul>
       @foreach (var story in selection)
        {
         <li class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><a href="@story.Url" class="st-text"> @story.Name</a></li>
        }


</ul>
}

Answer 1

您可以编写一个jquery脚本来绑定选择列表的更改事件：

    function BindSelectChange(){
        $('select').on('change',function(){
           // make an ajax call to your controller action
           $.ajax({
               url:'/ControllerName/Action',
               ....
           });
        });
}

请查看此链接，了解如何bind a partial view via ajax。

然后将控制器操作传递给选项id或文本。检查网页上有关如何选择选择元素的选项。

如果您考虑步骤或seudo代码： //客户 1.绑定select元素的change事件 2.获取所选的选项ID或文本 - 具体取决于您的需要 3.对控制器操作进行ajax调用，成功重新绑定局部视图。

//控制器动作 1.使用选项id / option文本获取您需要的数据并返回viewmodel / view - ＆gt;这应该与您在局部视图中的内容相同

刷新选择更改的部分视图

1 个答案: