Monday, April 13, 2009

Calendar Extender and TextBox set to ReadOnly in C#

If you are using calendar extendar along with a textbox to get the calendar's date then one of the things that you may want to try is to restrict the user from entering into the text box directly. One simple way to do that is to set readonly property to true. However, when you do that, the value does not become available in the code-behind of the page. One of the solutions is given below,

Put onKeyPress = "javascript: return false;" onPaste = "javascript: return false;" in your textbox. That way, even the textbox is enabled, the user will not be able to modify the data.

To find more about other solutions and issues faced by other users, you can read the thread below:

Comparison of Political Debate in America and India

In a few days from now, one of the largest democracies in the world is going to elect its leaders. Sad to say, that despite many political parties in India trying to ape the west by using electronic media, the content of debate and commitment remain far from satisfactory.

While CNN and YouTube came together to provide a great platform to start a question / answer round as well as organize meaningful debates on which party / candidate would do what for the country if elected; our own media continues in sensationalizing trivial matters and is unable to create the right focus despite having such tremendous capability.

Our politicians are no better. They are relying on spreading hatred among the people of India and instead of discussing how they will take India to the next step their focus remains on settling personal scores.

I am afraid, at this rate the verdict will remain as fractured as it was in the last two General Elections. 

Thursday, April 2, 2009

How to implement Cascading dropdowns using JQuery, AJAX and ASP.NET

The primary purpose of this article is to showcase how to load dropdowns dynamically from the client side, bring the data from the server using ASP.NET and AJAX. The script will be written using JQUERY.
For those who want a smaller sample application to go through to get a start on JQUERY / AJAX / ASP.NET combination can read it from (http://sites.google.com/site/spyderhoodcommunity/tech-stuff/howtosubmitaformusingjqueryviaajaxtoanaspnetandreceivetheresponse) and if there is a need to post comments or questions you can read it from (http://kartiksehgal.blogspot.com/2009/04/how-to-submit-form-using-jquery-via.html). Sites.google.com does not facilitate commenting by viewers as yet. As with the previous article, this article too does not require the user to set up any database by creating all the sample data within the code itself.
Comments or Questions, both are appreciated.
If there is a need to get into JQuery reference, a good start point will be the site http://jquery.com/.
Source code can be downloaded from contactmanagement_20090402.zip. This source code contains the above mentioned article’s source code also but is no where interconnected.
Solution
Steps
  1. Download the zip and set up the application under IIS as an ASP.NET 2.0 virtual directory under the default website
  2. Open the site in visual studio 2005 and check if you can see all the files as depicted in the solution above
  3. Open the SendEmailToContact.htm in your browser to run and see the form working
Cascading Dropdowns
The two dropdowns are highlighted below. Notice that a default option "Loading contacts..." is added to the contact dropdown.

<tr>

<td><select id="DdlContact" name="DdlContact"><option value="loading">Loading contacts...option>select>td>

<td><select id="DdlEmail" name="DdlEmail"><option value="loading">Loading contact emails...option>select>td>

tr>


Observe the following lines in JQUERY,

$.post("SendEmailToContact.aspx?StrMethodName=GETCONTACTS", {},
           function (response)
           {
                 $("#DdlContact").html(response);
                 $.post("SendEmailToContact.aspx?StrMethodName=GETCONTACTEMAILS", { DdlContact: $("#DdlContact").val()},
                 function (response) { $("#DdlEmail").html(response);});
           }
         );

$.post expects 3 arguments
a.       The name of the page to which the form will be posted
b.      The arguments which need to be posted
c.       The function to be called on receiving the response

Here, we have appended a Query String to the SendEmailToContact.aspx which will receive the data requests. StrMethodName is checked at the code behind level and if blank, error code -2 is returned. However, in this sample we are not doing any error handling or validation. That will be handled in a subsequent article. 

"GETCONTACTS" is a specific text that is matched in the code behind and if found, then the relevant method is called to get the data.

if (!String.IsNullOrEmpty(Request.QueryString["StrMethodName"]))

{
    strMethodName = Convert.ToString(Request.QueryString["StrMethodName"]);
}

if (strMethodName.Length > 0 && strMethodName.ToUpper().Equals("GETCONTACTS"))
{
    Response.Write(CreateContactDropDownOptions(GetContacts()));
}
elseif (strMethodName.Length > 0 && strMethodName.ToUpper().Equals("GETCONTACTEMAILS"))
{
    if (i32Contact > Int32.MinValue)
    {
        Response.Write(CreateEmailDropDownOptions(GetEmailsOfContact(i32Contact)));
    }
    else
    {
        Response.Write("-1");
    }
}
elseif (strMethodName.Length > 0 && strMethodName.ToUpper().Equals("SENDEMAIL"))
{
    Response.Write("

To: " + strEmail + "

Subject: " +

    strEmailSubject + "

" + strEmailMessage + "

");
}
else
{
    Response.Write("-2");
}

Once the data is received from the call, $("#DdlContact").html(response); ensures that the response sent from the server is set into the HTML of the select option (replacing any existing HTML. 

html() is a JQUERY function to get and set the innerHTML of an element. To keep the scripting simple, we just created option tags in the server itself and sent it to the calling function.

private String CreateEmailDropDownOptions(List<ContactEmail> PrmContactEmails)
{
    System.Text.StringBuilder strBldOptions = new System.Text.StringBuilder();
    foreach (ContactEmail contactEmail in PrmContactEmails)
    {
        strBldOptions.Append(" + contactEmail.StrEmail + "\">" + contactEmail.StrEmail + "");
    }
    return strBldOptions.ToString();
}

The next step is to take the selected value of the contacts dropdown, which is the first one by default, and make a similar call for the Emails of the selected contact

$.post("SendEmailToContact.aspx?StrMethodName=GETCONTACTEMAILS", { DdlContact: $("#DdlContact").val()},
                 function (response) { $("#DdlEmail").html(response);});

Here we had to pass the selected value of DdlContact. The JQUERY function, val() gets the value of selected option. 

Note: No matter what way we load the dropdowns, up to about 2000 options it works fine. The moment we start going higher, even though the html is sent within seconds to the client side, the browser becomes sluggish in rendering the drop down. When the options were increased beyond 4000, the browser stopped responding even though response had come back in a few seconds.

Please feel free to post questions / comments for this article at the following link.

Screen shots of the application in action

 Initial screen with contact and their emails waiting to be loaded


 On the select of a contact, an AJAX call is made to load the corresponding emails


 Emails are loaded almost instantaneously


 Creating a sample content


 Sample content is received from server in formatted manner


Wednesday, April 1, 2009

How to submit a form using JQuery via AJAX to an ASP.NET and receive the response

The purpose of this article is to showcase how to submit a form to an ASP.NET Page via AJAX using JQuery. Why would we use AJAX to submit a form when developing an ASP.NET application? That is an application design question. However, if it has been decided that AJAX will be used, then JQuery can help you make your codebase smaller and also make the code cross-browser compliant. JQuery does a lot more and for that please feel free to refer to the JQuery site (http://jquery.com/). 

The sample application revolves around accepting some contact details, posting them to an ASP.NET form and then displaying the data received by the server. The sample code can be downloaded from the following zip. 

Source:  contactmanagement.zip 

Solution Screenshot 

Steps
1.  The first step will be to get the uncompressed version of JQuery script file. The file can be downloaded from http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js&downloadBtn=
2.  Next, create a default asp.net website and rename default.aspx to “SaveContact.aspx”
3.  You may also have to add a web.config file from add new items as in VS 2005, it may not add by default for a website
4.  Open “SaveContact.aspx” in the designer and remove all the HTML tags (see screenshot

5.  Add default.htm and include the jquery script file and create the form shown in the code snippet (see screenshot

6.  Now add the jquery function to submit the form and receive the results as shown in the code snippet (see screenshot
7.  $() represents the JQuery object
8.  The $(document).ready() ensures that no javascript is executed till the page is ready with all the dom elements loaded
9.  $("#submit_btn").click() searches for an element with ID as submit_btn and adds a function to the click event
10. $.post expects 3 arguments
a.       The name of the page to which the form will be posted
b.      The arguments which need to be posted
c.       The function to be called on receiving the response
11.   The return false ensure that the there is no page refresh after the call is completed
12.   Response contains the entire HTML output of SaveContact.aspx
13.   Here we have taken the response set it to the inner HTML of a DIV using $("#DivResult").html(response).show()
14.   # is the keyword used to refer to a the ID of an element.
15.   .html() is a function in JQuery to update the inner HTML. You can also use the same function to get the inner HTML.
16.   Show() causes the div to be displayed immediately, even if it is hidden. This is particularly useful if you keep your div hidden by default.
17.   On the code behind of SaveContact.aspx, add the code in the screenshot 
18.   While it is quite possible to save the received result into a database writing simple ADO.NET code, the purpose of this article was to keep focus on the core aspect, i.e., showcase how we can bring the data and submit a response
19.   Given below is the screen shot of a sample input and output generated from the code. Please feel free to try any other data too. 
The application has been tried on IE7, Firefox 2+ and Chrome 1+. Barring a few discrepancies in the UI, the functionality is the same in all 3 browsers.