在MVC4中，多次点击按钮打开弹出窗口时出现问题？

Question

你好，我在点击按钮时无法多次打开弹出窗口，我将清楚地解释我的问题。

嗨，这是我的父视图客户表单。如果我输入客户名称地址类型、街道、位置和地点，然后选择区域，那么就会有一个添加按钮靠近区域。假设列表中没有该区域，那么我必须添加它。所以我点击添加按钮，它将作为弹出窗口打开AreaPartial视图。

在我输入详细信息并单击创建按钮保存数据到数据库之后，当关闭弹出窗口时，它会显示相同的弹出窗口（即当我单击位于弹出窗口右上角的x标记时）。现在一切都正常工作。

现在我的问题是，在单击主要保存按钮之前，我通过单击按钮打开弹出窗口并添加区域，然后关闭弹出窗口，我必须再添加另一个区域，所以我再次单击添加按钮，但它不会打开弹出窗口。这是我的问题。

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

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

当在父视图中点击添加按钮时，我的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");
       }
    }
    });
    });

我的 Partial View 代码

   @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) { 
    var option = new Option(Area, data);
        $('#AreaID').append($(option));
        alert("sucess");
        window.close();
  });
  }

这是我的问题，我无法多次打开弹出窗口。我尽力解释了我的问题，请帮助我解决这个问题。

提前感谢。

- Susan

---

你最好的选择可能是创建一个隐藏的div并为其创建一个类。然后，一旦你拥有了它，只需显示或隐藏该div，而不是使用jquery的对话框样式。当你实际上“关闭”对话框并完全删除部分视图时，它可能会引起一些冲突。我还建议你看看是否可以使用AJAX将数据发布到控制器，因为你已经在大量使用JavaScript。如果你愿意，我可以给你一个例子。 - Dr Archer

由于您是使用jQuery打开此对话框，因此在SaveArea()方法中，应该使用$('#AddAreaNew').dialog('close')而不是window.close()。 - Thangadurai

我按照您说的Thangadurai所说的方式进行了操作，但仍然无法正常工作。 - Susan

在您的关闭对话框中，您是否也销毁了对话框？第一个对话框的剩余物可能会导致不良行为。实际上，在销毁后，您可能还想将其删除。请查看此答案：http://stackoverflow.com/a/8433251/550975 - Serj Sagan

一个疑问，我应该在父视图或者局部视图中放置$(this).dialog('destroy').remove()？ - Susan

Answer 1

或许像这样的简短示例可以帮助你。

<style>
.floatingbox
{
z-index:99999;
position:absolute;
/* and more of your styling here, the main point is to make to appear above any other element on the page */
}
</style>

<div class="floatingbox" id="inputbox">

</div>

编辑：<input type="button" value="添加字段" onclick="WhenIGetClicked(this)"/>

function WhenIGetClicked(e)
{
RefershContent();
document.getElementbyId('input').style.left = e.style.left;
document.getElementbyId('input').style.top = e.style.top; // show div at position of button but you can change it to where-ever
}

function RefreshContent()
{
 // put your html in here for the different fields you'll need in the div 
document.getElementbyId('inputbox').innerHTML = '';
// add the rest of your html mark up but make it as a function so it can be 'refreshed' and look like a new blank form each time, i found this easier than making a partial view and having to deal with loading it into the div/messing with javascript inside the partial view but may be personal preference :)
}

function OnSaveClick()
{
var SomeValueYouWantToPass = document.getElementbyId('inputboxinsidethediv').value; // or innerHTML works sometimes too if it's not getting the value correctly

$.ajax({
type:post,
url: '/MyController/ActionName',
dataType: 'json',
data: { MyVariableOnTheControllerSide: SomeValueYouWantToPass },
success: function()
{
alert('hey it worked!'); // or refresh the page to load the new field, etc
}
)}

}
</script>

现在在控制器端：

public JsonResult UpdateField(string MyVariableOnTheControllerSide)
{
//do something with the data. 
return Json('Hey it worked!', JsonRequestBehavior.AllowGet);
}

如果你想将它作为类传递，因为这是你在控制器上设置的方式，那么当获取值时，你必须将该类创建为 HTML 标记的 Json 对象（你甚至可以在 div 中进行控件的 for 循环，并动态地获取值，而不是到每个元素来获取它的值）。这是我通常如何做弹出窗口的基本流程。如果需要澄清或者我错过了你的重点，请告诉我 :)

- Dr Archer