jQuery的对话框服务器端验证 [英] server side validation in jquery dialog
问题描述
对不起我的语言 - 英语我只能读:)
我想在asp.net mvc的是这样的:
1.显示用户页面
2.打开模态对话框(jQuery的-UI),并显示局部视图
在客户端
3.验证用户输入的数据
4.如果是OK,然后验证服务器
输入数据
5A。如果它是确定的话,我想重新加载页面
5B。如果有一个误差我想要显示其用户
6.用户可以在任何时间就可以了按钮关闭对话框。
我有问题的宽度5A和6
在Firefox当我做服务器的验证,然后单击关闭按钮(对话框(亲密)),当我得到重定向到被调用来验证数据的页面。如果我点击X在对话框标题已经很接近了确定。在歌剧这是同样的情况。
另外在Firefox当我插入一个好的数据和验证服务器通对话框不关闭(在歌剧它的工作)。
我没有在MVC大赛经验,不知道如果我这样做的权利。请看看我的code和告诉我,如果这是错误的,我不应该这样做的。
sorry for my language - in English i can only read :)
i want to do in asp.net mvc something like this:
1. show user a page
2. open modal dialog (jquery-ui) and show partial view
3. validate user input data on client side
4. if it's OK then validate input data on server
5a. if it's OK then i want reload page
5b. if there is a errors i want show its to user
6. user can close dialog at any time with button on it.
i have problem width 5a and 6.
in Firefox when i do server validate and click close button (dialog('close')) when i get redirect to page that was call to validate data. if i click 'x' in header of dialog box it's close OK. In opera it's the same situation.
additional in Firefox when i insert a good data and validation on server pass dialog box don't close (it's work in opera).
i don't have big experience in mvc and don't know if i do it right. please look at my code and tell me if it's wrong and i shouldn't do it that way.
CONTROLER code:
controler code:
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的索引页面
// javascript on index page
<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
表单视图看起来像这样:
I import js files in order: jquery-1.6.1.js, jquery-ui-1.8.13.js, jquery.validate.js, jquery.validate.unobtrusive.js
the form view looks like that:
// 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;
});
推荐答案
嘿嘿。
这就是为什么我喜欢编程。
解决的方法很简单,我就在这里发布,以避免其他人花了一天时间搜索了错误。
我的解决方案我忘了附加功能键关闭,当我重新加载该对话框的内容。这就是为什么在关闭按钮,点击后,服务器的验证重定向到这个动作(首页/创建)。
heh.
this is why i love programming.
the solution is very simple and i post it here to avoid other people to spent a day searching that bug.
in my solution i forget to attach function to button close when i reload content of the dialog box. this is why click on the close button after server validation redirect to this action (Home/Create).
$("#divInsert").html(data);
$.validator.unobtrusive.parse($("#divInsert"));
在此之后codeI添加此code和它的工作。
after this code i add this code and its working.
$("#inputCloseModal").click(function () {
dialog.dialog('close');
return false;
});
这篇关于jQuery的对话框服务器端验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!