对不起我的语言 - 我只能用英语阅读:)
我想在 asp.net mvc 中做这样的事情:
1. 向用户显示页面
2. 打开模式对话框 (jquery-ui) 并显示部分视图
3. 验证用户在客户端
4 上输入数据。如果可以,则验证服务器
5a 上的输入数据。如果没问题,那么我想重新加载第
5b 页。如果有错误,我想将其显示给用户
6。用户可以随时使用按钮关闭对话框。
我有问题宽度 5a 和 6。
在 Firefox 中,当我进行服务器验证并单击关闭按钮(对话框('关闭'))时,我重定向到调用验证数据的页面。如果我单击对话框标题中的“x”,它就关闭了。在歌剧中也是如此。
当我在服务器传递对话框上插入良好的数据和验证时,Firefox 中的附加功能不会关闭(它在歌剧中工作)。
我在 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;
});