Teilansicht auf ausgewählte Änderung aktualisieren

Question

In meiner Hauptteilansicht habe ich eine Sprache Dropdown-Liste und danach habe ich Teilansicht, die untergeordneten Elemente dieser Seite mit der Bedingung Sprache Eigenschaft entspricht der Dropdown-Liste ausgewählten Wert zeigt. Standardmäßig werden alle untergeordneten Elemente angezeigt.

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

Die Ansicht sollte also entsprechend dem Wert der Dropdownliste aktualisiert werden. Also, wie kann das erreicht werden?

Teilansicht sieht wie folgt aus.

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

Sie können ein jquery Skript schreiben, das Änderungsereignis des Select zu binden:

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

Werfen Sie einen Blick auf diesen Link, um herauszufinden, wie man bind a partial view via ajax.

Dann übergeben Sie die Controller-Aktion die Option ID oder Text. Überprüfen Sie das Web, wie Sie die ausgewählte Option des select-Elements erhalten.

Wenn denken Sie über die Schritte oder seudonym Code: // Client 1. Binden Sie das Änderungsereignis des Auswahlelementes 2. Holen Sie die gewählte Option ID oder Text - je nachdem, was Sie wollen 3. eine Ajax-Stellen Rufen Sie die Controller-Aktion auf, binden Sie bei Erfolg die Teilansicht erneut.

// Controller Aktion 1. Verwenden Sie die Option id/Option Text zu bekommen, was immer Daten, die Sie brauchen, und gibt ein Viewmodel/Ansicht -> das ist das gleiche sein soll wie das, was Sie in Ihrer Teilansicht haben