级联文本框在MVC4中无法正常工作?

时间:2016-03-07 13:05:32

标签: c# jquery ajax asp.net-mvc-4

您好我的观点中有四个字段:CustomerNameContactPersonEmailMobileNo

CustomerNameContactPerson为级联下拉列表,EmailMobileNo为文本框。

如果我选择CustomerName,则会在ContactPerson下拉列表中自动加载相关的ContactPerson

如果我选择Contactperson相关的EmailPhoneNo将自动加载到EmailPhoneNo文本框中。这可以按预期工作。

如果我选择CustomerName作为"KPM Processing Limited",则会在与ContactPerson相关的联系人文本框中加载"Mr.Martin"CustomerName("KPM Processing Limited")),如果我选择联系人姓名(Mr.Martin)联系人相关电子邮件(kpm@example.com)和电话号码(123456)将自动加载到电子邮件和PhoneNo文本框中。

现在,在选择(customerName)后选择另一个"N.S colors"(例如"KPM Processing Limited")并选择与&#34; N.S颜色&#34;相关的联系人名称。 ("MR.Luthar")。现在Mr.Luthar有邮件ID,但没有电话号码,因此电话号码的值将为空,但它显示输出为电子邮件= luthar24@example.com和电话号码= 123456。< / p>

换句话说,当选择具有空电话号码的联系人时,显示的电话号码不会变为空白。

我的控制器代码:

  public JsonResult GetCustomers()
 {
    return Json(db.Customers.ToList(), 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 JsonResult GetEmailByContactPersonID(Guid CustomerContactId)
   {
  var ContactID = db.CustomerContacts.Where(i => i.CustomerContactID == CustomerContactId).Select(i => i.ContactID).FirstOrDefault();
  var contact1 = (from p in db.Contacts where p.ContactID == ContactID select p).FirstOrDefault().Email1;
    if (contact1 == null)
    {
        var contact2 = (from a in db.Contacts where a.ContactID == ContactID select a).FirstOrDefault().Email2;
        contact1 = contact2;
    }
    return Json(contact1, JsonRequestBehavior.AllowGet);
 }

  public JsonResult GetPhoneNoByContactPersonID(Guid CustomerContactId)
{
    var ContactID = db.CustomerContacts.Where(i => i.CustomerContactID == CustomerContactId).Select(i => i.ContactID).FirstOrDefault();
    var mobile1 = (from pn in db.Contacts where pn.ContactID == ContactID select pn).FirstOrDefault().Mobile1;
    if (mobile1 == null)
    {
        var mobile2 = (from a in db.Contacts where a.ContactID == ContactID select a).FirstOrDefault().Mobile2;

        mobile1 = mobile2;
    }
    return Json( mobile1, JsonRequestBehavior.AllowGet);
}

查看代码:

 @Html.Label("Customer Name", new { @class = "control-label" })
 @Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new {     @class = "form-control required", type = "text" })

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

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

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

Jquery代码

 <script src="~/Scripts/jquery-ui-1.11.0.js"></script>
  <script>
  $(function () {
  $.ajax(
    '@Url.Action("GetCustomers", "VisitorsForm")',{
        type: "GET",
        datatype: "Json",
        success: function (data) {
            $.each(data, function (index, value) {
                $('#CustomerID').append('<option value="' + value.CustomerID + '">' + value.DisplayName + '</option>');
            });
        }
    });

  $('#CustomerID').change(function () {
   $('#CustomerContactID').empty();
    $.ajax(
       '@Url.Action("GetContactPersobByCustomerId", "VisitorsForm")',{
            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>');
               });
              }
           });
        });
    });

   $("#CustomerContactID").change(function () {
       alert("hhh");
    $.ajax(
    '@Url.Action("GetEmailByContactPersonID", "VisitorsForm")',{
        type: "GET",
        dataType: "json",
        async: false,
        data: { CustomerContactID: $("#CustomerContactID").val()
        },
        error: function (ex) {
            alert('Failed to retrieve Email.' + ex);
        },
        beforeSend: function () {
        },
        success: function (data) {
            $("#Email").val(data);
                         }
                     });
                 });

  $("#CustomerContactID").change(function () {
   alert("hhh");
  $.ajax(
    '@Url.Action("GetPhoneNoByContactPersonID", "VisitorsForm")',{
        type: "GET",
        dataType: "json",
        async: false,
        data: { CustomerContactID: $("#CustomerContactID").val()
        },
        error: function (ex) {
            alert('Failed to retrieve Email.' + ex);
        },
        beforeSend: function () {
        },
        success: function (data) {

            $("#MobileNo").val(data);
        }
      });
    });

如果电话号码为空,如何将电话字段留空?

1 个答案:

答案 0 :(得分:0)

如果我理解正确,那么问题就在于更换给没有电话号码的客户 MobileNo只读文本框值不会清除。

如果我的理解是正确的,那么你的问题在于你的行动GetPhoneNoByContactPersonID()

具体来说,当你获得mobile1时 - 你使用的linq查询是FirstOrDefault()。Mobile1, 如果无法找到,则返回null,并且调用Mobile1为null将导致excpetion,导致没有从ajax返回。

因此将您的操作更改为:

public JsonResult GetPhoneNoByContactPersonID(Guid CustomerContactId)
{
    var resultMobileNumber = string.Empty;

    var ContactID = db.CustomerContacts.Where(i => i.CustomerContactID == CustomerContactId).Select(i => i.ContactID).FirstOrDefault();
    if(ContactID != null)
    {
    var contact = (from pn in db.Contacts where pn.ContactID == ContactID select pn).FirstOrDefault();
    // check if contact is found
        if (contact != null)
    {
        // if mobile 1 has value
        if(string.IsNullOrEmpty(contact.Mobile1) == false)
        {
            resultMobileNumber  = contact.Mobile1;
        }
        else if(string.IsNullOrEmpty(contact.Mobile2) == false)
        {
            resultMobileNumber  = contact.Mobile2;
        }
    }
    }

    return Json(resultMobileNumber, JsonRequestBehavior.AllowGet);
}