Login via Usercontrol View + jQuery

Since administration was the next part I wanted to work on.

I decided that for the moment I just want a little login for in the upper corner

I decided to put the login screen view logic into a user control, and added the following user control named Login.ascx and placed it into the Shared

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%if(!Page.User.Identity.IsAuthenticated) {%>
    <form action="/Home/Login" method="post" id="LoginForm">
        <span id="EmailLabel">Username:</span><br />
        <%=Html.TextBox("Username")%><br />
        <span id="PasswordLabel">Password:</span><br />
        <%=Html.Password("Password")%><br />
         <span id="Error">
            <%=ViewData.ContainsDataItem("Message") ? ViewData["Message"] + 
               "<BR />" : ""%>
        </span>
        <%=Html.SubmitButton("Submit", "Login")%>
    </form>
<%}else {%>
        <span>Not <%=Page.User.Identity.Name %><br />    
        <%=Html.ActionLink<DevExamples.Controllers.HomeController>(c => c.Logout()
            , "Logout", new { id = "LogoutLink" })%></span>

<%} %>

 

And added the user control to the masterpage using

<div id="Login"><%=Html.RenderUserControl("~/Views/Shared/Login.ascx") %><div>

 

I was going to use

using (Html.Form<DevExamples.Controllers.HomeController>(c=>c.Login()
   ,System.Web.Mvc.FormExtensions.FormMethod.post,new {id="LoginForm"}))

 

to create the form (because it is a lot cooler), but couldn’t get the html attributes to work and was more interested in getting the dynamic stuff working then looking at the code for the extension method in the MVCToolKit, in other words being lazy.

 

I thought about putting the authentication checking logic into the controller. But handling it this way made it a bit simpler, and more self contained, so until I find a compelling enough reason I will be leaving it this way.

After I had the user control showing up, I decided to hook up the actual authentication. I decided to go with forms authentication, and set it up using the button in the solution explorer.

Next it was time to create the login and logout controller actions, which I decided would best fit in the HomeController, At first I had thought to create two separate views, one for when logged in and one for logged out, then remembered Phil Haack, at least I think it was him, something about being able to use user controls in the RenderView method of the controller.

I ended up with the following two controller actions:

[ControllerAction]
public void Login()
{
    if (!ControllerContext.HttpContext.User.Identity.IsAuthenticated)
    {
        if (Request.RequestType == "POST")
        {
            string userName = Request.Form["Username"];
            string password = Request.Form["Password"];

            if (Membership.ValidateUser(userName, password))
            {
                FormsAuthentication.SetAuthCookie(userName, true);
                //Set cookie and redirect
                RedirectToAction("Login");
            }
            else
            {
                ViewData.Add("Message", "Invalid Username/Password");
            }
        }
    }
    RenderView("Login");
}
[ControllerAction]
public void Logout()
{
    FormsAuthentication.SignOut();
    RedirectToAction("Login");
}

 

Since it was allowing me to just render out the user control, I decided there was no point to refreshing the whole page, so decided to use a AJAXish way of doing it. So I decided it was time to pick a javascript library. And since Phil had provided a link to  Using script.aculo.us with ASP.NET MVC by Chad Myers,I decided to go with jQuery for this (that and it seemed to fit better).

After a bit of reading through their tutorials I added this to the header section of the master page.

<script src="../../Content/jquery.js" type="text/javascript"></script>
<script src="../../Content/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
    var readyFuncs = function() { 
        $('#LoginForm').ajaxForm(function(result) { 
            $('#Login').html(result); 
            $(document).ready(readyFuncs); 
        }); 
        $('#LogoutLink').click(function(){
            $.get('/Home/Logout',function(result){
                $('#Login').html(result);
                $(document).ready(readyFuncs); 
            });
            return false;
        });
    };
    $(document).ready(readyFuncs);
</script>

The only real snag I had run into with this was that each time the Login div was refreshed I had to reregister the events.