在MVC4中使用弹出窗口添加数据后,该值在下拉列表中显示两次?

时间:2016-04-03 05:28:30

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

您好我想用完美的例子来解释我的问题。我在视图中有两个下拉列表,一个是客户名称,另一个是 ContactPerson ,如果我选择客户名称与客户名称相关 ContactPerson 会自动加载联系人下拉列表。它就像层叠下降。

假设我选择客户名称并选择 ContactPerson 并且联系人名称不在列表中,则表示我必须添加该名称。所以我在联系人附近留了一个添加按钮。如果联系人姓名不在列表中,则意味着我单击该添加按钮,它将部分视图打开为弹出窗口(我创建了一个局部视图并在弹出窗口中调用该视图)。

Partial View Popup window

现在我输入所有细节,然后单击“创建”按钮。它将保存db中的值,然后关闭弹出窗口。现在只有我遇到问题。这是在关闭弹出窗口后,如果我选择联系人,我在下拉列表中显示两次值,但它正确地在db中保存一次。 value showing Two times

在上图中,人们可以看到使用弹出窗口添加值后,该值显示两次。这就是问题所在。请任何人帮我解决这个问题。

我的视图模型

   public class VisitorsViewModel
   {
    public Nullable<System.Guid> CustomerID { get; set; }
    public string CustomerName { get; set; }
    public Nullable<System.Guid> ContactID { get; set; }
    public string ContactPerson { get; set; }
    public string PhoneNo { get; set; }
    public string MobileNo { get; set; }  
    public string Email { get; set; }
    public string AlternateEmail { get; set; }
    }

我在同一个视图模型中为局部视图(子视图)和主视图(父视图)创建了属性。

我的控制器代码,用于保存在弹出窗口中输入的数据。

 public ActionResult ContactPersonPartialView()
   {
    ViewBag.CustomerID = new SelectList(db.Customers, "CustomerID", "DisplayName");   
    return View("ContactPersonPartialView");
   }
    [HttpPost]

 public JsonResult ContactPersonCreate(VisitorsViewModel VVviewmodel)
   {
     ViewBag.CustomerID = new SelectList(db.Customers, "CustomerID", "DisplayName", VVviewmodel.CustomerID);
        var ContactIDObj = Guid.NewGuid();
        var CustomerContactIDObj = Guid.NewGuid();

        var CustomerContactObj = new CustomerContact()
        {
            CustomerContactID = CustomerContactIDObj,
            CustomerID = VVviewmodel.CustomerID,
            ContactReference = VVviewmodel.ContactPerson,
            ContactID = ContactIDObj,
            IsActive = true,
            IsDeleted = false,
            CreatedDate = DateTime.Now,
            EditedDate = DateTime.Now,
            LastActiveOn = DateTime.Now,
            RowID = Guid.NewGuid(),
            CreatedSessionID = Guid.NewGuid(),
            EditedSessionID = Guid.NewGuid(),
            OfflineMode = false,
            OfflineID = Guid.NewGuid()
        };
        var ContactObj = new Contact()
        {
            ContactID = ContactIDObj,
            DisplayName = VVviewmodel.CustomerID.ToString(),
            PrintName = VVviewmodel.CustomerID.ToString(),
            Phone1 = VVviewmodel.PhoneNo,
            Mobile1 = VVviewmodel.MobileNo,
            Email1 = VVviewmodel.Email,
            Email2 = VVviewmodel.AlternateEmail

        };

        db.Contacts.Add(ContactObj);
        db.CustomerContacts.Add(CustomerContactObj);
        db.SaveChanges();
        ModelState.Clear();
       return Json(CustomerContactIDObj);
       }

我的父母查看代码

 @Html.Label("Employee Name", new { @class = "control-label" })
 @Html.DropDownList("EmployeeID", null, "Select", new { @class = "form-control" })

 @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" })
            <button id="AddContactPerson">Add </button>
             <div id="AddNewContactPerson"></div>

我的主视图J查询代码打开弹出窗口

   $(function () {
     $('#AddNewContactPerson').dialog({
       autoOpen: false,
       width: 400,
       height:500,
       resizable: false,
       title: 'Add New',
       modal: true,
       open: function(event, ui) {
       $(this).load("@Url.Action("ContactPersonPartialView", "VisitorsForm")");
       },
       buttons: {
       "Close": function () {
        $(this).dialog("close");
        }
        }
    });

        $("#AddContactPerson").click(function () {
        $("#AddNewContactPerson").dialog("open");
       });
       });

我的部分查看代码

        @Html.Label("Customer Name")
        @Html.DropDownList("CustomerID", null, "Select", new { @class = "form-control " ,id="Customer"})

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

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


  <script src="~/Scripts/jquery-1.10.4-ui.min.js"></script>
  <link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
  <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
  <script type="text/javascript">
   function SaveContact() {
    debugger;
    var CustomerID = $("#Customer").val();
    var ContactPerson = $("#ContactPerson").val();
    var Email = $("#EmailID").val();
    var AlternateEmail = $("#AlternateEmail").val();
    var PhoneNo = $("#PhoneNo").val();
    var MobileNo = $("#MobileNumber").val();
    alert(CustomerID);
    alert(Email);
    alert(MobileNo);

    var CustomerContact = {
        "ContactPerson":  '' +ContactPerson+'', "Email": '' +Email+ '',
        "AlternateEmail": '' +AlternateEmail+ '', "PhoneNo": '' +PhoneNo+ '',
        "MobileNo": ''+ MobileNo+ '', "CustomerID": ''+CustomerID+''
        };
   $.post("/VisitorsForm/ContactPersonCreate", CustomerContact, function (data) {
   $('#CustomerContactID').append($('<option><option>').val(data).text(ContactPerson));

        alert("sucess");
   });
   }

我希望我尽我最大的努力告诉你我的问题,请任何人给我解决方案来解决这个问题。我知道我的问题太长了,但任何人都明白我的问题并给我解决方案。

提前谢谢......

2 个答案:

答案 0 :(得分:0)

在部分视图上,您​​将在http POST后手动附加ContactPerson。

这会导致主视图在添加新联系人之前重新加载联系人列表。

简而言之,

重新加载数据(包含新的联系选项)+附加新选项=双重输入

尝试删除

$('#CustomerContactID').append($('<option><option>').val(data).text(ContactPerson));

打开部分视图代码。

答案 1 :(得分:0)

替换

$('#CustomerContactID').append($('<option>option>').val(data).text(ContactPerson));

var option = new Option(ContactPerson, data);
$('#CustomerContactID').append($(option));