JavaScript, the language for them all!! (Jquery with gridview in asp.net 2.0)

Posted by Ali AL Lawati on Sep 4, 2008 in Development, English | 2 comments

Once a long time ago (in 80s) I think Assembly was considered the savior for when ever some one need to do some dirty work with their C or whatever language code and its not clear for him how to do it there or few things are not supported assembly comes to give you control on the tiniest transistor on the PC so you can do what ever in your mind (this is not just 80s it is applicable for all times  )

In 90s the days of C++, Visual Basic 6.0, JAVA, PHP,… etc I think the savior was the C language, really when ever there was something you cannot do in any of these languages that you are working on, you would just connect it to a c DLL or any c library file!!, using JNI for Java or active or DLL library for visual basic and similarly for others.

These days (WEB 2.0 days) all of the applications are moving to web using PHP J2EE, .NET 2005/2008, R on R and others. The common factor between them is they all need JavaScript to do the dirty work for them (working on client machines) so as in old days when all programmers needed to know assembly or as in 90s when all programmers needed to know C to do wonders with their softwares, these days developers must know JavaScript; cause it is the language for them all (applicable to any JavaScript framework (jquery, mootool, prototype))!!!

Ok that’s enough chit chat, now why I am talking all about this?? Because jquery enabled me to do something fun with asp.net 2.0’s gridview

I will show you

I have added a jscript folder to my project and in it I have added the jquery and one of its plug-in: datepicker which will show a date picker calendar

Added jquery to my master page code so it will be available to all of my pages in the application that uses this master page

<script type=”text/javascript” src=”Jscript/jquery-1.2.1.min.js”></script>

Now I have a gridview (well for my application need I have a very complex 3 level nested gridview)

Now close date is a template column where I have a textbox I made the cssclass of the text box equals to “datepickerz” <asp:TextBox ID=”TextBox1″ runat=”server” Text=’<%# Bind(“close_date”) %>‘ CssClass=”datepickerz” Width=”89px”></asp:TextBox>

Now I need for each row in this complex gridview the textbox to be a datepicker so simply I wrote the following jquery script

<script type=”text/javascript” src=”Jscript/ui.datepicker.js”></script>

<script type=”text/javascript” >

$(document).ready(function() {

$(‘.datepickerz’).each( function () {

$(this).attachDatepicker();

});

});

</script>

Which is one of the beautiful magic of jquery it allows to pick all controls that have been assigned the class datepickerz and then for each control I just attach it with the datepicker.

The result whenever I click on the textbox in any editable row in the complex gridview I will get a floating calendar to select a date that will be stored in the textbox.

I know I have not discovered the atoms by doing this simple activity, but I wanted to mention it because as I see around me (in Oman) most of .NET developers are not aware of Jquery and other JavaScript frameworks and their features.

Calling ASP Functions from java script

Posted by Ali AL Lawati on Aug 7, 2008 in Development, English | 2 comments

Umm i think some may get confused that isn’t it that Ajax can call server side functions from JavaScript ?? ! well thats write but i want to talk about those people who are still using Microsoft .NET 2005 and not lucky enough to get gaya or other ajax plug-in from Microsoft, or those who are still not ready to deal with Ajax and other Ajax/JavaScript plug ins such as jquery .

Most of the old .NET developer are used to have their web applications deal with post-backs but very few of them really knows how these post-backs do work. well most of the things in .NET application are done depending on client side script (JavaScript).

For that when you have a good amount of JavaScript controlling your application you need to know how to make that JavaScript call an asp function.

Before explaining how to do this first lets see why do we need it ? Well may be you will need to do something with JavaScript before calling server side codes, like validating entered data ( well i know that is a very bad example since in .NET there is a ready validating controles) a better example lets say you have created a web page that allow users to draw for example mind maps, or charts, or mouse gestures so that when user drag his mouse in a specific way there will be a specific response from your web application.

well in all of these examples JavaScript or JavaScript frameworks like jquery will be doing most of the things in the application here the decision to make a server side function call should be given to java script code.

Calling asp.NET function by JavaScript you need to do a simple trick,

Well as i found from some of my tries to get there, that you can not do it having normal form buttons you will need at least one “link button” (sure you can hide it, but NEVER make visible = false because it will be removed from the HTML code; instead apply CSS style on it that make it hidden)

visibility:hidden;

then you need to call the post back function that usually is called if you really do click that link_button and in the asp.NET code do call your asp function in the link_button event handler function.

well thats a lot of blah blah, theoretical talks, well then lets get into action then.

here i will show a very simple example (sorry i am out of creativity by now so the example will be very simple) i created a very simple page with a text box an a link button

<br /> <form id="form1" runat="server">> <div> <asp:textbox id="TextBox1" runat="server"></asp:textbox> </div> <p> <asp:linkbutton style="font-weight: bold;">CssClass=”hdn” ID=”LinkButton1″ runat=”server” onclick=”LinkButton1_Click”>LinkButton</asp:linkbutton> </p> </p></form> <p>

i added a very simple response code to the link button click event in C#
protected void LinkButton1_Click(object sender, EventArgs e) { Response.Write(“yooohooo”); }
well yeah this is our server side function (i told you this week i am out of creativity).

and then i added they style to hide the link button
<br /> <style> .hdn{ visibility:hidden; } </style> <p>
now even in the IDE you just cannot see the link button

now the real thing is in the java script i have done a very simple and a very boring thing witch is on each button press it makes the text in the text box uppercase and if the length of text reaches to 6 it will call the server side function

i have added it just before the end of form tag

<script type="text/javascript"> var t =document.getElementById("TextBox1"); // well you can imagen this function is any thing else may be figuring out how did you made your mouse gesture document.getElementById("TextBox1").onkeydown = function ss(){ t.value= t.value.toUpperCase(); // may be here there is a condition to know if it should call the server side function if(t.value.length >5) { __doPostBack('LinkButton1',''); } } </script>
well you can see the real point is in the function __doPostBack(”,”)
which is created by Visual Studio it self you do not have to program it and it can call server side functions by its own way (well what you do not know that there are a lot of hidden fields in your page that are getting created by visual studio and are used for these kind of stuff)

and the reason i say that we must have a link button is that i found Visual studio do not create this JavaScript function __doPostBack(”,”) if we dont have link button

well thats all for today i think hope this thing (which i had to search and try a lot of things to be able to do) will help you in your projects