Render PartialView Ajax nach wählen Sie den Punkt aus Dropdownlist

Question

Ich habe die folgende Ansichtsmodell

public class ReservationDetails 
    { 
     public ReservationDetails() 
     { 

     } 
     public Reservation Reservation { get; set; } 

     public List<ReservationHouseDetails> ReservationHouseDetails { get; set; } 

     public Dictionary<string,ReservationHouseDetails> MyProperty { get; set; } 

     public List<ReservationAttractionDetails> ReservationAttractionDetails { get; set; } 

     public IEnumerable<SelectListItem> Houses { get; set; } 

     public int SelectedHouseDetailsId { get; set; } 

     public string SelectedHouseDetailsText { get; set; } 
    } 

Als ich Ansicht öffnen Details.cshtml es mir mit dem Namen der Häuser zeigt Dropdownlist. Ich würde gerne eine von ihnen auswählen und nach Klick auf die Schaltfläche Anzeige in Teilansicht Inhalt in einigen div des ausgewählten Hauses. Wie soll ich das richtig das follwing Skript denken Teilansicht mit Ajax zu machen

<script type="text/javascript"> 
     $('.SelectHouse').click(function() { 
    $('.divForSelectHouse').Load('@Html.Partial("~/Views/ClientReservations/ReservationHouseDetails.cshtml",Model.MyProperty[Model.SelectedHouseDetailsText])') 
}); 
    </script> 

ich es die zusätzliche Methode im Controller sein sollte, resposible für

public PartialViewResult DetailsHouse(ReservationHouseDetails houseDetails) 
     { 
      return PartialView("ReservationHouseDetails", houseDetails); 
     } 

ähnliche Teilansicht Anzeigen In diesem Fall, wie kann ich Objekt als Parameter an diese Methode übergeben, wenn es serialisiert werden muss, wie es aussehen soll?

Answer 1

@Html.Partial() ist serverseitige Methode, wird vor dem Rendern von HTML aufgerufen werden. In Ihrem Fall müssen Sie einige Teilansichten basierend auf der Auswahl des Dropdown-Menüs binden. Sie müssen also die Controller-Methode der Teilansicht mit Ajax aufrufen.

$('.SelectHouse').click(function() { 

$.ajax({ url: @Uri.Action("ActionName","ControllerNmae"), 
      type: "post", 
      dataType:"html", 
      data: "<your data as serialized json>", 
      success: function(result) { 
       $('.divForSelectHouse').html(result); 
      } 
     }); 
});