JQuery or Asp .Net Ajax Controls, What is your choice ? Why dont combine them ?

JQuery

JQuery used on client script. It really helps to fasten javascript or client script development.

JQuery also has package to make nice User Interface by using JQuery UI. JQuery UI has many themes that makes it more flexible and usable by developer.

Ajax functionality is one of JQuery strong benefit. Again, easy and fast client Ajax development also platform independent makes JQuery is a favorite and popular Javascript framework.

Asp .Net Ajax Toolkit and ScriptManager

Asp .Net has its own Ajax Controls. There are main components of Asp .Net Ajax controls which are ScriptManager, UpdatePanel, and Triggers. ScriptManager is a must have controls to enable Ajax.

Those controls are server control by attribute runat=”server”. So that Ajax submission will be done with .Net powerfull script and also VS intellisense. Server side script in Asp .Net is easy to manage. Has relatively less lines of code than any technology by help of so many .Net references that available. OOp implements automatically so that developer can make their best practice on OOP design.

Those reasons make general and Ajax Server side script on Asp .Net leads on easiness and fast for application development.

Asp .Net Ajax toolkit has client side script that act like JQuery to handle client development. Also it has many controls for User Interface development. With this Asp .Net functionallities, client development also can be fasten then using plain javascript.

Using both strongest benefit

Although Asp .Net has its own Ajax toolkit to do client development, JQuery client side is more favorite and popular among developers. JQuery has more attention also its DOM functionallity is really easy to implement. JQuery is platform independent whereas Asp .Net Ajax toolkit only available in Microsoft technologies. I think the last point is a main reason why JQuery is so popular.

On the other hand, Asp .Net server side script is almost unbeatable comparing to another server side script in term of code effectiveness and managebility. Well, this is based on my experiences. OOP best practice and MVC also can be implemented. If we are using JQuery Ajax then it will also has to deal with Asp .Net server script. In example when form is submitted or getting values on demand.
However Asp .Net Ajax controls has shorcut way to do this asynchronous form submission by using ScriptManager, UpdatePanel and Triggers. They are server control so that developer do not have to write additional client side script.

My idea is to combine strong points of both JQuery and Asp .Net Ajax control. JQuery on client user interface and client local event. Ajax Control deals with whatever that needs to use Server side script.

Let me show you an example. Below simple web application will use both JQuery and Asp. Net ajax controls. This app shows multiple choice, when user chooses on it and click submit it will display chosen values.

Designer *.aspx file

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            $("#chkall").click(function () {

                if ($("#chkall").is(":checked")) {
                    $(".cssChkAll label").text("Unselect All");
                } else {
                    $(".cssChkAll label").text("Select All");
                }
                $(".cssChoice input:checkbox").attr("checked", $("#chkall").is(":checked"));
                
            });
        });
    </script>
</head>
<body>

    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">    
    </asp:ScriptManager>
    What are your choices ?<br />
            <asp:CheckBox ID="chkall" runat="server" Text="Select All" CssClass="cssChkAll" /><br />
            <asp:CheckBox ID="csharp" runat="server" Text="C#" CssClass="cssChoice" /><br />
            <asp:CheckBox ID="vb" runat="server" Text="VB" CssClass="cssChoice" /><br />
            <asp:CheckBox ID="java" runat="server" Text="Java" CssClass="cssChoice" /><br />
    <asp:UpdatePanel ID="updatepanel1" runat="server">
        <ContentTemplate>
            
            <asp:Button ID="btnchoice" runat="server" Text="Choose" 
                onclick="btnchoice_Click" /><br />
            <label id="lblinfo" runat="server"></label>
        </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Above JQuery script is to check or uncheck all checkboxes input also to change label of checker.

ScriptManager control enables asynchronous process via server side script. So when user clicks btnchoice then async submission automatically processed using Asp .Net server side script. No addition client script needed for submitting a form.

One of good thing with combining JQuery and Ajax controls is developer can have server controls rather than html input. Well, nothing wrong with html input but if we use Asp .Net then why don’t we use server controls.

btnchoice_click procedure handles the click event. This displays user chosen value on label.

CSharp file, *.aspx.cs

protected void btnchoice_Click(object sender, EventArgs e)
        {
            string choices="";
            Boolean bchoiceexist = false;
            if (csharp.Checked)
            {
                if (!bchoiceexist)
                    choices = csharp.Text;
                else
                    choices = choices + "," + csharp.Text;

                bchoiceexist = true;
            }

            if (vb.Checked)
            {
                if (!bchoiceexist)
                    choices = vb.Text;
                else
                    choices = choices + "," + vb.Text;

                bchoiceexist = true;
            }

            if (java.Checked)
            {
                if (!bchoiceexist)
                    choices = java.Text;
                else
                    choices = choices + "," + java.Text;

                bchoiceexist = true;
            }

            lblinfo.InnerText = choices;
        }
    }

Summary

In the end, developer is free to choose what method to implement. Either entirely using JQuery with html input elements or Asp .Net ajax control with server controls.

I’d rather to use combination of both strong points, JQuery and Asp .Net Ajax Controls. JQuery on client events or DOM processing. Asp .Net Ajax controls deal with processes that related to server side script.
It depends on application requirement and developer skill & knowledge to produce nice and neat combination among them.

Regards,
Agung Gugiaji

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s