jQuery UI对话框表单和ASP.NET MVC

Question

我不完全确定这是否是最好的说法,但是,我在解决如何实现方面遇到了一些麻烦.我所拥有的是一个带有表单的页面,用于编辑用户的详细信息.

页面本身位于/ User/Edit/1234,其中1234是员工编号.

在该页面上有一个重置密码链接,它打开以下jQuery UI对话框.

<div id="dialog-confirm" title="Are you sure?">
    <form name="passReset" id="passReset" action="/User/Reset/<%=Html.ViewData("EmployeeNumber")%>" method="post">
    <div id="reset1"><%=Html.ViewData("Name")%>'s password will be reset to 11111. You need to notify them that 
    they will need to change their password immediately or the account will be locked out. <br /> <br />
    If you are sure you wish to proceed. Type the word <b>"YES"</b> in the box below and click OK.

        <div align="center">
            <%=Html.ValidationMessage("confirmResetText")%>
            <input type="text" id="confirmResetText" style="width: 45px;"/><input type="submit" value="OK" />
        </div>
    </div>
    </form>     
</div>

我想要做的是将该表单提交给一个Action(在这个例子中为/ user/reset/1234),并将结果(Success,Fail或验证消息)返回给对话框而不会让用户离开页面.

如果我提交回与页面相同的操作,我所采取的操作的代码将执行我所追求的,但我不是,这就是我被困住的地方.

我的代码是:

<AcceptVerbs(HttpVerbs.Post)> _
Function Reset(ByVal employee As String, ByVal collection As FormCollection)

    If ModelState.IsValid Then

        If collection("confirmResetText") <> "Yes" Then
            ModelState.AddModelError("confirmResetText", "You didn't enter 'YES'.")
        End If
        'if data doesn't pass all rules, take them back to the form
        If (Not ModelState.IsValid) Then
            Return View(collection)
        End If
        ModelState.SetModelValue("confirmResetText", New ValueProviderResult(ValueProvider("confirmResetText").AttemptedValue, collection("confirmResetText"), System.Globalization.CultureInfo.CurrentCulture)) 'First Name
        Dim myArea = (From a In db.secUserInfos _
                         Where a.EmployeeNumber = User.Identity.Name.ToString).SingleOrDefault

        Dim uEditable As secUserInfo = gsecRepository.CheckIfUserCanBeEdited(employee, myArea.AreaID).SingleOrDefault

        'check if user can be edited by you.
        If uEditable Is Nothing Then
            Return Redirect("/Home")
        Else
            Try
                db.aspnet_Membership_SetPassword("/", employee, "11111", "11111", DateTime.Now, 0)
            Catch ex As Exception
                Response.Write(ex.Message)
            End Try

            Return Redirect("/User/Edit/" & employee)
        End If
    End If


End Function

那么我如何从这个到我实际想要实现的目标呢？我认为JSON是一种解决方案,但我对此的了解非常有限.

任何帮助是极大的赞赏.

Answer 1

你可以使用Json,而且使用asp.net mvc并不是那么难.我们把一些东西放在一起吧.

首先是html:

<a href="#" id="dialogpopup">Change password</a>

    <div id="dialog-confirm" title="Are you sure?">
        <form name="passReset" id="passReset" method="post">
        <div id="reset1">Your's password will be reset to 11111. You need to notify them that 
        they will need to change their password immediately or the account will be locked out. <br /> <br />
        If you are sure you wish to proceed. Type the word <b>"YES"</b> in the box below and click OK.

        <div id="confirmResetTextMessage"></div> 

            <div align="center">                               
                <input type="text" name="confirmResetText" id="confirmResetText" style="width: 45px;"/>                
            </div>
        </div>
        </form>     
    </div>

注意我们如何链接(更改密码)以打开对话框以及包含对话框内容的div.还要注意如何删除OK按钮,我们将使用jqueryui为弹出对话框提供的内置按钮功能.

接下来我们将创建一个action方法,该方法将返回一个json对象,指示提供的答案(YES)是否正常:

public JsonResult Confirm(string confirmResetText)
        {
            if (confirmResetText != "YES")
                return Json(new ConfirmResult { OK = false, Message = "Confirm text should be yes" });

            return Json(new ConfirmResult { OK = true });
        }

        private class ConfirmResult
        {
            public bool OK { get; set; }

            public string Message { get; set; }
        }

控制器上的Json方法可以很好地将结果类转换为Json.

最后是javascript,它将打开对话框并处理beforeclose事件.当提供的文本不是YES时,它将保持对话框打开,否则它将关闭它.此外,它还会添加一个关闭按钮,该按钮的处理程序将尝试关闭对话框,这将导致触发beforeClose事件处理程序.

<script type="text/javascript">
        $(InitDialog);

        function InitDialog() {
            $("#dialogpopup").click(OpenDialog);
        }

        function OpenDialog(eventObject) {
            var dialog = $('#dialog-confirm').dialog({
                autoOpen: false,
                buttons: { "Ok": function() { $(this).dialog("close"); } },
                beforeclose: function(event, ui) {
                    $.getJSON("/Home/Confirm", { confirmResetText: $("#confirmResetText").val() }, function(data, textStatus) {
                        var ok = data.OK;

                        if (!ok) {
                            $("#confirmResetTextMessage").text(data.Message);
                        }
                        else {
                            dialog.dialog("destroy");
                        }
                    });

                    return false;
                }
            });

            dialog.dialog("open");
        }
    </script>    

将这些东西放在一起将为您提供上述经验.我希望.