Subscribe For Free Updates!

We'll not spam mate! We promise.

Thursday, 7 November 2013

Google Search In ASP NET

Introduction
 
This article describes how to add a Google search feature in ASP.Net.  Here I will describe how to communicate with the Google search API.

Description

Since it is third party software, we require a third-party DLL to be referenced by our application that will communicate with the Google server.
For this we must download the Google Search API:
  1. GoogleSearchAPI.dll
You can download it from the source code attached in this article.
Design
Now add one TextBox,one Button and one Datalist.

In the Datalist I used one linkbutton to show the search result title with link and label to show the search description.

Design your screen as in the following screen.

1.png
Or you can copy the following source code:


<
body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" Width="300px"></asp:TextBox>
        <asp:Button ID="btnSearch" runat="server" Text="Google Search" OnClick="Button1_Click" /><br />
        <asp:DataList ID="dlSearch" runat="server" Width="600px">
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" Text='<%#Eval("Title") %>' PostBackUrl='<%#Eval("Url") %>'></asp:LinkButton><br />
                <asp:Label ID="Label1" runat="server" Text='<%#Eval("Content") %>'></asp:Label><br />
                <br />
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label Visible='<%#bool.Parse((dlSearch.Items.Count==0).ToString())%>' runat="server"
                  ID="lblNoRecord" Text="No Record Found!"></asp:Label>
           </FooterTemplate>
        </asp:DataList>
    </div>
    </form>

</
body>
Now go to the code view.
Next add a reference of the following Google Search API DLL to your website:
  1. GoogleSearchAPI.dll
And write the following code in the .cs file:
using System;
using
System.Collections.Generic;
using
Google.API.Search;
using
System.Data;
public
partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            dlSearch.DataSource = null;
            dlSearch.DataBind();
            TextBox1.Text = "";
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("Title", typeof(string)));
        dt.Columns.Add(new DataColumn("Content", typeof(string)));
        dt.Columns.Add(new DataColumn("Url", typeof(string)));
        GwebSearchClient client = new GwebSearchClient("www.c-sharpcorner.com");
        IList<IWebResult> results = client.Search(TextBox1.Text, 30);
        foreach (IWebResult result in results)
        {
            DataRow dr = dt.NewRow();
            dr["Title"] = result.Title.ToString();
            dr["Content"] = result.Content.ToString();
            dr["Url"] = result.Url;
            dt.Rows.Add(dr);
        }
        dlSearch.DataSource = dt;
        dlSearch.DataBind();
    }
}
In the code above I passed the TextBox value in the button click to Google server.
After getting the result I bound it to the datatable then to the datalist control.
Just check these two lines:
GwebSearchClient client = new GwebSearchClient("www.c-sharpcorner.com");
IList<IWebResult> results = client.Search(TextBox1.Text, 30);
In the first line I am passing "www.c-sharpcorner.com" as the Client because it required a hosted site for Security purposes.
If you dodn't pass that then it will show an exception.
In the second line I am passing 30 and a TextBox value. Here 30 means I am getting 30 search results.
So you can increase or decrease this value as needed.
Now build your application. Enter a search query then press the button.
It will show all the Google search results.

2.jpg
Now click on the link to see the corresponding site.
For any modifications or problems please comment. 
To download Source Click here
Thank You.

Monday, 4 November 2013

GridView Sorting Using jQuery Plugin

Introduction

This article describes how to use GridView in ASP.Net and jQuery. We can do it server-side but if you do it using jQuery then you are putting less load on the server. You can handle it client-side.

Description

To create this application you need the jQuery plugins listed below.

  • jquery.tablesorter.min.js
  • jquery-1.4.3.min.js
You can download them from the source code attached in this page.

Design

Add a GridView with AutogeneratedColumn=false and apply any design.

Now design your screen like the following screen:

1.jpeg

Or you can copy the following source code:


<form id="form1" runat="server">
     <div>
         <asp:GridView ID="gvDept" runat="server" AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
             <AlternatingRowStyle BackColor="PaleGoldenrod" />
             <Columns>
                 <asp:BoundField DataField="DEPTNO" HeaderText="Id">
                     <ItemStyle Width="50px" />
                 </asp:BoundField>
                 <asp:BoundField DataField="DNAME" HeaderText="Dept Name" />
                 <asp:BoundField DataField="LOC" HeaderText="Location" />
             </Columns>
             <FooterStyle BackColor="Tan" /> 
            <HeaderStyle BackColor="Tan" Font-Bold="True" />
             <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue"
  HorizontalAlign="Center" />
             <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
             <SortedAscendingCellStyle BackColor="#FAFAE7" /> 
            <SortedAscendingHeaderStyle BackColor="#DAC09E" /> 
            <SortedDescendingCellStyle BackColor="#E1DB9C" />
             <SortedDescendingHeaderStyle BackColor="#C2A47B" />
         </asp:GridView>
     </div>
     </form>
 Next add the following JavaScript and CSS style code in the head tag (it's used for sorting):<style type="text/css">        th
        {
            cursor: pointer;
            background-color: #dadada;
            color: Black;
            font-weight: bold;
            text-align: left;
        }
        th.headerSortUp
        {
            background-image: url(images/asc.gif);
            background-position: right center;
            background-repeat: no-repeat;
        }
        th.headerSortDown
        {
            background-image: url(images/desc.gif);
            background-position: right center;
            background-repeat: no-repeat;
        }
        td
        {
            border-bottom: solid 1px #dadada;
        }
    </style>    

<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>    
<script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script>     
<script type="text/javascript">       
 $(document).ready(function () {
            $("#gvDept").tablesorter();
        });
    </script>


Now go to the code view.

Write the BindGrid method using the database or you can use a static datatable.

After binding, write these two lines that are requeired for sorting:
gvDept.UseAccessibleHeader = true;
gvDept.HeaderRow.TableSection = TableRowSection.TableHeader;
And write the following code .cs file: 

using System;
using System.Collections.Generic;
using System.Linq; 
using System.Web; 
using System.Web.UI;
 using System.Web.UI.WebControls; 
using System.Data; 
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page{
    private void BindGrid()
    {
        SqlConnection con = new SqlConnection("Data Source=Sanjeeb;database=MYDB;user id=test;password=Test");
        SqlCommand cmd = new SqlCommand("select * from DEPT", con);
        SqlDataAdapter dr = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        dr.Fill(ds);
        gvDept.DataSource = ds;
        gvDept.DataBind();
        gvDept.UseAccessibleHeader = true;
        gvDept.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindGrid();
        }
    }
}


Now build your application. Click on every header; it will sort the corresponding grid column with ascending and descending image.

2.jpeg

For any modifications or problems please comment.
For download source Click Here

Thanks.

Tuesday, 29 October 2013

How to Get Latitude and Longitude of a Place Using Google Map API

Introduction
This article describes how to get the latitude and longitude of a location using the Google Map API in ASP.Net. Here I will describe how to communicate with the Google Map API.
Description

To use the Google Map API you need to add the following link to the Head section.


<
script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Design
Now add two Text Boxes,one Button and one Label.

Design your screen as in the following screen.

1.jpeg

Or you can copy the following source code:

<
body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Country :
                </td>
                <td>
                    <asp:TextBox ID="txtCon" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    City :
                </td>
                <td>
                    <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input id="btn" type="button" value="Search Coordinates" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <asp:Label ID="lblresult" runat="server" ForeColor="Red"></asp:Label>
                </td>
            </tr>
        </table>
    </div>
    </form>


</
body>Now add the following jQuery and Google map references in the Head section:

<
script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Now  write the following JavaScript code in the Head section that will communicate with the Google map API.

<
script type="text/javascript">
        $(document).ready(function () {
            $("#btn").click(function () {
                var geocoder = new google.maps.Geocoder();
                var con = document.getElementById('txtCon').value;
                var city = document.getElementById('txtCity').value;
                var res = document.getElementById('lblresult');
                var com = city + "," + con;
                geocoder.geocode({ 'address': com }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        res.innerHTML = "Latitude : " + results[0].geometry.location.lat() + "<br/>Longitude :" +
results[0].geometry.location.lng();
                    } else {
                        res.innerHTML = "Wrong Details: " + status;
                    }
                });
            });
        });

    </script>
Now build your application. Enter a City and Country in the respective text boxes then press the button.
It will show the latitude and longitude of that place in the label.
 
2.jpeg
Thank you.

GridView Animations Using jQuery

Introduction

This article describes how to apply an animation to a GridView in ASP.Net using jQuery UI.

Description

To create this application you need the jQuery files listed below.
  • jquery-1.9.1.js
  • jquery-ui.js
  • jquery-ui.css
You can download them from the source code attached in this page.
Here I create three pages for checking various animations on GridView.
  1. Dragable GridView
  2. Zoom able GridView
  3. Animated Effect to GridView
Dragable GridView
In this example I will show how to drag a GridView to any position in a browser's screen.
Design
Add a GridView to a page and apply any design.
Now design your screen like the following screen:

1.jpg
 
Or you can copy the following source code:

<
body>
   <form id="form1" runat="server">

    <div id="draggable">
        <asp:GridView ID="gvDetails" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">

            <AlternatingRowStyle BackColor="White" />
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            <SortedAscendingCellStyle BackColor="#FDF5AC" />
            <SortedAscendingHeaderStyle BackColor="#4D0000" />
            <SortedDescendingCellStyle BackColor="#FCF6C0" />
            <SortedDescendingHeaderStyle BackColor="#820000" />
        </asp:GridView>
    </div>
    </form>


In the code above just check this div:

<div id="draggable">
</div>
Within this div what element you put the dragable  feature applied on that.

Next add the following JavaScript and CSS style code in the head tag of an aspx file (this is used to apply the drag feature to the div in which the grid is present).


<
head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
    <style>
        #draggable
        {
            width: 150px;
            height: 150px;
            padding: 0.5em;
        }
    </style>
    <script>
        $(function () {
            $("#draggable").draggable();
        });
    </script>

</
head>
Now go to the code view.
And write the following code in the .cs file for binding data to the grid:


using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data;
public
partial class DragAbleGrid : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        BindGridDetails();
    }
    protected void BindGridDetails()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("EmpId", typeof(Int32));
        dt.Columns.Add("EmpName", typeof(string));
        dt.Columns.Add("Education", typeof(string));
        dt.Columns.Add("Place", typeof(string));
        DataRow dtrow = dt.NewRow();
        dtrow["EmpId"] = 1;
        dtrow["EmpName"] = "Sanjeeb";
        dtrow["Education"] = "MCA";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 2;
        dtrow["EmpName"] = "Laku";
        dtrow["Education"] = "MBA";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 3;
        dtrow["EmpName"] = "Pankaj";
        dtrow["Education"] = "B.Tech";
        dtrow["Place"] = "Bihar";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 4;
        dtrow["EmpName"] = "Srikanth";
        dtrow["Education"] = "B.Tech";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        gvDetails.DataSource = dt;
        gvDetails.DataBind();
    }
}

Now build your application and check.

Default view in browser:

2.jpeg

After dragging it in the browser:
3.jpeg
 

Zoomable GridView
In this example I will show how to Zoom a GridView on button click.
Design
Add a GridView to a page and apply any design and one hyperlink.
Now design your screen like the following screen:

4.jpeg
 
Or you can copy the following source code:

<
body>
   <form id="form1" runat="server">

<
div>
        <a href="#" id="button">Click to Zoom In</a>
    </div>
    <div class="toggler">
        <div id="effect" class="newClass ui-corner-all">

        <asp:GridView ID="gvDetails" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">

            <AlternatingRowStyle BackColor="White" />
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            <SortedAscendingCellStyle BackColor="#FDF5AC" />
            <SortedAscendingHeaderStyle BackColor="#4D0000" />
            <SortedDescendingCellStyle BackColor="#FCF6C0" />
            <SortedDescendingHeaderStyle BackColor="#820000" />
        </asp:GridView>
    </div>

</div>
    </form>


In the code above just check this div:

<div class="toggler">
        <div id="effect" class="newClass ui-corner-all">
</
div>
</div>
Within this div what element you put the Zoom feature applied on that.

Next add the following JavaScript and CSS style code in the head tag of an aspx file (this is used to apply the Zoom feature to the div in which the grid is present).


<
head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
    <style type="text/css">
        .toggler
        {
            width: 500px;
            height: 200px;
            position: relative;
        }
        #effect
        {
            position: relative;
        }
        .newClass
        {
            width: 240px;
            padding: 1em;
            letter-spacing: 0;
            font-size: 1.2em;
            margin: 0;
        }
        .anotherNewClass
        {
            text-indent: 40px;
            letter-spacing: .4em;
            width: 410px;
            height: 100px;
            padding: 30px;
            margin: 10px;
            font-size: 1.6em;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#button").click(function () {
                $(".newClass").switchClass("newClass", "anotherNewClass", 1000); 
                $(".anotherNewClass").switchClass("anotherNewClass", "newClass", 1000);
                return false;
            });
        });
    </script>

</
head> 

Now go to the code view.

And write the following code in the .cs file for binding data to the grid:


using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data;
public
partial class ZoomAbleGrid : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        BindGridDetails();
    }
    protected void BindGridDetails()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("EmpId", typeof(Int32));
        dt.Columns.Add("EmpName", typeof(string));
        dt.Columns.Add("Education", typeof(string));
        dt.Columns.Add("Place", typeof(string));
        DataRow dtrow = dt.NewRow();
        dtrow["EmpId"] = 1;
        dtrow["EmpName"] = "Sanjeeb";
        dtrow["Education"] = "MCA";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 2;
        dtrow["EmpName"] = "Laku";
        dtrow["Education"] = "MBA";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 3;
        dtrow["EmpName"] = "Pankaj";
        dtrow["Education"] = "B.Tech";
        dtrow["Place"] = "Bihar";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 4;
        dtrow["EmpName"] = "Srikanth";
        dtrow["Education"] = "B.Tech";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        gvDetails.DataSource = dt;
        gvDetails.DataBind();
    }
}

Now build your application and check.

Default view in browser:

5.jpg

Now click on "Zoom" in Hyper link.

6.jpg
 

Animated Effect to GridView
In this example I will show how to apply an animation effect to a GridView on a button click.
Design
Add a GridView to a page and apply any design, one dropdown and one hyperlink.
The Dropdown will show all the animation effects.
 

Now design your screen as in the following screen:
7.jpeg

 
Or you can copy the following source code:

<
body>
   <form id="form1" runat="server">

<
select name="effects" id="effectTypes">
        <option value="blind">Blind</option>
        <option value="bounce">Bounce</option>
        <option value="clip">Clip</option>
        <option value="drop">Drop</option>
        <option value="explode">Explode</option>
        <option value="fade">Fade</option>
        <option value="fold">Fold</option>
        <option value="highlight">Highlight</option>
        <option value="puff">Puff</option>
        <option value="pulsate">Pulsate</option>
        <option value="scale">Scale</option>
        <option value="shake">Shake</option>
        <option value="size">Size</option>
        <option value="slide">Slide</option>
        <option value="transfer">Transfer</option>
    </select>
    <a href="#" id="button" class="ui-state-default ui-corner-all">Apply effect</a>
    <br />
    <br />
    <div class="toggler">
        <div id="effect" class="ui-corner-all">
            <asp:GridView ID="gvDetails" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"
                Height="125px" Width="243px">
                <AlternatingRowStyle BackColor="White" />
                <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                <SortedAscendingCellStyle BackColor="#FDF5AC" />
                <SortedAscendingHeaderStyle BackColor="#4D0000" />
                <SortedDescendingCellStyle BackColor="#FCF6C0" />
                <SortedDescendingHeaderStyle BackColor="#820000" />
            </asp:GridView>
        </div>
    </div>
    </form>


In the code above just check this div:

<div class="toggler">
<div id="effect" class="ui-corner-all">

</
div>
</div>
Within this div what element you put the Animation effect feature applied on that.

Next add the following JavaScript and CSS style code in the head tag of an aspx file (this is used to apply an Animation effect feature to a div in which a grid is present).


<
head runat="server">
    <title></title>
    <link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
    <style type="text/css">
        .toggler
        {
            width: 500px;
            height: 200px;
            position: relative;
        }
        #effect
        {
            width: 240px;
            height: 135px;
            padding: 0.4em;
            position: relative;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // run the currently selected effect
            function runEffect() {
                // get effect type from
                var selectedEffect = $("#effectTypes").val();
                // most effect types need no options passed by default
                var options = {};
                // some effects have required parameters
                if (selectedEffect === "scale") {
                    options = { percent: 0 };
                } else if (selectedEffect === "transfer") {
                    options = { to: "#button", className: "ui-effects-transfer" };
                } else if (selectedEffect === "size") {
                    options = { to: { width: 200, height: 60} };
                }
                // run the effect
                $("#effect").effect(selectedEffect, options, 500, callback);
            };
            // callback function to bring a hidden box back
            function callback() {
                setTimeout(function () {
                    $("#effect").removeAttr("style").hide().fadeIn();
                }, 1000);
            };
            // set effect from select menu value
            $("#button").click(function () {
                runEffect();
                return false;
            });
        });
    </script>

</
head>
 Now go to the code view.
And write the following code in the .cs file for binding data to the grid:

using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data;
public
partial class EffectToGrid : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        BindGridDetails();
    }
    protected void BindGridDetails()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("EmpId", typeof(Int32));
        dt.Columns.Add("EmpName", typeof(string));
        dt.Columns.Add("Education", typeof(string));
        dt.Columns.Add("Place", typeof(string));
        DataRow dtrow = dt.NewRow();
        dtrow["EmpId"] = 1;
        dtrow["EmpName"] = "Sanjeeb";
        dtrow["Education"] = "MCA";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 2;
        dtrow["EmpName"] = "Laku";
        dtrow["Education"] = "MBA";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 3;
        dtrow["EmpName"] = "Pankaj";
        dtrow["Education"] = "B.Tech";
        dtrow["Place"] = "Bihar";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 4;
        dtrow["EmpName"] = "Srikanth";
        dtrow["Education"] = "B.Tech";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        gvDetails.DataSource = dt;
        gvDetails.DataBind();
    }
}

Now build your application. Select any effect from the dropdown and click on "apply effect".
8.png

If you have any modifications to suggest then please comment.

to download click here
Thank you.