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 ListBox or the ListBoxReq control created in one of the previous posts.
public class ListBoxJQ : ListBoxReq
{
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(); });";
script = "<script type=\"text/javascript\">" + script + "</script>";
this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), String.Format("jQuery_{0}", this.ClientID), script, false);
}
}
#endregion
Step 5: AddAttributesToRender
Now we will need to enable the multi-select functionality.#region Multi Select Setup
/// <summary>
/// We need to enable the multi select behavior of the control.
/// </summary>
/// <param name="writer"></param>
protected override void AddAttributesToRender(System.Web.UI.HtmlTextWriter writer)
{
// Show the ListItem text as Bold
writer.AddAttribute("multiple", "");
// Call the Base's AddAttributesToRender method.
base.AddAttributesToRender(writer);
}
#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:ListBoxJQ ID="ListBoxJQ" runat="server" Width="350px" Required="true">
<asp:ListItem Text="Option 1" Value="1"></asp:ListItem>
<asp:ListItem Text="Option 2" Value="2"></asp:ListItem>
<asp:ListItem Text="Option 3" Value="3"></asp:ListItem>
<asp:ListItem Text="Option 4" Value="4"></asp:ListItem>
</cc1:ListBoxJQ>
<br />
<asp:CheckBox ID="ListBoxJQCheckBox" runat="server" Checked="true" Text="Required"
AutoPostBack="true" OnCheckedChanged="ListBoxJQReqCheckBox_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 ListBoxJQReqCheckBox_CheckedChanged(object sender, EventArgs e)
{
ListBoxJQ.Required = ListBoxJQCheckBox.Checked;
}
}
}
No comments:
Post a Comment