One More IT Blog: 2015

In my last post I created a jQuery enhanced date picker control. In this post I will use jQuery to enhance a drop down control. If you saw the previous post just look at steps 3 and 4.

Step 1: Add jQuery and jQuery UI Javascript and CSS files to your project.

The jQuery files can be found here and the jQuery UI files can be found here, and Chosen plugin file can be found here. Or you can just download the sample project using the link at the end of this post.

Step 2: Adding References to the .js and .css files.

You can add the references to each page you plan to use your controls on, or if you are using mater pages you can add the references there.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>One More IT Blog</title>
    <link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.1.custom.css" /> 
    <link rel="stylesheet" href="Scripts/chosen/chosen.css" />  
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/jquery-ui-1.10.1.custom.js"></script>
    <script src="Scripts/chosen/chosen.jquery.js"></script>

Step 3: Create a class extending the DropDown or the DropDownReqValidator control created in one of the previous posts.

public class DropDownJQ : DropDownReqValidator
{

Step 4: OnPreRender

We will register our script in the OnPreRender method.

#region Pre Render
/// <summary>
/// PreRender
/// </summary>
/// <param name="e"></param>
protected override void OnPreRender(EventArgs e)
{
     base.OnPreRender(e);
     // Check to see if the client script is already registered.
     if (!this.Page.ClientScript.IsStartupScriptRegistered(String.Format("jQuery_{0}", this.ClientID)))
     {
         String script = "$(document).ready(function(){$('#" +
            this.ClientID + "').chosen({allow_single_deselect: true}); });";
         script = "<script type=\"text/javascript\">" + script + "</script>";
           this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), String.Format("jQuery_{0}", this.ClientID), script, false);
     }
}
#endregion

Usage Example:

In the example below notice the FromControl and ThruControl properties.
Markup

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="JQueryEnhancedControlsDemo.aspx.cs" Inherits="CustomControls.JQueryEnhancedControlsDemo" %>
<%@ Register assembly="CustomControls" namespace="CustomControls.Controls" tagprefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <cc1:DropDownJQ ID="DropdownJq" runat="server" Required="true" Width="350px">
        <asp:ListItem Text="" Value=""></asp:ListItem>
        <asp:ListItem Text="Option 1" Value="1"></asp:ListItem>
        <asp:ListItem Text="Option 2" Value="2"></asp:ListItem>
    </cc1:DropDownJQ>
    <br />
    <asp:CheckBox ID="DropDownJQCheckBox" runat="server" Checked="true" Text="Required"
        AutoPostBack="true" OnCheckedChanged="DropDownJQCheckBox_CheckedChanged" />
    <br />
    <asp:Button ID="Submit" runat="server" CausesValidation="true" Text="Submit" />
</asp:Content>

Code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CustomControls
{
    public partial class JQueryEnhancedControlsDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void DropDownJQCheckBox_CheckedChanged(object sender, EventArgs e)
        {
            DropdownJq.Required = DropDownJQCheckBox.Checked;
        }
    }
}