ASP.net MVC, jquery Block UI, Ajax

I m very much new in the asp.net MVC architecture. Well i m trying to load a page with Login link on the top right. On click i want jquery Block UI to display my username and password textbox and button to login and when user sign in , i wan top div to refresh without whole page postback instead of saying "login | Register" it should change to "Welcome | sign out"

Maste Page

    <div id="page">
    <div id="header">
        <% Html.RenderPartial("LogInOutAndRegistrationHeader"); %>
    </div>
    <div id="masterContainer" >
        <div id="masterContainerHeader">

        </div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </div>
    <div id="footer">
        Copy rights
    </div>
    <div id="overlay">
        <!--jquery block overlay loaded here at run time-->
    </div>  
</div>
<div id="contentOverlay">
    <!--jquery block overlay loaded here at run time-->
</div>
<script language="javascript" type="t开发者_开发知识库ext/javascript">

    function displayOverlay(overlayUserControls) {
        $.blockUI({
        draggable: true, // draggable option is only supported when jquery UI script is included
        message: $("#contentOverlay").load(overlayUserControls, null, null)
        });
        return false;
    }

    document.onkeydown = function(e) {
        if (e == null) { // ie 
        keycode = event.keyCode;
        } else { // mozilla 
        keycode = e.which;
        }
        if (keycode == 27) { // escape, close box
        unBlockOverlay();
        }
    };

    function unBlockOverlay() {
        $.unblockUI();
    }
</script>

LogInOutAndRegistrationHeader.ascx

<% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "LogInOutAndRegistration", OnComplete = "LoginComplete" }))
   {%>
    <div id="LogInOutAndRegistration">
    <ul>
        <% 
    if (Session.HasValue(SessionKey.UserId))
    {
        %>
        <il>Welcome,  <strong><%=Session.GetValue<string>(SessionKey.EmailId, string.Empty)%></strong> |  </il>
        <il><%=Ajax.ActionLink("Log out", "Logout", new AjaxOptions { UpdateTargetId = "LogInOutAndRegistration" })%></il>
        <%
    }
    else
    {
        %>
        <il><a id="aLogin" href="#" >Login</a>  | </il>
        <il><a id="aRegister" href="#" >Register</a></il>
        <%} %>
    </ul>
    </div>
<% } %>

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
    $("#aLogin").click(function() {
        displayOverlay("/Profile/LogIn");
    });

    $("#aLogout").click(function() {
        displayOverlay("/Profile/LogOut");
    });

    $("#Register").click(function() {
        displayOverlay("/Profile/Registration");
    });
    });

    function LoginComplete() {
    $.unblockUI();
    }
</script>

Any sort of help is much appreciated .... Thanks

Are you saying that the problem you're facing is failed ajax calls?

You need to define another route for ajax calls in your global.asax.

eg: a simple usage of jquery ajax would be.

URL  = "XYZ/Method/"
 //where XYZController is the controller classname and "Method" is the method that performs/returns whatever you need.


$('#someDiv').load(URL);
.....
//In your global.asax place this after your "Default" route.
routes.MapRoute("jQuery"
             , "XYZ/Method/{Id}"
             , new {   controller = "XYZ"
                     , action = "Method"
                     , id = UrlParameter.Optional 
            });