Implementing jQuery UI in your website

NOTE: At the time of this writing, jquery-ui-1.8.9 was the latest available release.

Overview

jQuery UI contains many well tested scripts for UI elements that developers often need (i.e., Date Picker, Tabs). It also contains the core jQuery script. Installing it correctly will allow you to quickly incorporate other jQuery UI elements as needed without any additional work.

Reusable embedded keep session alive with HtmlHelper for ASP.NET MVC 1.0 C#

Overview

First off let me state that I wouldn't advise using Session variables in an ASP.NET web application for anything business related. Session is helpful for storing a user's breadcrumb trail or other minor settings. As a simple rule, if a user of your web application loses his or her session, it should only be a minor setback, and should not be a devastating problem that causes data loss or other major issues. For example, if a session is lost, the user's breadcrumb trail should just be rebuilt (if possible), or just put back to a state that may not be as helpful as before, but is still somewhat helpful. As another example, the user might simply lose his or her last search settings. At any rate, it should definitely never cause an error or exception to occur.

I spent many hours combing through solutions to this problem on the web. Eventually I put together some code that worked well for ASP.NET web forms. When we moved our projects to ASP.NET MVC 1.0, it was only natural to come up with a way that fit into the MVC framework. This is that solution.

MyLibrary Solution

I've designed this solution so that it could be placed in a separately maintained library and used by any of your projects. That said, I've named my code library "MyLibrary". As a standard way of preventing name clashes, I've also prefixed every class and file in this solution with "MyLibrary". Here is a screenshot of the Solution Explorer (Visual Studio 2008 / C#)...the actual code will follow later in this article:

How to use in your project

Download the MyLibrary solution.

After you create and build "MyLibrary", you just need to add a reference to MyLibrary.Web.dll in your project, and call the HtmlHelper. I typically put it in my master files as follows. The key lines are 3 and 8:

  1. <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
  2.  
  3. <%@ Import Namespace="MyLibrary.Web.Mvc" %>
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <body>
  8. <%= Html.KeepSessionAlive(Context) %>
  9. </body>
  10. </html>

Source Code

MyLibrary\MyLibrary.Web\Mvc\Controllers\MyLibraryMvcKeepSessionAliveController.cs

This will make the view refresh itself 10 seconds before the session times out.

  1. using System;
  2. using System.Web.Mvc;
  3.  
  4. namespace MyLibrary.Web.Mvc.Controllers
  5. {
  6. public class MyLibraryMvcKeepSessionAliveController : Controller
  7. {
  8. public ActionResult Index()
  9. {
  10. Response.AddHeader("Refresh", Convert.ToString(((Session.Timeout * 60) - 10)));
  11. return this.PluginView();
  12. }
  13. }
  14. }

MyLibrary\MyLibrary.Web\Mvc\Views\MyLibraryMvcKeepSessionAlive\Index.aspx

This is the actual view that will refresh to keep the session alive. The user will not see this on their page, because it will be in an iframe with a border, width, and height of zero.

NOTE: This view's "Build Action" property should be set to "Embedded Resource".

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" >
  6. <head id="Head1" runat="server">
  7. <title>Keep Session Alive</title>
  8. <meta http-equiv="expires" content="Sun, Dec 31 1970 12:00:00 GMT" />
  9. <meta http-equiv="cache-control" content="no-cache" />
  10. <meta http-equiv="pragma" content="no-cache" />
  11. </head>
  12. <body>
  13. <form id="form1" runat="server"></form>
  14. </body>
  15. </html>

MyLibrary\MyLibrary.Web\Mvc\MyLibraryMvcExtensions.cs

  1. using System.Web.Mvc;
  2.  
  3. namespace MyLibrary.Web.Mvc
  4. {
  5. public static class MyLibraryMvcExtensions
  6. {
  7. /// <summary>
  8. /// Simplifies the process of returning a view that is marked as an embedded resource.
  9. /// </summary>
  10. public static ViewResult PluginView(this Controller controller)
  11. {
  12. string controllerName = controller.RouteData.GetRequiredString("controller");
  13. string viewName = controller.RouteData.GetRequiredString("action");
  14. string assemblyName = controller.GetType().Assembly.FullName.Split(',')[0];
  15. string pluginPath = string.Format(
  16. @"~/Plugin/{0}.dll/{0}.Web.Mvc.Views.{1}.{2}.aspx",
  17. assemblyName, controllerName, viewName
  18. );
  19.  
  20. return new ViewResult
  21. {
  22. ViewName = pluginPath,
  23. ViewData = controller.ViewData,
  24. TempData = controller.TempData,
  25. };
  26. }
  27. }
  28. }

MyLibrary\MyLibrary.Web\Mvc\MyLibraryMvcHtmlHelpers.cs

This is the HtmlHelper that can be used on any view in your project. I prefer to use it on the Site.master page so I don't have to have it on every page.

  1. using System.Web;
  2. using System.Web.Mvc;
  3.  
  4. namespace MyLibrary.Web.Mvc
  5. {
  6. public static class MyLibraryMvcHtmlHelpers
  7. {
  8. public static string KeepSessionAlive(this HtmlHelper helper, HttpContext context)
  9. {
  10. UrlHelper urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
  11. string url = urlHelper.Action("Index", "MyLibraryMvcKeepSessionAlive");
  12. return "<iframe id=\"KeepSessionAlive\" src=\"" + url + "\" frameborder=\"0\" width=\"0\" height=\"0\" runat=\"server\"></iframe>";
  13. }
  14. }
  15. }

Other settings required for this to work

Make sure your application is running in its own IIS application pool. By default, an IIS application pool will occasionally recycle itself...which kills all active sessions. You will need to disable all recycling. You can change the session timeout to a small number...i.e., 5 minutes. As long as we have the keep session alive code refreshing the session just before it expires, you can use a small session timeout. This will ensure that you do not have a build up of sessions hanging around, and will allow your application pool to shut down more often due to inactivity, thus keeping it healthy.

kick it on DotNetKicks.com

Force Views to Build When Building an ASP.NET MVC 1.0 Solution or Project

Overview

By default, views in an ASP.NET MVC 1.0 project do not automatically build when you build the solution or project. While this may help speed up your builds, it does not help you locate compiler errors that may occur when the page is viewed in the browser, resulting in a runtime error for your user.

Solution

1. Make sure your solution is closed and everything is checked in (if using source control).

2. Locate the project file for the project that contains your .aspx views. If you are using C Sharp, it will be named [ProjectName].csproj. If you are using VB.NET, it will be named [ProjectName].vbproj. If you are using source control, such as Visual Source Safe, you will need to manually check out the file.

3. Open the project file in a plain text editor, such as notepad.exe.

4. Locate the MvcBuildViews element and change its value to "true".

  1. <Project>
  2. <PropertyGroup>
  3. <MvcBuildViews>true</MvcBuildViews>
  4. ...

5. Close the project file and check in your changes.

6. Reopen your solution. The views will now build when you build the solution or project.

kick it on DotNetKicks.com

Two-level JQuery check and uncheck all child checkboxes of a parent checkbox

Overview

I ran into a problem where I needed a reusable script to check and uncheck all checkboxes under a parent checkbox. The checkboxes were built dynamically, and I did not want to hard-code the logic or generate the client side script on the server.

Existing Solutions I Found

I found a couple solutions out there, including the following two:

http://www.dotnetfunda.com/articles/article894-checkuncheck-all-checkboxes-with-jquery-.aspx

http://briancray.com/2009/08/06/check-all-jquery-javascript/

I really liked Brian Cray's solution. However, a downfall was that it did not handle the case where you checked or unchecked all of the child checkboxes and it automatically checked or unchecked the parent checkbox. The first solution did handle that correctly. However, it was using server side script to get the client id of the checkboxes (due to .NET web forms tacking on prefixes to control names).

jQuery Source Code

  1. $(document).ready(
  2. function() {
  3. //clicking the parent checkbox should check or uncheck all child checkboxes
  4. $(".parentCheckBox").click(
  5. function() {
  6. $(this).parents('fieldset:eq(0)').find('.childCheckBox').attr('checked', this.checked);
  7. }
  8. );
  9. //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
  10. $('.childCheckBox').click(
  11. function() {
  12. if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
  13. $(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', false);
  14. if (this.checked == true) {
  15. var flag = true;
  16. $(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
  17. function() {
  18. if (this.checked == false)
  19. flag = false;
  20. }
  21. );
  22. $(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', flag);
  23. }
  24. }
  25. );
  26. }
  27. );

Html Source Code

  1. <input type="checkbox" class="parentCheckBox" /> Parent 1<br />
  2. <input type="checkbox" class="childCheckBox" /> Child 1-1<br />
  3. <input type="checkbox" class="childCheckBox" /> Child 1-2<br />
  4. <input type="checkbox" class="childCheckBox" /> Child 1-3<br />
  5. <input type="checkbox" class="childCheckBox" /> Child 1-4<br />
  6. <input type="checkbox" class="childCheckBox" /> Child 1-5<br />
  7. <input type="checkbox" class="parentCheckBox" /> Parent 2<br />
  8. <input type="checkbox" class="childCheckBox" /> Child 2-1<br />
  9. <input type="checkbox" class="childCheckBox" /> Child 2-2<br />
  10. <input type="checkbox" class="childCheckBox" /> Child 2-3<br />
  11. <input type="checkbox" class="childCheckBox" /> Child 2-4<br />
  12. <input type="checkbox" class="childCheckBox" /> Child 2-5<br />
  13. <input type="checkbox" class="parentCheckBox" /> Parent 3<br />
  14. <input type="checkbox" class="childCheckBox" /> Child 3-1<br />
  15. <input type="checkbox" class="childCheckBox" /> Child 3-2<br />
  16. <input type="checkbox" class="childCheckBox" /> Child 3-3<br />
  17. <input type="checkbox" class="childCheckBox" /> Child 3-4<br />
  18. <input type="checkbox" class="childCheckBox" /> Child 3-5<br />

Live Example of My Solution

Parent 1
     Child 1-1
     Child 1-2
     Child 1-3
     Child 1-4
     Child 1-5
Parent 2
     Child 2-1
     Child 2-2
     Child 2-3
     Child 2-4
     Child 2-5
Parent 3
     Child 3-1
     Child 3-2
     Child 3-3
     Child 3-4
     Child 3-5

How To Use My Modified Solution

1. Add a reference to jQuery. I used 1.4.2.

2. Download the script and add a reference to it.

3. Each group of checkboxes must be in their own <fieldset>.

4. Parent checkboxes must have the "parentCheckBox" class.

5. Child checkboxes must have the "childCheckBox" class.

Syndicate content