Question

您好我的视图中有两个字段客户名称和 ContactPerson 。之前我把这两个领域作为下拉字段。现在我将客户名称字段更改为autoComplete文本框，将联系人字段更改为下拉字段。

在我将这两个字段保留为级联下拉列表字段之前。如果我选择 CusomerName ，则会自动在ContactPerson中显示与客户名称相关的 ContactPerson 下拉列表。

现在，我将该客户名称字段更改为文本框，并将联系人字段更改为下拉列表。现在我想要的是，如果我在customername textox中键入并选择CustomerName，则必须在联系人下拉列表中自动加载与CustomerName相关的ContactPerson。

我的模型（VisitorsViewModel）

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

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

我的观点

@Html.LabelFor(model => Model.CustomerName, new { @class = "control-label" })
@Html.TextBoxFor(model => Model.CustomerName, new { @class = "form-control" })
@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", type = "text", id = "CustomerContactID" })

我的Jquery代码

<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">

    $(document).ready(function () {
      debugger;
    $("#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) {
     debugger;
              return {
                           label: val.Name,
                           value: val.Name,
                           customerId: val.ID
                     }                                     
                 }))
                }
             })
          },
   select: function (event, ui) {
   $("#CustomerID").val(ui.item.customerId);
      debugger;
         }
       });
     });


  var Customerid = $("CustomerID").val();
        $('#CustomerName').blur(function () {
            debugger;
            $('#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 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);
   }

如果我输入并选择客户名称与客户名相关的联系人正在加载联系人下拉列表，我的上述代码正常工作但我怀疑的是我给了模糊功能在联系人下拉列表中

    $('#CustomerName').blur(function () {

我不知道我的代码是否正确但是它有效。现在我想要的是请任何人告诉我这个模糊功能的替代或正确的代码。我尝试按照我的水平解释我的问题，任何一个人帮我解决这个问题。

提前谢谢。

mvc4中的级联文本框？

0 个答案: