我点击按钮多次打开弹出窗口时遇到问题。我会清楚地解释我的问题。
嗨,这是我的父视图客户表单。如果我输入客户名称地址类型,街道,位置,地点,然后选择区域附近有一个添加按钮area.Suppose如果区域不在列表中意味着我必须添加。所以我点击该添加按钮,它将打开 AreaPartial 视图作为弹出窗口。
输入详细信息并单击“创建”按钮后,它将数据保存在db中,当它关闭时显示相同的弹出窗口,这意味着当我单击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");
}
}
});
});
我的部分查看代码
@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();
});
}
这是我的问题,我无法多次打开我的弹出窗口。我尽力解释我的问题。请任何人帮我解决这个问题。
提前谢谢..
答案 0 :(得分:0)
作为一个简单的例子,也许这样的事情会对你有所帮助。
<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="Add Field" 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循环控制并动态获取值而不是伸出到每个元素以获得它的值)。我经常做弹出窗口的方式非常基本。如果您需要澄清或者我错过了您的观点,请告诉我:))