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

本文关键字：文本 显示 项目 下拉列表 何根 mvc4 选择 | 更新日期: 2023-09-27 18:33:08

如何

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

视图

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

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

您在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 };

最后指定自您进行 GET 调用以来的JsonRequestBehavior选项

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回调中更新

旁注：

  1. 始终使用url: '@Url.Action(....)',来确保正确的网址生成
  2. 使用data: { CustomerContactID: $(this).val() },
  3. 将方法参数更改为public JsonResult GetEmailByCustomerContactId(Guid CustomerContactId)并删除 Guid.Parse(DefaultModelBinder将进行转换(
  4. 从Html.TextBoxFor()方法中删除new { type = "text" }(帮助程序已经添加了该内容(
相关文章：