jQuery对话框中的服务器端验证
|
对不起,我的语言-英语我只能读:)
我想在asp.net mvc中做这样的事情:
1.向用户显示页面
2.打开模式对话框(jquery-ui)并显示部分视图
3.在客户端验证用户输入数据
4.如果可以,请验证服务器上的输入数据
5a。如果可以的话,我想重新加载页面
5b。如果有错误,我想向用户显示
6.用户可以随时通过单击按钮关闭对话框。
我有问题宽度5a和6。
在Firefox中,当我进行服务器验证时,当我重定向到调用验证数据的页面时,单击关闭按钮(对话框(\'close \'))。如果我在对话框的标题中单击\'x \',则关闭确定。在歌剧中也是如此。
当我插入良好的数据并且在服务器传递对话框中进行验证时,Firefox中的其他功能不会关闭(它在Opera中起作用)。
我没有在mvc方面的丰富经验,也不知道我是否做对了。请查看我的代码,并告诉我它是否错误,我不应该那样做。
控制器代码:
public ActionResult Create()<br/>
{
return PartialView(new UserDTO());
}
[HttpPost]
public ActionResult Create(UserDTO model)
{
if(model.Email != \"fromasz@gmail.com\")
{
ModelState.AddModelError(\"Email\", \"wrong email\");
return PartialView(model);
}
return new EmptyResult();
}
//索引页面上的javascript
<script type=\"text/javascript\">
var dialog;
$(document).ready(function () {
dialog = $(\"#divInsert\").dialog({
title: \"Insert\",
resizable: false,
modal: true,
autoOpen: false
});
$(\"#aShowInsert\").click(function () {
$(\"#divInsert\").empty();
$(\"#divInsert\").load(\"Home/Create\", function () {
$(\"#inputCloseModal\").click(function () {
dialog.dialog(\'close\');
return false;
});
});
dialog.dialog(\"open\");
return false;
});
});
</script>
<div id=\"divInsert\" /> - its a dive where i loads form.
<a id=\"aShowInsert\">add element</a> - link thats open dialog.
我依次导入js文件:jquery-1.6.1.js,jquery-ui-1.8.13.js,jquery.validate.js,jquery.validate.unobtrusive.js
表单视图如下所示:
// import js..
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div class=\"editor-label\">
@Html.LabelFor(model => model.Name)
</div>
<div class=\"editor-field\">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
<div class=\"editor-label\">
@Html.LabelFor(model => model.Surname)
</div>
<div class=\"editor-field\">
@Html.EditorFor(model => model.Surname)
@Html.ValidationMessageFor(model => model.Surname)
</div>
<div class=\"editor-label\">
@Html.LabelFor(model => model.Email)
</div>
<div class=\"editor-field\">
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)
</div>
<p>
<input type=\"submit\" value=\"Create\" id=\"inputSubmit\" />
<input type=\"submit\" value=\"Close\" id=\"inputCloseModal\" />
</p>
}
<script type=\"text/javascript\">
$(\"#inputSubmit\").click(function (e) {
e.preventDefault();
var form = $(\"#divInsert form\");
form.validate();
if (form.valid()) {
$.ajax({
url: \"/Home/Create\",
data: form.serialize(),
type: \"POST\",
success: function (data) {
if (data === \"\") {
location.reload();
}
else {
$(\"#divInsert\").html(data);
$.validator.unobtrusive.parse($(\"#divInsert\"));
}
}
});
}
return false;
});
没有找到相关结果
已邀请:
1 个回复
缔恃钨
在此代码之后,我添加了此代码及其工作。