如何在特定字段中自动加载数据而不在ASP.net mvc4中重新加载页面?

时间:2016-03-23 04:24:59

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

Customer Parent View

您好我的父母视图客户。如果我输入客户名称地址类型,街道,位置,然后选择区域,我在区域附近有一个添加按钮。假设如果区域不在列表中意味着我必须添加它。所以我点击该添加按钮,它将打开 AreaPartial 视图作为弹出窗口。

Area Partial View Popup window

输入详细信息并单击“创建”按钮后,它将数据保存在db中,当它关闭时显示相同的弹出窗口,这意味着当我单击x标记[在弹出窗口的右上角时)。现在一切正常。

现在我的问题是在使用X标记(位于右上角的弹出窗口中)关闭弹出窗口后,它没有加载我最近在区域字段中添加的值。刷新整个客户视图(父视图)并单击“区域”字段后,将加载该值。

这是我的问题,当我关闭弹出窗口时,我最近添加的值必须自动加载到客户父视图的区域字段中。如何完成这项任务。

**我的模型CustomerView模型** 在此模型中,它包含部分视图属性和父视图属性。     public System.Guid customerID {get; set;}     public string CustomerName {get; set;}     public string Street {get; set;}     public Nullable AreaID {get;组; }     public string Area {get;组; }     public Nullable CityID {get;组; }     public string City {get;组; }

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

  public ActionResult AreaPartialView()
  {
   ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName");
   return View("AreaPartialView");
 }
 [HttpPost]

  public ActionResult AddAreaInfo(CustomerViewModel objareaVM)
  {
    var objAreaID = Guid.NewGuid();
    ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName", objareaVM.CityID);

  var ObjArea = new Area()
    {
        AreaID =objAreaID,
        DisplayName = objareaVM.Area,
        PrintName = objareaVM.Area,
        CityID = objareaVM.CityID,
        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()
    };

    db.Areas.Add(ObjArea);
    db.SaveChanges();
    ModelState.Clear();

    return Json("Customer", JsonRequestBehavior.AllowGet);
  }

我的父视图区域

  <div id="Area">
  <div class="col-sm-4">
  <div class="form-group">
  @Html.LabelFor(model => model.Area, new { @class = "control-label"})
  @Html.DropDownList("AreaID", null, "Select", new { @class = "form-control required" })
  <button id="AddArea">Area</button>
  <div id="AddAreaNew"></div>
        </div>
      </div>
   </div>

点击添加按钮后,我的j-query代码将区域局部视图显示为弹出窗口

<script src="~/Scripts/jquery-1.10.2-ui.js"></script>
<link rel="stylesheet"href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

     <script type="text/javascript">
     $("#AddArea").click(function () {
      $('#AddAreaNew').dialog("open");
       });
      $(function () {
        $('#AddAreaNew').dialog({
       autoOpen: false,
       width: 400,
       height: 500,
       resizable: false,
       title: 'Add Area',
       modal: true,
       open: function (event, ui) {
           $(this).load("@Url.Action("AreaPartialView", "Customer")");
       },
       buttons: {
           "Close": function () {
               $(this).dialog("close");
           }
       }
   });
   });

我的部分查看代码

   @Html.Label("Area" , new { @class = "control-label" })
   @Html.TextBoxFor(model => model.Area, new { @class = "form-control", type = "text" ,id ="AreaName"})
   @Html.ValidationMessageFor(model => model.Area)


   @Html.Label("City")        
   @Html.DropDownList("CityID", null, "Select", new { @class = "form-control " })


  <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 SaveArea() {
    debugger;
    var Area = $("#AreaName").val();
    var CityID = $("#CityID").val();
    alert(Area);
    var AreaAdd = { "Area": '' +Area + '', "CityID": CityID };
    $.post("/Customer/AddAreaInfo", AreaAdd,
    function (data) { if (data == 0) { location = location.href; } }, 'json').success(function (data) {
        alert("sucess");
        window.close();
    });
}

如果单击按钮将部分视图打开为弹出窗口,并且在输入详细信息并单击创建按钮后它也将数据保存在db中但是在关闭弹出窗口后它不会自动加载值 - 窗口。一旦刷新整个父视图,该值将自动加载。请任何人帮忙解决这个问题..

提前谢谢..

0 个答案:

没有答案