在下拉列表中的 select 项之后使用 ajax 呈现 PartialView

Question

我有以下 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 时，它会显示带有房屋名称的下拉列表。我想 select 其中之一，然后在 selected House 的某些 div 中的部分视图内容中单击按钮显示。我应该如何更正以下脚本以使用 ajax

呈现局部视图

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

我觉得应该是controller中的附加方法，负责显示这样的partial view

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

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

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

在下拉列表中的 select 项之后使用 ajax 呈现 PartialView

Render PartialView using ajax after select item from dropdownlist

javascript

asp.net

asp.net-ajax

asp.net-mvc-partialview