服务器端验证错误后如何显示Jquery模态对话框 [英] How to display Jquery modal dialog after server side validation error

问题描述

我对JQuery和MVC非常陌生.在我的应用程序中，我在单击按钮时打开一个JQuery模态对话框.我正在使用控制器操作方法在此对话框上渲染局部视图，例如:

I am very new to JQuery and MVC. In my application i am opening a JQuery modal dialog on button click. I am rendering a partial view on this dialog using controller action method which is something like:

public ActionResult Create()
{                     
  return PartialView("Create");
} 

部分视图包含一些文本框和创建"按钮.在创建按钮上，我试图将数据保存在数据库中.但是在此之前，我会进行一些验证，例如是否已输入名称，然后将该消息显示给用户. 我使用以下代码进行了此操作:

Partial view contains some textboxes and "create" button. On create button i am trying to save data in database. But before that i do some validation like if entered name already exist then show that message to user. I did this using following code:

return PartialView("Create", model);

这将正确显示消息，但它仅在浏览器中呈现部分视图，并且模式对话框消失.

this is showing the message properly but it render only partial view in browser and modal dialog gets disappeared.

请让我知道如何显示相同的模态对话框并显示错误.

Please let me know how can i show the same modal dialog with error.

推荐答案

您将需要使用表单的AJAX提交.这是继续的方法.与往常一样，从视图模型开始，该模型将代表对话框表单的信息:

You will need to use AJAX submit of the form. Here's how to proceed. As always start with a view model which will represent the information for the dialog form:

public class MyViewModel
{
    public string Foo { get; set; }

    [Required(ErrorMessage = "The bar is absolutely required")]
    public string Bar { get; set; }
}

然后是一个控制器:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Create()
    {
        return PartialView("Create");
    }

    [HttpPost]
    public ActionResult Create(MyViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return PartialView(model);
        }
        // TODO: the model is valid => do some processing with it
        // and return a JSON result confirming the success
        return Json(new { success = true });
    }
}

和主视图(~/Views/Home/Index.cshtml):

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
    // Remark: all this javascript could be placed in a separate js file
    // to avoid cluttering the views
    $(function () {
        $('#modalLink').click(function () {
            $('#dialog').load(this.href, function () {
                $(this).dialog();
                bindForm(this);
            });
            return false;
        });
    });

    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        alert('thanks for submitting');
                        $('#dialog').dialog('close');
                    } else {
                        $('#dialog').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        });
    }
</script>


@Html.ActionLink("open modal", "create", null, null, new { id = "modalLink" })
<div id="dialog"></div>

和局部视图(~/Views/Home/Create.cshtml)，其中将包含模态中显示的形式:

and a partial view (~/Views/Home/Create.cshtml) which will contain the form shown in the modal:

@model MyViewModel
@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(x => x.Foo)
        @Html.EditorFor(x => x.Foo)
        @Html.ValidationMessageFor(x => x.Foo)
    </div>
    <div>
        @Html.LabelFor(x => x.Bar)
        @Html.EditorFor(x => x.Bar)
        @Html.ValidationMessageFor(x => x.Bar)
    </div>
    <input type="submit" value="OK" />
}

这篇关于服务器端验证错误后如何显示Jquery模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！