Question

如何根据下拉列表中的选定值更新文本框以显示Email1模型的Mobile1和Contact属性

查看

@Html.LabelFor(model => model.CustomerName , new { @class = "control-label" })
@Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @style = "width:250px;" })

@Html.LabelFor(model => model.Email1, new { @class = "control-label" })
@Html.TextBoxFor(model => model.ContactID, new { @class = "form-control", type = "text" })
@Html.ValidationMessageFor(model => model.Email1)

@Html.LabelFor(model => model.MobileNo1, new { @class = "control-label" })
@Html.TextBoxFor(model => model.ContactID, new { @class = "form-control", type = "text" })
@Html.ValidationMessageFor(model => model.MobileNo1)

脚本

$('#CustomerContactID').change(function () {
    $('#ContactID').empty();
    $.ajax({
        type: "GET",
        url: "/VisitorsForm/GetEmailByCustomerContactId",
        datatype: "Json",
        data: { CustomerContactID: $('#CustomerContactID').val() },
        success: function (data) {
            $('#Email1').val(data.Email1);
            $('#MobileNo1').val(data.Mobile1);
        }
    });
});

控制器

public JsonResult GetEmailByCustomerContactId(string CustomerContactId)
{
    Guid Id = Guid.Parse(CustomerContactId);
    var contacts = from a in db.Contacts where a.ContactID == Id select a;
    return Json(contacts);
}

Answer 1

GetEmailByCustomerContactId()中的查询返回IEnumerable<Contact>，一个集合，而不是单个对象，因此ajax成功回调中的data是一个数组而$('#Email1').val(data.Email1);失败，因为数组没有名为Email1的属性（但集合中的每个项都有）

由于您只想返回一个Contact，请将查询更改为

var contact = (from a in db.Contacts where a.ContactID == Id select a).FirstOrDefault();

并且因为你只想要Contact的2个属性，然后返回一个只包含那些属性的匿名对象（通过线路发送你从不使用的数据没有降低性能的点

var data = new { Email1 = contact.Email1, Mobile1 = contact.Mobile1 };

最后指定了JsonRequestBehavior选项，因为您正在进行GET调用

return Json(data, JsonRequestBehavior.AllowGet;);

接下来，您没有使用id="Email1"和id="Mobile1"生成任何输入。您创建的两个文本框都绑定到ContactID，因此我认为这些应该是

@Html.TextBoxFor(model => model.Email1, new { @class = "form-control" })
@Html.TextBoxFor(model => model.Mobile1, new { @class = "form-control" })

假设Email1和Mobile1也是视图中模型的属性。

现在，您的文本框将在success回调

中更新

附注：

始终使用url: '@Url.Action(....)',以确保正确的网址产生
使用data: { CustomerContactID: $(this).val() },
将您的方法参数更改为public JsonResult GetEmailByCustomerContactId(Guid CustomerContactId)并删除 Guid.Parse（DefaultModelBinder将进行转化）
从new { type = "text" }方法中移除Html.TextBoxFor() （助手已经添加了）

如何根据mvc4中下拉列表中的项目选择在文本框中显示值？

1 个答案: