Question

您好我的视图中有四个字段客户名称， ContactPerson ，电子邮件， MobileNo

客户名称和 ContactPerson 是级联下拉列表，电子邮件和MobileNo是文本框。

如果我选择了CustomerName，相关的ContactPerson将自动加载到ContactPerson下拉列表中。

如果我选择联系人，则联系人与电子邮件和 PhoneNo 将自动加载到Email和PhoneNo文本框中。这可以按预期工作。

现在一切正常，两个级联下拉工作正常现在我的问题是如果我选择联系人联系人相关电子邮件和电话号没有显示在相应的文本框中。

我的控制器代码：

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 GetPhoneNoByContactPersonID(Guid CustomerContactId)
    {
        var resultMobileNumber = string.Empty;
        var resultEmail = string.Empty;
        var ContactID = db.CustomerContacts.Where(i => i.CustomerContactID == CustomerContactId).Select(i => i.ContactID).FirstOrDefault();
        if (ContactID != null)
        {
            var contact = (from p in db.Contacts where p.ContactID == ContactID select p).FirstOrDefault();
            if (contact != null)
            {
                if (string.IsNullOrEmpty(contact.Mobile1) == false)
                {
                    resultMobileNumber = contact.Mobile1;
                }
                else if (string.IsNullOrEmpty(contact.Mobile2) == false)
                {
                    resultMobileNumber = contact.Mobile2;
                }
            }
            if (contact != null)
            {
                if (string.IsNullOrEmpty(contact.Email1) == false)
                {
                    resultEmail = contact.Email1;
                }
                else if (string.IsNullOrEmpty(contact.Email2) == false)
                {
                    resultEmail = contact.Email2;
                }
            }
        }
        var details = new { success = true, email = resultEmail, mobileno = resultMobileNumber };
        return Json(details, 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)

J-query Code

 <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");
   debugger;
    $.ajax(
        '@Url.Action("GetPhoneNoByContactPersonID", "VisitorsForm")',{
            type: "GET",
            dataType: "html",
            async: false,
            data: { CustomerContactID: $("#CustomerContactID").val()
            },
            error: function (ex) {
                alert('Failed to retrieve Email.' + ex);
            },
            beforeSend: function () {
            },
            success: function (data) {

                $("#Email").val(data.email);
                $("#MobileNo").val(data.mobileno)
                alert("Success");
            }
         });
     });

现在一切正常，当我点击联系人来到 GetPhoneNoByContactPersonID 操作时，它会计算值并再次返回到视图，它也可以在网络中看到。一切都很完美，但它没有在文本框中显示数据。当我检查代码时，它没有在控制台中显示任何错误。但它显示了一条警告信息，如下所述。

现在一切正常。但我不知道为什么它不显示我不知道问题在哪里。我尝试了我的级别bwst来解释我的问题.-请任何人帮我解决这个问题。

提前谢谢

Answer 1

没有关联的ID。所以在TextBoxFor中首先分配一个id。

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

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

现在这应该可行

$("#Email").val(data.email);
$("#MobileNo").val(data.mobileno)

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

1 个答案: