刷新 select 更改的部分视图

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>

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

局部视图如下所示。

@{ 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脚本来绑定select列表的变化事件：

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

看看这个 link 了解如何 bind a partial view via ajax。

然后将选项 ID 或文本传递给控制器操作。在网上查看如何获取 select 元素的 selected 选项。

如果你想想步骤或seudo代码： // 客户 1.绑定select元素的变化事件 2. 获取 selected 选项 id 或文本 - 取决于你想要什么 3. 对控制器操作进行 ajax 调用，成功后重新绑定部分视图。

//控制器动作 1. 使用选项 id/option text 获取您需要的任何数据和 return a viewmodel/view -> 这应该与您在部分视图中的内容相同

刷新 select 更改的部分视图

refresh partial view on select change

html-select

partial-views

umbraco

selectlist

partial-page-refresh