Question

我在视图中有一个表单，汇集了许多信息（地址，电话等）。所有这些元素都包含在视图模型中。有一个部分要求用户选择一个县。在选择时，我希望能够根据所选的县显示价格。

我遇到了以下SO question，它接近我想要的内容，但看起来该操作将表单提交给“更改控制器”。我天真地需要能够基本上调用两个控制器 - 一个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很新 - 可以在webforms中轻松完成这项工作（但我坚持使用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);
}

MVC Razor在SelectedIndexChanged上查看更新表单

1 个答案: