title: ASP.net MVC, jquery Block UI, Ajax
body: <p>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 "<strong>login | Register</strong>" it should change to "<strong>Welcome  | sign out</strong>" </p>
  
  <p><strong>Maste Page</strong></p>
  
  <pre><code>    &lt;div id="page"&gt;
      &lt;div id="header"&gt;
          &lt;% Html.RenderPartial("LogInOutAndRegistrationHeader"); %&gt;
      &lt;/div&gt;
      &lt;div id="masterContainer" &gt;
          &lt;div id="masterContainerHeader"&gt;
  
          &lt;/div&gt;
          &lt;asp:ContentPlaceHolder ID="MainContent" runat="server" /&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          Copy rights
      &lt;/div&gt;
      &lt;div id="overlay"&gt;
          &lt;!--jquery block overlay loaded here at run time--&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  &lt;div id="contentOverlay"&gt;
      &lt;!--jquery block overlay loaded here at run time--&gt;
  &lt;/div&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
  
      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();
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>LogInOutAndRegistrationHeader.ascx</strong></p>
  
  <pre><code>&lt;% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "LogInOutAndRegistration", OnComplete = "LoginComplete" }))
     {%&gt;
      &lt;div id="LogInOutAndRegistration"&gt;
      &lt;ul&gt;
          &lt;% 
      if (Session.HasValue(SessionKey.UserId))
      {
          %&gt;
          &lt;il&gt;Welcome,  &lt;strong&gt;&lt;%=Session.GetValue&lt;string&gt;(SessionKey.EmailId, string.Empty)%&gt;&lt;/strong&gt; |  &lt;/il&gt;
          &lt;il&gt;&lt;%=Ajax.ActionLink("Log out", "Logout", new AjaxOptions { UpdateTargetId = "LogInOutAndRegistration" })%&gt;&lt;/il&gt;
          &lt;%
      }
      else
      {
          %&gt;
          &lt;il&gt;&lt;a id="aLogin" href="#" &gt;Login&lt;/a&gt;  | &lt;/il&gt;
          &lt;il&gt;&lt;a id="aRegister" href="#" &gt;Register&lt;/a&gt;&lt;/il&gt;
          &lt;%} %&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  &lt;% } %&gt;
  
  &lt;script language="javascript" type="text/javascript"&gt;
      $(document).ready(function() {
      $("#aLogin").click(function() {
          displayOverlay("/Profile/LogIn");
      });
  
      $("#aLogout").click(function() {
          displayOverlay("/Profile/LogOut");
      });
  
      $("#Register").click(function() {
          displayOverlay("/Profile/Registration");
      });
      });
  
      function LoginComplete() {
      $.unblockUI();
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Any sort of help is much appreciated .... Thanks</p>