Click here to Skip to main content
11,412,578 members (73,267 online)
Click here to Skip to main content

ASP.NET Control from jQuery DatePicker in 3 Minutes

, 14 Dec 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
A technique for creating ASP.NET controls from existing JavaScript components is presented.

Introduction

Whatever software we create, a good practice is to make it out of loosely coupled reusable components. In ASP.NET, this means, creating reusable controls instead of implementing all the functionality in .aspx pages. In this article, we’ll create DatePicker control based on the jQuery plug-in, using the LiveUI framework our team has been developing. Principally, there are just two problems: first one is to synchronize the plug-in’s state with the server side control’s properties, and the second is to notify the control about client-side events. As we’ll see, both problems can be solved using LiveUI.

Background

LiveUI

As most readers of this article are unfamiliar with LiveUI, it is appropriate to explain shortly what it is. LiveUI is a web framework targeted at rich Internet applications. It provides tools for JavaScript rendering, state management, and client server interaction. The most important LiveUI type we will use is Js. Shortly, Js builds an object model of JavaScript code to be performed by the client’s browser. For example, we write this in C#: Js.Call(“alert”, Js.Const(“Hello world”)), and the browser will perform alert(“Hello world”).

DatePicker

DatePicker is part of jQuery.UI. It looks nice and provides a very simple API. To create a new DatePicker, we should call $(#inputFieldId).datepicker(), $(#inputFieldId).datepicker(‘getdate’) to get the selected date, and $(#inputFieldId).datepicker(‘setdate’) to set the selected date. I’ve chosen this plug-in because it illustrates the state synchronization problem perfectly. The DatePicker control will have the SelectedDate property which should be synchronized with the client side plug-in’s value. The control will also have the ValueChamged event which should be fired when the user selects a date.

Control Code

public class Datepicker : ControlBase
{
  public event EventHandler ValueSelected;

  public DateTime? Value {
    get { return ClientState.GetValue("value"); }
    set { ClientState.SetValue("value", value); }
  }

  public override void OnRender(JsCreationSection section)
  {
    if (!IsRendering)
      return;

    var textInput = Js.Call("$", Js.Const("#" + ClientID));
    textInput.Call("datepicker", Js.Json(
      Js.JsonItem("onSelect", Js.Function(delegate {
         var request = CreateMethodInvocationRequest("OnValueSelected");
         request.Send();
      })
    )));

    ClientState.Synchronize("value", 
      () => textInput.Call("datepicker", Js.Const("getDate")),
      value => textInput.Call("datepicker", 
      Js.Const("setDate"), value));
  }

  public void OnValueSelected()
  {
    if (ValueSelected != null)
      ValueSelected(this, EventArgs.Empty);
  }

  protected override void Render(HtmlTextWriter writer)
  {
    writer.Write("<input type='text' id='{0}'/>", ClientID);
  }
}

Points of Interest

public override void OnRender(JsCreationSection section)
{

LiveUI provides JavaScript "Sections" to make sure all JavaScript objects are created when used. The principle is simple: we create JavaScript methods like OnRender(JsCreationSection section) and we can use them safely in OnRender(JsInitSection section). If truth be told, the word "Section" should be replaced with "Phase" or "Stage" and it will be done unless you suggest an even better name Smile | :)

if (!IsRendering)
  return;

If the page receives an asynchronous AJAX request, then our control should not produce any JavaScript unless it is placed in an UpdatePanel. The IsRendering property encapsulates all the required checks.

var textInput = Js.Call("$", Js.Const("#" + ClientID));
textInput.Call("datepicker", Js.Json(
   Js.JsonItem("onSelect", Js.Function(delegate {...

This code dynamically renders JavaScript like:

var texbox = $("#myTextbox");
texbox.datepicker({onSelect : function() {....
var request = CreateMethodInvocationRequest("OnValueSelected");
reque request.Send();

LiveUI provides a request management infrastructure allowing client-side objects to call server-side methods. I.e., dynamically generated JavaScript code instantiates a new request and is sent to the server (using an asynchronous postback which is the default option). By the way, the control's methods should be JSON-serializable or be of the JsObject type.

ClientState.Synchronize("value", 
  () => textInput.Call("datepicker", Js.Const("getDate")),
  value => textInput.Call("datepicker", Js.Const("setDate"), value));

ClientState is an important element in the LiveUI infrastructure. We can consider it as a dictionary keeping the values in client-side objects. So, the two delegates passed to the Synchronize method just tells ClientState how to keep 'value'.

Conclusion

Though the code I provided can be implemented in three minutes, it takes much longer to understand what is going on. Our team realizes it, and we are trying to make the API clearer and to provide more samples, but our efforts are doomed without feedback. So, whether you like the solution presented or not, please let us know.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Alexandr Sergeevich Ilyin
Software Developer Xtensive
Russian Federation Russian Federation
I've been working at Xtensive company for 3 years.
My current project is LiveUI web framework which should make everybody happy. If I can be of any help to you feel free to contact me alexandr.ilyin at gmail.com.

By the way, I have a blog.


Comments and Discussions

 
QuestionCan we use this datepicker with ajax updatepanel? Pin
nilesh c at 17-Nov-13 4:31
membernilesh c17-Nov-13 4:31 
GeneralMy vote of 1 Pin
Jignesh Khant at 12-Nov-13 2:54
memberJignesh Khant12-Nov-13 2:54 
GeneralMy vote of 3 Pin
Inba karthik at 31-Jan-13 3:19
memberInba karthik31-Jan-13 3:19 
QuestionWhat I have to add if I want to add datapicker to new project Pin
azoozey at 22-Jul-12 3:02
memberazoozey22-Jul-12 3:02 
QuestionNice control Pin
bazshah at 8-May-12 2:37
memberbazshah8-May-12 2:37 
GeneralPutting this datepicker inside UpdatePanel Pin
orchik at 11-Jul-10 22:49
memberorchik11-Jul-10 22:49 
GeneralGood i would like more Pin
Yves at 4-May-10 16:44
memberYves4-May-10 16:44 
QuestionHow can I add DatePicker attribute values ? [modified] Pin
Bamford at 7-Apr-10 2:05
memberBamford7-Apr-10 2:05 
AnswerRe: How can I add DatePicker attribute values ? Pin
Alexandr Sergeevich Ilyin at 7-Apr-10 8:02
memberAlexandr Sergeevich Ilyin7-Apr-10 8:02 
GeneralRe: How can I add DatePicker attribute values ? [modified] Pin
Bamford at 7-Apr-10 8:46
memberBamford7-Apr-10 8:46 
GeneralRe: How can I add DatePicker attribute values ? Pin
Alexandr Sergeevich Ilyin at 7-Apr-10 23:45
memberAlexandr Sergeevich Ilyin7-Apr-10 23:45 
GeneralRe: How can I add DatePicker attribute values ? Pin
Bamford at 8-Apr-10 2:41
memberBamford8-Apr-10 2:41 
GeneralNice share! Pin
Sandeep Mewara at 28-Mar-10 3:06
memberSandeep Mewara28-Mar-10 3:06 
GeneralMy vote of 1 Pin
bezveza at 21-Dec-09 21:50
memberbezveza21-Dec-09 21:50 
GeneralRe: My vote of 1 Pin
Alexandr Sergeevich Ilyin at 21-Dec-09 22:03
memberAlexandr Sergeevich Ilyin21-Dec-09 22:03 
GeneralRe: My vote of 1 Pin
Mihai Maerean at 21-Dec-09 23:05
memberMihai Maerean21-Dec-09 23:05 
GeneralRe: My vote of 1 Pin
cwp42 at 23-Dec-09 1:00
membercwp4223-Dec-09 1:00 
GeneralMy vote of 1 Pin
babakzawari at 21-Dec-09 9:57
memberbabakzawari21-Dec-09 9:57 
GeneralRe: My vote of 1 Pin
Alexandr Sergeevich Ilyin at 21-Dec-09 22:05
memberAlexandr Sergeevich Ilyin21-Dec-09 22:05 
GeneralRe: My vote of 1 Pin
Muammar© at 25-Dec-09 6:47
member Muammar©25-Dec-09 6:47 
GeneralVery sofisticated. Pin
gstolarov at 16-Dec-09 18:42
membergstolarov16-Dec-09 18:42 
GeneralRe: Very sofisticated. Pin
sangam uprety at 16-Dec-09 19:36
membersangam uprety16-Dec-09 19:36 
GeneralRe: Very sofisticated. Pin
gstolarov at 16-Dec-09 19:46
membergstolarov16-Dec-09 19:46 
GeneralRe: Very sofisticated. [modified] Pin
Alexandr Sergeevich Ilyin at 16-Dec-09 21:07
memberAlexandr Sergeevich Ilyin16-Dec-09 21:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150427.1 | Last Updated 14 Dec 2009
Article Copyright 2009 by Alexandr Sergeevich Ilyin
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid