Question

我正在使用jQuery1.4.2，ASP.NET MVC 2和jQuery.UI-1.8。

我正在创建一个数据输入对话框，当所有数据都有效时它可以正常工作，但我想验证服务器上的输入数据并将错误返回到描述错误的对话框中，我不太清楚该怎么做并保持对话框打开。单击链接时将打开该对话框。解决方案可能是试图绕过更多的MVC框架的默认绑定来处理提交按钮点击并创建预期的ProfilePermission对象并调用Controller的AddPermission POST Action方法，但我希望可能有一种更简单的方法而不必编写更多jquery / javascript代码来处理按钮点击并将数据传入/传出服务器。

我的脚本代码看起来像

$("#dialog").dialog({ modal: true,
    position: ['center', 180],
    width: 500,
    height: 130,
    autoOpen: false
});

$(".addPermissionDialog").click(function (event) {
    event.preventDefault();
    $("#dialog").dialog('open');
    return false;
});

我的观点

<div id="dialog" title="Add Permission">
<%: Html.ValidationSummary("") %>
<% using (Html.BeginForm("AddPermission", "Profile"))
{ %>
    <%: Html.Hidden("PersonId") %>
    <%: Html.Hidden("ProfileId") %>
    <div class="editor-label">
        <label for="PersonName">User Name:</label>
        <%: Html.TextBox("PersonName")%>
        <label for="PermissionType">Permission:</label>
        <select name="PermissionTypeId" id="PermissionTypeId" >
            <option value="2">Edit</option>
            <option value="3">View</option>
        </select>
    </div>
    <br />
    <p>
    <input type="submit" name="saveButton" value="Add Permission" />
    <input type="submit" id="cancelButton" name="cancelButton" value="Cancel" />
    <script type="text/javascript">
        document.getElementById("cancelButton").disableValidation = true;
    </script>
    </p>
<% } %>
</div>
<br />
<p>
    <%: Html.ActionLink("Add Permission", "AddPermission", new { profileId = Model.First().ProfileId }, new { @class = "addPermissionDialog" })%>
</p>

我的控制器操作

    [AcceptVerbs("Post")]
    [HandleError]
    public ActionResult AddPermission(string cancelButton, ProfilePermission profilePermission)
    {
        ViewData["Controller"] = controllerName;
        ViewData["CurrentCategory"] = "AddPermission";
        ViewData["ProfileId"] = profilePermission.ProfileId;

        PermissionTypes permission = repository.GetAccessRights(profilePermission.ProfileId);
        if (permission == PermissionTypes.View || permission == PermissionTypes.None)
        {
            ViewData["Message"] = "You do not have access rights (Edit or Owner permissions) to this profile";
            return View("Error");
        }

        // If cancel return to previous page
        if (cancelButton != null)
        {
            return RedirectToAction("ManagePermissions", new { profileId = profilePermission.ProfileId });
        }

        if (ModelState.IsValid)
        {
            repository.SavePermission(profilePermission);

            return RedirectToAction("ManagePermissions", new { profileId = profilePermission.ProfileId });
        }

        // IF YOU GET HERE THERE WAS AN ERROR
        return PartialView(profilePermission); // The desire is to redisplay the dialog with error message
    }

稍后编辑我希望有一种机制使用MVC的管道将错误返回到对话框，我最终崩溃并通过jquery.ui.dialog API添加了一个保存按钮并以这种方式处理问题。我从.aspx页面中删除了按钮。我返回了返回new EmptyResult（）;从控制器的操作，如果一切正常，如果有错误 Response.StatusCode =（int）HttpStatusCode.BadRequest; return Content（errorMessage，MediaTypeNames.Text.Plain）;

    // To add a button and bypass more of MVC plumbing
    buttons: {
        "Save": function () {
            var dlg = $(this);
            $.ajax({
                url: "/Profile/AddPermission",
                type: 'POST',
                data: {
                    PersonId: $("#PersonId").val(),
                    ProfileId: $("#ProfileId").val(),
                    PermissionTypeId: $("#PermissionTypeId").val(),
                    PersonName: $("#PersonName").val()
                },
                success: function (data) {
                    dlg.dialog('close');
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
        }
    }

Answer 1

我正在使用jquery.form和jquery对话框来做这种事情; 在帖子操作中如果一切都很好你return Content("OK")如果不是你返回PartialView()（包含模型状态错误）之后在处理成功的帖子回复的函数中你检查if it is "OK" close the dialog如果没有你设置了$("#yourDialogDiv").html(responseHtmlThatYouGotFromTheServer)

Answer 2

我建议将输入类型提交更改为普通按钮，并在单击按钮时进行Ajax调用，以确保对话框未关闭。使用基于Phils post的MVC2期货库中的JsonValueProviderFactory将数据发送到服务器。如果验证失败，则在ajax error：选项中捕获错误。如果数据有效，请关闭Ajax complete：选项中的对话框。希望这会有所帮助。

ASP.NET MVC jquery.UI对话框 - 如何在服务器上验证对话框的输入并返回错误？

2 个答案: