层叠下拉在mvc4中不起作用?

时间:2016-02-03 11:34:12

标签: c# jquery sql twitter-bootstrap asp.net-mvc-4

您好我在我的视图中有两个字段&#34; CustomerName&#34; &#34; ContactPerson&#34; 。如果我选择客户名称,则依赖客户名称的值需要存储在 ContactPeson 下拉列表中。根据以下代码,它从Db获取数据并存储在两个下拉列表中,如果我选择&#34; CustomerName&#34; 相关的&#34; ContactPerson&#34; < / strong>会自动存储或显示在 ContactPerson 下拉列表中。一切正常。但问题是,如果我选择下拉列表中的值并尝试将其保存在Db中,则不保存该值。两个字段的值都为null。我不知道我错了。任何人都可以解决这个问题。

提前谢谢..

我的观点 CascadingDropDown

我的ViewModel

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

我的观点

 <div class="col-sm-4">
            <div class="form-group">
                  @Html.LabelFor(model => model.CustomerName , new { @class = "control-label" })
   @Html.DropDownList("dropdownCustomer", new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @style = "width:250px;" })
</div>
</div>



 <div class="col-sm-4">
            <div class="form-group">

                  @Html.LabelFor(model => model.ContactPerson, new { @class = "control-label" })
        @Html.DropDownList("dropdownCustomerContact", new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @style = "width:250px;" })
            </div></div>

j-query代码

  $(function () {
    $.ajax({
        type: "GET",
        url: "/VisitorsForm/GetCustomers",
        datatype: "Json",
        success: function (data) {
            $.each(data, function (index, value) {
                $('#dropdownCustomer').append('<option value="' + value.CustomerID + '">' + value.DisplayName + '</option>');
            });
        }
    });

    $('#dropdownCustomer').change(function () {

        $('#dropdownCustomerContact').empty();

        $.ajax({
            type: "POST",
            url: "/VisitorsForm/GetContactPersobByCustomerId",
            datatype: "Json",
            data: { CustomerID: $('#dropdownCustomer').val() },
            success: function (data) {
                $.each(data, function (index, value) {
                    $('#dropdownCustomerContact').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');
                });
            }
        });
    });
});

我的控制器

 public ActionResult Create()
        {
    ViewBag.CustomerContactID = new SelectList(db.CustomerContacts, "CustomerContactID", "ContactReference");

    ViewBag.CustomerID = new SelectList(db.Customers, "CustomerID", "DisplayName");
        return View();
    }

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

     [HttpPost]
    public ActionResult Create(VisitorsViewModel visitorviewmodel)
    {

   ViewBag.CustomerContactID = new SelectList(db.CustomerContacts, "CustomerContactID", "ContactReference",visitorviewmodel .CustomerContactID );

ViewBag.CustomerID = new SelectList(db.Customers, "CustomerID", "DisplayName",visitorviewmodel .CustomerID );

  var VisitorsViewObj = new VisitorsForm()
        {
  CustomerID = visitorviewmodel.CustomerID,
  CustomerContactID = visitorviewmodel.CustomerContactID
   };

1 个答案:

答案 0 :(得分:-1)

   <div class="col-sm-4">
    <div class="form-group">

@Html.LabelFor(model => model.CustomerName , new { @class = "control-  label" })
@Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @style = "width:250px;" })
                   </div>
                   </div>


   <div class="col-sm-4">
    <div class="form-group">
@Html.LabelFor(model => model.ContactPerson, new { @class = "control-label" })
@Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @style = "width:250px;" })

        </div> </div>


   $(function () {
    $.ajax({
        type: "GET",
        url: "/VisitorsForm/GetCustomers",
        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({
            type: "POST",
            url: "/VisitorsForm/GetContactPersobByCustomerId",
            datatype: "Json",
            data: { CustomerID: $('#CustomerID').val() },
            success: function (data) {
                $.each(data, function (index, value) {
                    $('#CustomerContactID').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');
                });
            }
        });
    });
});