How do i implement a login view as a jQueryUI dialog box in ASP.Net MVC

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.

autonomatt · Accepted Answer · 2011-09-16 15:11:15Z

3

Create a normal html form within your jQuery UI dialog. Example here.
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);
Create a login action on your account controller returning JsonResult and post your form to this action (should be https).

edited Sep 16, 2011 at 15:11

answered Sep 16, 2011 at 10:49

autonomatt

4,4134 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do i implement a login view as a jQueryUI dialog box in ASP.Net MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related