jQuery UI Dialog Form and ASP.NET MVC
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
Resp开发者_如何学JAVAonse.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.
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.
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
精彩评论