Question

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

在此我有两个名为 CustomerName 和 ContactPerson 的字段。这两个字段是级联文本框字段。也就是说，如果我输入并选择CustomerName，CustomerName相关的ContactPerson将自动加载到联系人下拉列表中。这工作正常

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

Cascadind文本框编码

我的模型（VisitorsViewModel）

public Nullable<System.Guid> CustomerID { get; set; }
public string CustomerName { get; set; }
public Nullable<System.Guid> CustomerContactID { get; set; }

我的ViewCode

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

我的J-query代码

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

我的控制器代码加载CustomerName和ContactPerson

 public JsonResult GetVisitCustomer(string Areas, string term = "")
  {
        var objCustomerlist = db.Customers.Where(c => c.IsDeleted == false)
                        .Where(c => c.DisplayName.ToUpper()
                        .Contains(term.ToUpper()))
                        .Select(c => new { Name = c.DisplayName, ID = c.CustomerID })
                        .Distinct().ToList();
        return Json(objCustomerlist, JsonRequestBehavior.AllowGet);
  }

public JsonResult GetContactPersobByCustomerId(string customerId)
  {
          Guid Id = Guid.Parse(customerId);
         var customercontacts = (from a in db.CustomerContacts where a.CustomerID == Id select a);
          return Json(customercontacts, JsonRequestBehavior.AllowGet);
  }

修改代码

控制器代码

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 字段。但是我无法在编辑模式下将与CustomerName相关的ContactPerson传递给 ContactPersom 下拉列表。我试图解释我的问题。请任何人帮我解决这个问题。

提前谢谢。

Answer 1

首先更改您的视图模型，以包含与CustomerContact相关联的CustomerContactID对象的属性，以便在下拉列表中使用。

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
}

请注意，您还应为Employees，POVisits和Items添加类似的IEnumerable<SelectListItem>属性，以避免使用ViewBag。

接下来修改GET方法以填充CustomerContactID

的选项

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

    VisitorsViewModel viewModel = new VisitorsViewModel()
    {
        VisitingID = model.VisitingID,
        ....
        // Add the following
        CustomerContactID = model.CustomerContactID,
        CustomerContactList = db.CustomerContacts.Where(x => x.CustomerID == model.CustomerContactID).Select(x => new SelectListItem()
        {
            Value = CustomerContactID,
            Text = ContactReference
        },
        .... // add the other select lists
    };
    return View(viewModel);
}

然后在视图中，使用

@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()方法添加，您不应该拥有required属性HTML5验证。而是添加[Required]属性并使用ValidationMessageFor()，以便获得服务器和客户端验证。

旁注：如果这是创建视图，那么您将使用

分配CustomerContactList选项

CustomerContactList = Enumerable.Empty<SelectListItem>()

这样您最初会显示一个空的下拉列表。

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

1 个答案: