jQuery UI Dialog Form and ASP.NET MVC

Question

I'm not entirely sure if this is the best way to word it, however, I'm having a little trouble working out how to achieve. What I have is a page with a form on for editing a user's details.

The page itself sits on /User/Edit/1234 where 1234 is the employee number.

On that page there is a reset password link which opens the following jQuery UI dialogue box.

<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>

What I would like to do is submit that form to an Action (in this instance /user/reset/1234) and return the result (Success, Fail or a validation message) to the dialog without the user ever leaving the page.

The code for the action I have would do what I'm after if I was submitting back to the same action as the page, but I'm not, and this is where I'm stuck.

The code I have is:

<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

So how do I go from this to what I'm actually trying to achieve? I have considered JSON as a solution, but my knowledge regarding that is pretty limited.

Any help is greatly appreciated.

Answer 1

I'm am not an asp programmer so i can't help you there but what would do is is use jQuery form plugin it uses ajax and has many options

HTH Mike

Answer 2

You can use Json for this, and really it's not that hard using asp.net mvc. Let's put together some stuff.

First the 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>

Notice how we have link (Change password) to open the dialog and a div with the contents of the dialog. Also note how the OK button is removed, we're going to use to built in button functionality that jqueryui provides for popup dialogs.

Next we're going to create an action method that will return a json object indicating whether the provided answer (YES) is ok:

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; }
        }

The Json method on the controller will nicely convert your result class into Json.

Finally there is the javascript, that will open up the dialog and handle the beforeclose event. It will keep the dialog open when the provided text is not YES, otherwise it will close it. Also it will add a close button, the handler of that button will try to close the dialog, which will cause the beforeClose event handler to be fired.

<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>    

Putting these things together will give you the experience you described above. I hope.