如何在ASP.Net MVC中将登录视图实现为jQueryUI对话框

Question

I've seen a few example of similar things and i've also looked at the KiGG application which also uses a dialog box to display the login box. I'm pretty new to MVC but making some good progress and i'm looking to add a bit of candy for a demo i need to perform next week.

Does anyone have an simple example or could describe the steps i need to take to make a login view appear in a jQueryUI dialog box ?

I have some of the pieces i think ... I think i need a partial view to be in the master page (like Kigg) so that at anytime i hit a controller which needs authenication the master page will deal with it.

Any help would be appriecated.

Answer 1

1. Create a normal html form within your jQuery UI dialog. Example here .

2. Hook up jQuery Form to submit the form via ajax. Optionally, use jQuery validation in combination. Example:

   function isValid(formData, jqForm, options) { return $(jqForm[0]).valid(); }

   function loggedIn() { alert("You are logged in"); }

   var formOptions = { beforeSubmit: isValid, success: loggedIn, url: '/your/mvc/action/on/login/controller', type: 'post' };

   var validateOptions = { submitHandler: function(form){ jQuery(form).ajaxSubmit(formOptions); $("#dialog").dialog(); }, messages: { email: "Email is required", password: "Password required" } };

   $("#loginform").validate(validateOptions);

3. Create a login action on your account controller returning JsonResult and post your form to this action (should be https).