ASP.net MVC, jquery Block UI, Ajax

Question

Hi, 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="text/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

Answer 1

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 
                });