Asp.Net MVC 5 Fill EditorFor When Dropdown SelectedItem Changed

Question

当我从 Dropdown 中 select 一个产品时，我需要填充 Html.EditorFor 控件。我是 JQuery 和 Ajax 的新手。

我的下拉菜单：

@Html.DropDownList("ProductId", null, htmlAttributes: new { @class = "form-control", 
@onchange= "FillPrice()", id= "ProductId" })

编辑者：

@Html.EditorFor(model => model.ProductPrice, 
                new { htmlAttributes = new { 
                           @class = "form-control",  
                           id="txtPrice" } })

Javascript:

function FillPrice() {
    var ProductId = $('#ProductId').val();
    $.ajax({
        url: '@Url.Action("GetPrice")',
        dataType: "JSON",
        data: { ProductId: ProductId },
        contentType: "application/json; charset=utf-8",
        success: function (price) {
            $('#txtPrice').val()   ??? What to write here to fill txtPrice?
        }
    });  
  }

Controller/GetPrice:

public JsonResult GetPrice(int ProductId)
{
    var price = from r in db.Products
                where r.Id == ProductId
                select new { 
                     id = r.Id, 
                     label = r.ProductPrice, 
                     value = r.ProductPrice };
    return Json(price, JsonRequestBehavior.AllowGet);
}

到目前为止，一切正常。我检查 Firebug 并查看 Json 获取和结果，但我无法将该值绑定到 EditorFor。

Answer 1

您 JavaScript 中的响应在 price 变量中：

function (price) {
    //...
}

根据服务器端代码，该对象似乎具有三个值：

new { 
    id = r.Id, 
    label = r.ProductPrice, 
    value = r.ProductPrice }

（我不确定为什么你需要两次相同的值，但无论如何。）

所以您可能正在寻找该变量的 value 属性？:

$('#txtPrice').val(price.value);

您还可以检查浏览器的调试器并查看 price 变量的结构来确定。

编辑： 看起来 return 值可能是一个数组。考虑到服务器端代码生成 IEnumerable<>，这是有道理的。如果它应该只是 return 单个值，您可以将其明确化。像这样：

return Json(price.Single(), JsonRequestBehavior.AllowGet);

您需要围绕它添加一些错误检查，处理错误的逻辑（多个找到的值或没有找到的值）由您决定。

相反，如果您希望它是一个数组，您可以将其作为数组客户端访问：

$('#txtPrice').val(price[0].value);

同样，您需要添加一些错误检查（这次是在客户端代码中）以确保在尝试使用值之前存在该值。

Asp.Net MVC 5 Fill EditorFor When Dropdown SelectedItem Changed

Asp.Net MVC 5 Fill EditorFor When Dropdown SelectedItem Changed

jquery

asp.net-mvc

html.dropdownlistfor

editorfor