Friday, December 13, 2013

How To- Load ASP.Net User Control Dynamically Using jQuery and Ajax

Here in this post, I am going to explain how to dynamically load the Asp.Net user control using jQuery and Ajax. For loading the user control we will use the Web Method on server side and call that web method through Ajax call using jQuery.

You can also find my other articles related to C#ASP.Net jQuery, Java Script and SQL Server.

So, lets start the example. In this example I have used one aspx page name Demo.aspx and one user control to load on the aspx page DemoUserControl.ascx.
ASPX Page

<div style="width:350px">
        <table width="100%">
            <tr>
                <td>
                    <asp:Label ID="lblName" runat="server" Font-Bold="true" Text="Name"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblAge" runat="server" Font-Bold="true" Text="Age"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Button ID="btnLoadUserControl" runat="server" Text="LoadControl" />
                </td>
            </tr>
        </table>
    </div>
    <fieldset style="width:350px">
        <legend>User Control Content</legend>
        <div id="userControlContent">
        </div>
    </fieldset>

In the above aspx page, there are two TextBoxes for capturing the input and one Button to load the user control and show the enterd value.

Saturday, June 22, 2013

How To- Bind Data to Gridview using jQuery in ASP.Net

In this post, I am explaining how to bind data to Gridview using jQuery in ASP.Net through Ajax call.

In previous posts, I explained Page Scroll to Top with jQuery, Automatically Refresh Page Using Java Script , How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example and some other articles related to C#ASP.Net jQuery, Java Script and SQL Server.

ASPX Page

Gridview Markup
<asp:GridView ID="grdDemo" runat="server" AutoGenerateColumns="False" Font-Names="Arial"
    Font-Size="10pt" HeaderStyle-BackColor="GrayText" HeaderStyle-ForeColor="White" Width="500px">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="FName" HeaderText="First Name"/>
        <asp:BoundField DataField="LName" HeaderText="Last Name"/>
        <asp:BoundField DataField="Email" HeaderText="E-mail"/>
    </Columns>
</asp:GridView>

Wednesday, April 17, 2013

Blogger- Adding Floating Facebook Like Box into Blogger Blog

In my post Adding Facebook Like Box into Blogger Blog, I explained you how you can add Facebook Like box in your blogger blog. This post is the refined version of my previous post. Here I will show you how you can add floating Facebook Like box into you blogger blog.

You can find some more articles related to Blogging, SQL ServerASP.Net, C# and many more. To add floating Facebook like box follow the below procedures.

Tuesday, March 19, 2013

jQuery- Page Scroll to Top with jQuery | How to add Page Scroll to Top in web page

In some websites, you can see that when you scroll the page there is a link at the bottom of the page with text "Scroll to Top" and when you click on this link page moves to the top of the page. If you web page has lots of content, It is a very good idea to provide visitors within a easy way to quickly go to the top of the page.

In this article, we will create a page scrolling effect for returning to the top of the page using jQuery.

In previous posts, I explained Automatically Refresh Page Using Java Script , How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example and some other articles related to jQuery, Java Script etc.

Monday, March 18, 2013

Automatically Refresh Page Using Java Script

In game sites, you will have to see that they updated the score in regular time intervals automatically. i.e refreshed the score card in regular time intervals. Are you want this functionality in your web page? If yes then this post will help you.
Here I am going to show you a simple example to refresh the page automatically in regular intervals using Java Script or Meta Tag.

In previous posts, I explained How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example, jQuery Draggable Div Example in ASP.Net and some other articles related to jQuery, Java Script etc.

Friday, March 15, 2013

How to Create a Textarea Character Counter / Limiter Using jQuery

Are you need to limit the number of characters that are allowed to be inserted into Textbox or Textarea? You have seen in various sites(mostly sms sites like way2sms, 160by2) where you can type only a fix number of characters into textbox. Here, I am going to show you a simple jQuery snippet that you can use to achieve this functionality.

In previous posts, I explained Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example, jQuery Draggable Div Example in ASP.Net, jQuery Resizable Div Example in ASP.Netand some other articles related to jQuery, Java Script etc.

Tuesday, March 5, 2013

Change Input to Upper Case using Java Script

In many web sites, you will have to see that when user types into text box then input text converts into Upper case automatically even if you type in lower case. Here I am going to show you a simple example how can we do this using java script.

In previous posts, I explained Calculate age using java scriptjQuery .toggleClass() example, jQuery Draggable Div Example in ASP.Net, jQuery Resizable Div Example in ASP.Net, Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example an other article related to jQuery and Java Script.

Here, I will show you a simple example of  converting the input value in to uppercase using jQuery in ASP.Net.

Monday, February 25, 2013

jQuey .toggleClass() Example in ASp.Net

In previous posts, I explained jQuery Draggable Div Example in ASP.Net, jQuery Resizable Div Example in ASP.Net, Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example. Here, I will show you a simple example of  .toggleClass() using jQuery in ASP.Net.

jQuery .toggleClass()

.toggleClass() uses for add or remove one or more classes from each element in the set of matched element.

Saturday, February 23, 2013

jQuery Draggable Div Example in ASP.Net

In previous posts, I explained jQuery Resizable Div Example in ASP.Net, Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example. Now , I will show you a simple example of  resizable div using jQuery in ASP.Net.

We can create a resizable div just by simple call the draggable() property of jQuery UI library that would be like as shown below.

Friday, February 22, 2013

jQuery Resizable Div Example in ASP.Net

In previous posts, I explained Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example. Now , I will show you a simple example of  resizable div using jQuery in ASP.Net.

We can create a resizable div just by simple call the resizable() property of jQuery UI library that would be like as shown below.

Thursday, February 21, 2013

Drag and drop html list item with in list using jQuery

Here, I will show you a simple example of rearranging the HTML list item through drag and drop functionality using jQuery. Here in this example, I have used the jQuery List DragSort plugin . You can download this plugin from here.

To implement this we need to write the code like as shown below

Wednesday, February 20, 2013

jQuery Magnifier Example | Showing the magnify view of image

Here, I will show you a simple example of jQuery magnifier for image. Here in this example, I have used the dio5 jQuery magnifier plugin . You can download this plugin from here.

To implement this we need to write the code like as shown below

Friday, February 8, 2013

Bind Multiple Controls to a Single Event in jQuery

In this sample, we will see how to bind Multiple Controls to a single event in jQuery. We will bind 5 button controls (Button A, B, C, D and E) to a single click event. This example also demonstrates how to create an array of controls and loop through them. Here’s the sample:

Wednesday, February 6, 2013

Disable cut, copy and paste in textbox using jquery, javascript

Sometimes we need to restrict the user to cut or copy the content from TextBox and also restrict to paste the content into TextBox. It is very easy to do this using Java Script as well as using Jquery. Here I will show you both the methods i.e. using Java Script and using jQuery.
^ Scroll to Top