从下拉列表中选择项目后使用 ajax 渲染 PartialView答案

【问题标题】：Render PartialView using ajax after select item from dropdownlist从下拉列表中选择项目后使用 ajax 渲染 PartialView
【发布时间】：2018-01-19 07:58:00
【问题描述】：

我有以下 ViewModel

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

当我打开查看 Details.cshtml 时，它会显示带有房屋名称的 DropdownList。我想选择其中一个，然后单击按钮显示在所选房屋的某些 div 中的部分视图内容中。我应该如何更正以下脚本以使用 ajax 呈现部分视图

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

我认为它应该是控制器中的附加方法，负责显示这样的部分视图

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

在这种情况下，我怎样才能将对象作为参数传递给这个方法，如果它必须被序列化，它应该是什么样子？

【问题讨论】：

标签： javascript asp.net asp.net-ajax asp.net-mvc-partialview

【解决方案1】：

@Html.Partial() 是服务端方法，它会在渲染 HTML 之前被调用。在您的情况下，您需要根据下拉列表的选择绑定一些部分视图。所以你需要做的是，你需要通过ajax调用局部视图的控制器方法。

$('.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);
            }
         });
});

【讨论】：