refresh partial view on select change

Question

In my main partial view, I have one language dropdownlist and after it I have Partial view which shows child items of this page with condition that language property matches the dropdownlist selected value. By default all the child items will be shown.

<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>

So, view should get refreshed according to the value of dropdownlist. So, how this can be achieved?

Partialview looks like below.

@{ 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

You can write a jquery script to bind the change event of the selectlist:

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

Take a look at this link to find out how to bind a partial view via ajax.

Then pass the controller action the option id or text. Check the web on how to get selected option of the select element.

If you think about the steps or seudo code: // Client 1. Bind the change event of select element 2. Get the selected option id or text - depending on what you want 3. Make an ajax call to the controller action, on success rebind the partial view.

//Controller Action 1. Use the option id/option text to get what ever data you need and return a viewmodel/view -> this should be the same as what you have in your partial view