SelectedIndexChange 上的 MVC Razor 视图更新表单

Question

我在视图中有一个表单，其中汇集了一些信息（地址、电话等）。所有这些元素都包含在一个视图模型中。有一个部分要求用户 select 一个县。在 selection 上，我希望能够显示基于县 selected 的价格。

我遇到了以下 SO question，它接近我想要的，但看起来该操作将表单提交到 'change controller'。我天真地需要能够基本上调用两个控制器 - 一个 onSelectedChange 和另一个 onSubmit。我敢肯定你做不到！

这是我想要的：

@model ViewOrder

@using (Html.BeginForm("Order", "Home"))
{
    @* - textboxes et al - *@

    <p>
        @Html.DropDownListFor(x => x.Counties, 
          new SelectList(Model.Counties, "CountyId", "County"), 
          new { @class = "form-control  input-sm" })
    </p>
    <p>
        @* - £Price result of dropdown list selection and 
        add to View Model to add to sub total - *@
    </p>

    <input type="submit" text = "submit"/>
}

我是 MVC 的新手 - 可以在网络表单中轻松完成此操作（但我坚持使用 MVC！）必须有某种形式的 Ajax 操作才能允许这样做。有什么建议吗？

Answer 1

首先你的@Html.DropDownListFor()方法有问题。 Model.Counties 是一个复杂对象（具有属性 CountyId 和 County），但您不能将 <select>（或任何控件）绑定到复杂对象，只能绑定到值类型。您的模型需要一个属性（比如）public int SelectedCountry { get; set; }，然后是 @Html.DropDownListFor(x => x.SelectedCountry, new SelectList(Model.Counties, "CountyId", "County"), ...)

要显示价格，您需要处理下拉列表的 .change 事件，将所选值传递给控制器方法，并更新 DOM.

脚本（基于属性为 SelectedCountry）

var url = '@Url.Action("GetPrice", "yourControllerName")';
$('#SelectedCountry').change(function() {
   $.getJSON(url, { ID: $(this).val() }, function(data) {
     // do something with the data returned by the method, for example
     $('#someElement').text(data);
   });
});

控制器

public JsonResult GetPrice(int ID)
{
  // ID contains the value of the selected country
  var data = "some price to return";
  return Json(data, JsonRequestBehavior.AllowGet);
}

SelectedIndexChange 上的 MVC Razor 视图更新表单

MVC Razor View update Form on SelectedIndexChange

ajax

selectedindexchanged

html.dropdownlistfor

razor

asp.net-mvc-5