今天在做AJAX DIALOG数据提交实验，实验目的是，在DIALOG内显示另一页面，并将FORM组件信息提交保存至数据库。代码如下：
DIALOG实现：
function OpenDialog(url,title,width,height,top,left) {
var div = $("<div id='div_Info' title='"+title+"'></div>").appendTo($("BODY"));
var content = div.load(url, {});
$("#div_Info").data("url", url);
div.dialog({
autoOpen: true,
width,
height: height,
modal: true,
resizable: false,
bgiframe: true,
close: function (evt, ui) {
div.dialog("destroy");
div.html("").remove();
}
});
}
//要加载的DIALOG页面
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>UpdateUserPwd</title>
<script src="~/Scripts/jquery-3.0.0.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script>
$(function () {
$(':button').click(function () {
save();
});
})
function save() {
$.get('/RMBase/SysUser/UpdateUserPwd2?a=123&b=456',function (response,status,xhr) {
alert(response);
}
);
}
</script>
</head>
<body>
<div>
<FORM>
<input type="text" id="name" />
<input type="password" id="password" />
<button type="submit">提交</button>
</FORM>
</div>
</body>
</html>
//MVC后台
public ActionResult UpdateUserPwd()
{
return View();
}
public String UpdateUserPwd2(string a,string b)
{
LoginUsers user = (LoginUsers)Session["loginuser"];
if (user.userID == null || user.userID == "")
return "";
var query = _content.Base_UserInfo.Where(u=>u.User_Account==user.userAccount);
query.First().User_Name = query.First().User_Name + a + b;
_content.SaveChanges();
return a + b;
}
在点击了提交按钮后，DIALOG自动关闭，很是奇怪！后来发现是FROM自动提交的缘故，DIALOG页面修改为如下解决问题。
//要加载的DIALOG页面
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>UpdateUserPwd</title>
<script src="~/Scripts/jquery-3.0.0.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script>
$(function () {
$(':button').click(function () {
save();
});
})
function save() {
$.get('/RMBase/SysUser/UpdateUserPwd2?a=123&b=456',function (response,status,xhr) {
alert(response);
}
);
}
</script>
</head>
<body>
<div>
<FORM>
<input type="text" id="name" />
<input type="password" id="password" />
<button type="submit">提交</button>
</FORM>
</div>
</body>
</html>