C# 如何在mvc5中对级联文本框进行更新操作？

您好，我想知道如何在MVC5的级联文本框中执行更新操作

在这里，我有两个字段，分别称为CustomerName和ContactPerson。这两个字段是级联文本框字段。也就是说，如果我键入并选择CustomerName，则与CustomerName相关的ContactPerson将自动加载到ContactPerson下拉列表中。这很好用

现在我想要的是如何在编辑模式下将值从db传递给联系人下拉列表。我在编辑模式下将值传递给CustomerName文本框。工作正常，但我无法将值传递给联系人下拉列表

Cascadind文本框编码

我的模型（访问者查看模型）

我的J-query代码

@Html.LabelFor(model => Model.CustomerName, new { @class = "control-label" })
@Html.TextBoxFor(model => Model.CustomerName, new { @class = "form-control required" })
@Html.HiddenFor(model => Model.CustomerID)


@Html.Label("Contact Person", new { @class = "control-label" })
@Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @class = "form-control required", type = "text", id = "CustomerContactID" })

 <link href="~/Areas/Sales/Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <script src="~/Areas/Sales/Scripts/jquery-2.2.3.min.js"></script>
  <script src="~/Areas/Sales/Scripts/jquery-ui.1.10.4min.js"></script>
  <script type="text/javascript">

  $('#CustomerName').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("GetVisitCustomer", "VisitorsForm")',
                    datatype: "json",
                    data: {
                        Areas: 'Sales',
                        term: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (val, item) {
                            return {
                                label: val.Name,
                                value: val.Name,
                                customerId: val.ID
                            }
                        }))
                    }
                })
            },
            select: function (event, ui) {
                $("#CustomerID").val(ui.item.customerId);
                $('#CustomerContactID').empty();
                $.ajax(
                        '@Url.Action("GetContactPersobByCustomerId", "VisitorsForm", new { Area = "Sales" })', {
                            type: "POST",
                            datatype: "Json",
                            data: { CustomerID: $('#CustomerID').val() },
                            success: function (data) {
                                $('#CustomerContactID').append($('<option></option>').val('').text('Please select'));
                                $.each(data, function (index, value) {
                                $('#CustomerContactID').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');
                                });
                            }
                        });
                       }
                    });

public ActionResult Edit(Guid? id)
 {
    WafeERP_NEWEntities db = new WafeERP_NEWEntities();
    VisitorsViewModel objvisitorsviewmodel = new VisitorsViewModel();
    View_VisitorsForm objviewvisitorsForm = db.View_VisitorsForm.Find(id);

        ViewBag.EmployeeID = new SelectList(db.Employees, "EmployeeID", "DisplayName", objviewvisitorsForm.EmployeeID);
        ViewBag.POVisitID = new SelectList(db.POVisits, "POVisitID", "POVisit1", objviewvisitorsForm.POVisitID);
        ViewBag.ItemID = new SelectList(db.Items, "ItemID", "DisplayName", objviewvisitorsForm.ItemID);


     objvisitorsviewmodel.VisitingID = objviewvisitorsForm.VisitingID;
     objvisitorsviewmodel.Date = objviewvisitorsForm.VisitingDate;
     objvisitorsviewmodel.CustomerID = objviewvisitorsForm.CustomerID;
     objvisitorsviewmodel.CustomerName = objviewvisitorsForm.CustomerName;
     return View(objvisitorsviewmodel);
    }

编辑代码

@Html.LabelFor(model => Model.CustomerName, new { @class = "control-label" })
@Html.TextBoxFor(model => Model.CustomerName, new { @class = "form-control required" })
@Html.HiddenFor(model => Model.CustomerID)


@Html.Label("Contact Person", new { @class = "control-label" })
@Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @class = "form-control required", type = "text", id = "CustomerContactID" })

 <link href="~/Areas/Sales/Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <script src="~/Areas/Sales/Scripts/jquery-2.2.3.min.js"></script>
  <script src="~/Areas/Sales/Scripts/jquery-ui.1.10.4min.js"></script>
  <script type="text/javascript">

  $('#CustomerName').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("GetVisitCustomer", "VisitorsForm")',
                    datatype: "json",
                    data: {
                        Areas: 'Sales',
                        term: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (val, item) {
                            return {
                                label: val.Name,
                                value: val.Name,
                                customerId: val.ID
                            }
                        }))
                    }
                })
            },
            select: function (event, ui) {
                $("#CustomerID").val(ui.item.customerId);
                $('#CustomerContactID').empty();
                $.ajax(
                        '@Url.Action("GetContactPersobByCustomerId", "VisitorsForm", new { Area = "Sales" })', {
                            type: "POST",
                            datatype: "Json",
                            data: { CustomerID: $('#CustomerID').val() },
                            success: function (data) {
                                $('#CustomerContactID').append($('<option></option>').val('').text('Please select'));
                                $.each(data, function (index, value) {
                                $('#CustomerContactID').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');
                                });
                            }
                        });
                       }
                    });

public ActionResult Edit(Guid? id)
 {
    WafeERP_NEWEntities db = new WafeERP_NEWEntities();
    VisitorsViewModel objvisitorsviewmodel = new VisitorsViewModel();
    View_VisitorsForm objviewvisitorsForm = db.View_VisitorsForm.Find(id);

        ViewBag.EmployeeID = new SelectList(db.Employees, "EmployeeID", "DisplayName", objviewvisitorsForm.EmployeeID);
        ViewBag.POVisitID = new SelectList(db.POVisits, "POVisitID", "POVisit1", objviewvisitorsForm.POVisitID);
        ViewBag.ItemID = new SelectList(db.Items, "ItemID", "DisplayName", objviewvisitorsForm.ItemID);


     objvisitorsviewmodel.VisitingID = objviewvisitorsForm.VisitingID;
     objvisitorsviewmodel.Date = objviewvisitorsForm.VisitingDate;
     objvisitorsviewmodel.CustomerID = objviewvisitorsForm.CustomerID;
     objvisitorsviewmodel.CustomerName = objviewvisitorsForm.CustomerName;
     return View(objvisitorsviewmodel);
    }

控制器代码

@Html.LabelFor(model => Model.CustomerName, new { @class = "control-label" })
@Html.TextBoxFor(model => Model.CustomerName, new { @class = "form-control required" })
@Html.HiddenFor(model => Model.CustomerID)


@Html.Label("Contact Person", new { @class = "control-label" })
@Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @class = "form-control required", type = "text", id = "CustomerContactID" })

 <link href="~/Areas/Sales/Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <script src="~/Areas/Sales/Scripts/jquery-2.2.3.min.js"></script>
  <script src="~/Areas/Sales/Scripts/jquery-ui.1.10.4min.js"></script>
  <script type="text/javascript">

  $('#CustomerName').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("GetVisitCustomer", "VisitorsForm")',
                    datatype: "json",
                    data: {
                        Areas: 'Sales',
                        term: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (val, item) {
                            return {
                                label: val.Name,
                                value: val.Name,
                                customerId: val.ID
                            }
                        }))
                    }
                })
            },
            select: function (event, ui) {
                $("#CustomerID").val(ui.item.customerId);
                $('#CustomerContactID').empty();
                $.ajax(
                        '@Url.Action("GetContactPersobByCustomerId", "VisitorsForm", new { Area = "Sales" })', {
                            type: "POST",
                            datatype: "Json",
                            data: { CustomerID: $('#CustomerID').val() },
                            success: function (data) {
                                $('#CustomerContactID').append($('<option></option>').val('').text('Please select'));
                                $.each(data, function (index, value) {
                                $('#CustomerContactID').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');
                                });
                            }
                        });
                       }
                    });

public ActionResult Edit(Guid? id)
 {
    WafeERP_NEWEntities db = new WafeERP_NEWEntities();
    VisitorsViewModel objvisitorsviewmodel = new VisitorsViewModel();
    View_VisitorsForm objviewvisitorsForm = db.View_VisitorsForm.Find(id);

        ViewBag.EmployeeID = new SelectList(db.Employees, "EmployeeID", "DisplayName", objviewvisitorsForm.EmployeeID);
        ViewBag.POVisitID = new SelectList(db.POVisits, "POVisitID", "POVisit1", objviewvisitorsForm.POVisitID);
        ViewBag.ItemID = new SelectList(db.Items, "ItemID", "DisplayName", objviewvisitorsForm.ItemID);


     objvisitorsviewmodel.VisitingID = objviewvisitorsForm.VisitingID;
     objvisitorsviewmodel.Date = objviewvisitorsForm.VisitingDate;
     objvisitorsviewmodel.CustomerID = objviewvisitorsForm.CustomerID;
     objvisitorsviewmodel.CustomerName = objviewvisitorsForm.CustomerName;
     return View(objvisitorsviewmodel);
    }

在这里，我以编辑模式将CustomerName值传递给CustomerName字段。但在编辑模式下，我无法将与客户姓名相关的ContactPerson传递到ContactPersom下拉列表。我试图解释我的问题。请任何人帮我解决这个问题

---

提前感谢。

首先更改视图模型，以包含与

CustomerContact

关联的

CustomerContactID

对象的属性，以便在dropdownlist中使用

public class VisitorsViewModel
{
    ....
    [Required(ErrorMessage = "Please select a customer contact")]
    [Display(Name = "Contact Person")]
    public Nullable<System.Guid> CustomerContactID { get; set; }
    public IEnumerable<SelectListItem> CustomerContactList { get; set; } // add this
    .... // add other SelectLists rather than using ViewBag
}

然后在视图中，使用

@Html.LabelFor(m => m.CustomerContactID", new { @class = "control-label" })
@Html.DropDownListFor(m => m.CustomerContactID, Model.CustomerContactList, "Please select a ContactPerson", new { @class = "form-control })
@Html.ValidationMessageFor(m => m.CustomerContactID)

请注意，

id

和

type

不需要属性-它们已经由

DropDownListFor（）

方法添加，并且您不应该具有

必需的

属性，即HTML5验证。相反，添加一个

[Required]

属性并使用

ValidationMessageFor（）

，以便获得服务器端和客户端验证

旁注：如果这是一个创建视图，那么您可以使用

CustomerContactList = Enumerable.Empty<SelectListItem>()

CustomerContactList=Enumerable.Empty（）

以便最初显示一个空的dropdownlist

public class VisitorsViewModel
{
    ....
    [Required(ErrorMessage = "Please select a customer contact")]
    [Display(Name = "Contact Person")]
    public Nullable<System.Guid> CustomerContactID { get; set; }
    public IEnumerable<SelectListItem> CustomerContactList { get; set; } // add this
    .... // add other SelectLists rather than using ViewBag
}