Capturing ‘Lost focus’ or ‘blur’ event for div, li or other non-input elements in Jquery

I was working on ‘ul-li’ structure in which I wanted to 
  1. show 2nd li when 1st li is focused and 
  2. hide it when 1st lose focus. 
I tried with ‘focus’ and ‘blur’ events, but ‘blur’ event was not being called for li element. Searching for answer on internet, I came to know that blur or lost focus event is fired when it’s an input element!

So I went for a work around that uses ‘mouseenter’ and ‘mouseleave’ events for ‘focus’ and ‘blur’ events respectively. This events can be used for ‘li’, ‘a’ as well as ‘div’ elements. IE7, 8, 9, Chrome and Firefox support these events. Below is the code that I have used.

$("#myFirstLiElement").mouseenter(function () {
              $("#mySecondLiElement").show();
       }).mouseleave(function () {      
              $("#mySecondLiElement").hide();
 });


Solution for JQuery dialogs being cached when loading partial views


Yesterday, I was working on Jquery dialog that provides an application form to edit user details.
The issue I was facing was, when I posted updated form and reopened it, it was still showing the previous details. When I checked database, the updated details were present!
This was happening with IE versions. Chrome and Firefox were able to show me updated data on form.

Below is the Jquery code that I was using to render a partial view in a dialog box.
var requestUrl = "/MyAction/PartialViewResult/";

$.get(requestUrl, function(){
$("#dialog-edit-profile").dialog({
        title: "Edit Profile",
        autoOpen: false,
        height: 300,
        width: 500,
        modal: true
    });
        $('# dialog-edit-profile).dialog("open");
});

I looked at the code and was confused why IE is behaving strange when code is syntactically correct. 
I went for solution search on internet and found a fact that default behavior of IE is to cache the Jquery dialog content!
Considering this fact, I rewrite my code so that each request for dialog will be a new request. The solution was pretty simple, i.e. to make an ajax call with “cache: false” property.

var requestUrl = "/MyAction/PartialViewResult/";

$.ajax({
              url: requestUrl,
              cache: false,   
              success: function(result) {
                   $("#dialog-edit-profile").dialog({
                      title: "Edit Profile",
                      autoOpen: false,
                      height: 300,
                      width: 500,
                      modal: true
                  });

                  $('# dialog-edit-profile).dialog("open");
              }
});
Post this fix, I tested it on IE  7,8,9 as well as Chrome and Firefox and all were rendering dialog correctly!


Tutorial for Donut Hole Caching - Partial View Caching in MVC

  

MVC3 has come up with a great concept of Partial page caching, also known as ‘Donut Hole Caching’ where entire donut represents your Main View and the donut hole represents partial view that you would like to cache.
Most of you might have faced the scenario of rendering HTML as a partial view. The HTML may be static or dynamic and say you are pulling it from third party or database. Now, each time going to database or third party is not feasible considering performance. So the option of caching comes into picture.
But, you may have some content on Main View you do not want to cache. So here is the approach to cache partial content of your main view.

Let me illustrate this with a simple example:



See above screenshot showing my MVC view. On high level, I have created one view i.e. ‘Index’ and a partial view i.e. ‘ChildView‘. ChildView has a content that need to be cached and it is rendered within Index view.

Basic steps of partial caching:
  1.   move content that need to be cached in a partial view
  2.  Create a child action in controller that will return partial view and attach OutputCache attribute to it.
  3. Write Content (that is going to be cached)  logic in child action
  4. Call this child action from Main View using Html.Action

In my sample example, I created a Main View a Label with current date time. Refer below image


ViewBag.Message in this view will contain Current Date time.Also note that I have added a call to my child action using  @Html.Action("ChildView").


Then I created a Child View also having a current date time as shown in below image.

ViewBag.Message in this view will contain Current Date time.
Note that you can use Html.Raw if you are returning Html content inside ViewBag.Message


Then I created two actions Index and ChildView for retuning Index View and Child View respectively.




 


 I have attached ChildActionOnly attribute so that action will be available only for internal calls. Also to cache Child View content, I have attached OutputCache attribute with 10 seconds duration.

Now when I will hit the Index view from browser, for the first time it will internally call ChildView Action and will display Current Date Time. But within 10 seconds, if I try to re-hit the Index view, then the Current Date Time in Index view will be updated for each hit (as I have not attached OutputCache attribute to Index action) and Current Date Time on Child View will be constant for 10 seconds.


First hit screenshot(Note:Parent and Child Date times are same)




 Second hit screenshot(Note:Parent and Child Date times are different and Child Date time is same as that of First hit Child Date time)

 








How to Regenerate Designer file in Visual Studio? Here is the solution-


Missing or corrupted designer file causes Visual studio (VS) to fail the build. This is because without designer file VS is unable to find the declarations of controls. Also most of the time 
controls are not added to designer.cs giving build errors.

To fix this issue, Below is the simplest solution I know:
  1. Delete your designer file if it is corrupted else start from step2.
  2. Go to your aspx markup (source) page and find below line of code.                                           <%@ Page Language="C#" AutoEventWireup="false" CodeFile="SamplePage.aspx.cs" Inherits=" SamplePageClass" %>
  3. Now change CodeFile tag to CodeBehind.
  4. Save the file.
  5. Rebuild your project (This will create designer file for your page)
  6. Revert your change (Step3).