Refresh GridView Withour Refreshing whole page in Asp.net

To refresh particular control we have to use <asp:UpdatePanel> with <asp:Timer> Ajax control.

Before taking this control we have to take <asp:ScriptManager> 
in aspx page

 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
  <asp:UpdatePanel ID="UpdatePanel2" runat="server">
  <ContentTemplate>
        <asp:Timer ID="Timer1" runat="server" Interval="5000">
        </asp:Timer>
  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" >
       <Columns>
       <asp:BoundField DataField="Date" HeaderText="Date" SortExpression="Date" />
       <asp:BoundField DataField="Message" HeaderText="Message"
                SortExpression="Message" />
       </Columns>
    </asp:GridView>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        SelectCommand="SELECT [Date], [Message] FROM [ChatDb]"></asp:SqlDataSource>
    </ContentTemplate>
    <Triggers>
   <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
    </asp:UpdatePanel>

in .cs page

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataSource = SqlDataSource1;
            GridView1.DataBind();
        }
    }

ConfirmButtonExtender in Asp.net

Example



 <asp:LinkButton ID="LinkButton1" runat="server">Delete</asp:LinkButton>
   <cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" TargetControlID="LinkButton1" ConfirmText="Do You Want to Delete.." OnClientCancel="CancelClick">
   </cc1:ConfirmButtonExtender>


                                          (CollapsiblePanel)<<Back

Expand /collapse ASP.NET AJAX CollapsiblePanel programmatically using JavaScript

In Default.aspx



  <style type="text/css">
        .cpHeader
        {
            color: white;
            background-color: #719DDB;
            font: bold 11px auto "Trebuchet MS" , Verdana;
            font-size: 12px;
            cursor: pointer;
            width: 450px;
            height: 18px;
            padding: 4px;
        }
        .cpBody
        {
            background-color: #DCE4F9;
            font: normal 11px auto Verdana, Arial;
            border: 1px gray;
            width: 450px;
            padding: 4px;
            padding-top: 7px;
        }
    </style>

    <script type="text/javascript">

        function ExpandCollapse() {
            var collPanel = $find("CollapsiblePanelExtender1");
            if (collPanel.get_Collapsed())
                collPanel.set_Collapsed(false);
            else
                collPanel.set_Collapsed(true);
        }    

    </script>


<form id="form1" runat="server">
    <div>
  <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  </cc1:ToolkitScriptManager>
    <div>
   

  <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">

        <asp:Label ID="lblText" runat="server" />
  </asp:Panel>
  <asp:Panel ID="pBody" runat="server" CssClass="cpBody">
             This is Collapsible extender,using javascript
  </asp:Panel>
  <asp:Button ID="btnClick" OnClientClick="ExpandCollapse()" runat="server" Text="Expand/Collapse" />
           
  <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pBody"
CollapseControlID="pHeader" ExpandControlID="pHeader" Collapsed="true" TextLabelID="lblText" ExpandedSize="120"
CollapsedText="Click to Show Content.." ExpandedText="Click to Hide Content.."

 CollapsedSize="0">

  </cc1:CollapsiblePanelExtender>
    
        </div>
       
    </div>
    </form>

CollapsiblePanel in asp.net

Example


in .aspx page



<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
    
    <asp:Panel ID="Panel2" runat="server" style="font-weight: bold; background-color: ThreeDShadow; border-color:Black " Width="400px" >
        hi press me to fill data
    </asp:Panel>
        
    <asp:Panel ID="Panel1" runat="server"  style="font-weight: bold; background-color: ThreeDShadow;" Width="400px">
    name: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
    rollno: <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
           
    </asp:Panel>

  <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"  TargetControlID="Panel1" CollapseControlID="Panel2" ExpandControlID="Panel2" Collapsed="true" CollapsedSize="0" ExpandedSize="120" ExpandedText="(Collapse...)" CollapsedText="(Expand...)>
  </cc1:CollapsiblePanelExtender>


For detail:Click to view
                                                                                                (Cascadingdropdown)<<Back


Expand/collapse CollapsiblePanel using Javascript
Click to view

CascadingDropDown in asp.net

Example


in Cascadingdropdown.asmx


'create two table
'city and country



using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using AjaxControlToolkit;
using System.Data;
using System.Collections.Specialized;

/// <summary>
/// Summary description for CascadingDropDown
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
public class CascadingDropDown : System.Web.Services.WebService {
    string strConnection = ConfigurationManager.ConnectionStrings["dbConnectionString"].ConnectionString;


    public CascadingDropDown () 
{
        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
 }
    [WebMethod]
    public CascadingDropDownNameValue[] GetCountries(string knownCategoryValues, string category) 
    {
        SqlConnection con = new SqlConnection(strConnection);
        SqlCommand cmd = new SqlCommand();
        cmd.Connection = con;
        cmd.CommandType = System.Data.CommandType.Text;
        cmd.CommandText = "Select * from Country";
        SqlDataAdapter dAdapter = new SqlDataAdapter();
        dAdapter.SelectCommand = cmd;
        con.Open();
        DataSet objDs = new DataSet();
        dAdapter.Fill(objDs);
        con.Close();


        List<CascadingDropDownNameValue> countryNames = new List<CascadingDropDownNameValue>();
        foreach (DataRow dRow in objDs.Tables[0].Rows)
        {
            string countryID = dRow["CountryID"].ToString();
            string countryName = dRow["CountryName"].ToString();
            countryNames.Add(new CascadingDropDownNameValue(countryName, countryID));
        }
        return countryNames.ToArray();
       
    }


    [WebMethod]
    public CascadingDropDownNameValue[] GetCities(string knownCategoryValues, string category)
    {
        int countryID;
        StringDictionary countryValues = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        countryID = Convert.ToInt32(countryValues["Country"]);
        SqlConnection con = new SqlConnection(strConnection);
        SqlCommand cmd = new SqlCommand();
        cmd.Connection = con;
        cmd.CommandType = System.Data.CommandType.Text;
        cmd.Parameters.AddWithValue("@CountryID", countryID);
        cmd.CommandText = "Select * from City where CountryID = @CountryID";
        SqlDataAdapter dAdapter = new SqlDataAdapter();
        dAdapter.SelectCommand = cmd;
        con.Open();
        DataSet objDs = new DataSet();
        dAdapter.Fill(objDs);
        con.Close();
        List<CascadingDropDownNameValue> cityNames = new List<CascadingDropDownNameValue>();
        foreach (DataRow dRow in objDs.Tables[0].Rows)
        {
            string cityID = dRow["CityID"].ToString();
            string cityName = dRow["CityName"].ToString();
            cityNames.Add(new CascadingDropDownNameValue(cityName, cityID));
        }
        return cityNames.ToArray();
    }
    
}


in default.aspx

<form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
        <asp:ServiceReference Path="AutoComplete.asmx" />
        <asp:ServiceReference Path="CascadingDropDown.asmx" />
        </Services>
        </asp:ScriptManager>
     <asp:DropDownList ID="ddlCountry" runat="server">
                    </asp:DropDownList><br />
 <ajaxToolkit:CascadingDropDown ID="CascadingDropDown1"
       runat="server"

    Category="Country" 

    TargetControlID="ddlCountry"

   PromptText="-Select Country-"
   LoadingText="Loading Countries.."
   ServicePath="CascadingDropDown.asmx"
   ServiceMethod="GetCountries">
      </ajaxToolkit:CascadingDropDown>
                   
 <asp:DropDownList ID="ddlCity" runat="server" OnSelectedIndexChanged="ddlCity_SelectedIndexChanged">
  </asp:DropDownList>

<br />
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown2"
 runat="server"
 Category="City"
 TargetControlID="ddlCity"
 ParentControlID="ddlCountry"
 PromptText="-Select City-"
 LoadingText="Loading Cities.."
 ServicePath="CascadingDropDown.asmx"
 ServiceMethod="GetCities">
 </ajaxToolkit:CascadingDropDown>
    </div>
   </form>

For detail:Click to view

Next>>(CollapsiblePanelExtender)           (AutoComplete)<<Back

Autocomplete in asp.net

Example:


AutoComplete.asmx




using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

[WebService]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoComplete : WebService
{
    public AutoComplete()
    {
    }


    [WebMethod]
    public string[] GetCompletionList(string prefixText, int count)
    {
        if (count == 0)
        {
            count = 10;
        }
        DataTable dt = GetRecords(prefixText);
        List<string> items = new List<string>(count);


        for (int i = 0; i < dt.Rows.Count; i++)
        {
            string strName = dt.Rows[i][0].ToString();
            items.Add(strName);
        }
        return items.ToArray();
    }


    public DataTable GetRecords(string strName)
    {
        string strConn = ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ConnectionString;  'set connectionstring in web.config file
        SqlConnection con = new SqlConnection(strConn);
        SqlCommand cmd = new SqlCommand();
        cmd.Connection = con;
        cmd.CommandType = System.Data.CommandType.Text;
        cmd.Parameters.AddWithValue("@Name", strName);
        cmd.CommandText = "Select Name from Test where Name like '%'+@Name+'%'";
        DataSet objDs = new DataSet();
        SqlDataAdapter dAdapter = new SqlDataAdapter();
        dAdapter.SelectCommand = cmd;
        con.Open();
        dAdapter.Fill(objDs);
        con.Close();
        return objDs.Tables[0];


    }
}

In Default.aspx page


  <div>
     <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
        <asp:ServiceReference Path="AutoComplete.asmx" />
        </Services>
        </asp:ScriptManager>
  
      <asp:TextBox ID="txtName" runat="server" Text='<%#Bind("Name") %>' ></asp:TextBox>
                    <ajaxToolkit:AutoCompleteExtender
                                 runat="server" 
                                 ID="autoComplete1" 
                                 TargetControlID="txtName"
                                 ServicePath="AutoComplete.asmx" 
                                 ServiceMethod="GetCompletionList"
                                 MinimumPrefixLength="1" 
                                 CompletionInterval="10"
                                 EnableCaching="true"
                                 CompletionSetCount="12" />
    </div>


For Detail:Click to view
Next>>(Cascadingdropdown)              (Calendarextender)<<Back

Validation in CalendarExtender

Example

Adding CompareValidator

<asp:CompareValidator ID="CompareValidator1" runat="server"

                ControlToValidate="TextBox1" Display="Dynamic" ErrorMessage="Invalid Date"

                Operator="DataTypeCheck" Type="Date">

</asp:CompareValidator>

<cc1:ValidatorCalloutExtender ID="CompareValidator1_ValidatorCalloutExtender"

                runat="server" Enabled="True" TargetControlID="CompareValidator1">

</cc1:ValidatorCalloutExtender>

Adding RangeValidator – We will restrict the user to select a date range starting from today to 15 days from now.

<asp:RangeValidator ID="RangeValidator1" runat="server"

                ControlToValidate="TextBox1" ErrorMessage="RangeValidator"

                Type="Date">

</asp:RangeValidator>

<cc1:ValidatorCalloutExtender ID="RangeValidator1_ValidatorCalloutExtender"

                runat="server" Enabled="True" TargetControlID="RangeValidator1">

</cc1:ValidatorCalloutExtender>

 

In the code behind of your page, add this code

C#

    protected void Page_Load(object sender, EventArgs e)

    {

        RangeValidator1.MinimumValue = System.DateTime.Now.ToShortDateString();

        RangeValidator1.MaximumValue = System.DateTime.Now.AddDays(15).ToShortDateString();

    }

VB.NET

      Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

            RangeValidator1.MinimumValue = System.DateTime.Now.ToShortDateString()

            RangeValidator1.MaximumValue = System.DateTime.Now.AddDays(15).ToShortDateString()

      End Sub

CalendarExtender in asp.net

Example


in .aspx page

<asp:ScriptManager ID="ScriptManager1" runat="server" />

        <div>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID"

            DataSourceID="SqlDataSource1" ShowFooter="true" AllowPaging="True" AllowSorting="True">

            <Columns>           

               <asp:BoundField DataField="CategoryID" HeaderText="ID"

                 SortExpression="ID" />

                  <asp:BoundField DataField="Name" HeaderText="Name"

                 SortExpression="Name" />

              <asp:TemplateField>

                <ItemTemplate>

                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

                    <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"/>

                </ItemTemplate>

            </asp:TemplateField>               

            </Columns>

        </asp:GridView>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=SUPROTIM;Initial Catalog=Northwind;Integrated Security=True"

            SelectCommand="SELECT [ID], [Name] FROM [test]" >

        </asp:SqlDataSource>

Display only the day and month in the CalendarExtender

<cc1:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MM" TargetControlID="TextBox1" />

How to make sure user does not select a date earlier than today or greater than today

<head runat="server">

    <title>Calendar Extender</title>

    <script type="text/javascript">

    function checkDate(sender,args)

{

 if (sender._selectedDate < new Date())

            {

                alert("You cannot select a day earlier than today!");

                sender._selectedDate = new Date(); 

                // set the date back to the current date

sender._textbox.set_Value(sender._selectedDate.format(sender._format))

            }

}

    </script>

</head>

Call the code:

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

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <div>

          

            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

            <cc1:CalendarExtender ID="CalendarExtender1"

            runat="server" OnClientDateSelectionChanged="checkDate" TargetControlID="TextBox1" />

        </div>

    </form>

Select Date Greater than today

In the javascript, just change this line

sender._selectedDate > new Date()

for detail:Click to view

Next>>(Autocomplete)                               (AnimationExtender)<<Back

 Add validation to the CalendarExtender Control : Click to view

AnimationExtender in Asp.net

Example:


<style>
.Animation1
{

position: absolute;
padding:3px;
border: solid 1px #000;

}
.Animation2
{

display:none;
position:absolute;
width:1px;
height:1px;
left:400px;
top:600px;
padding:3px;
border:solid 1px #000;

}
</style>

..

<asp:ScriptManager ID="SM1" runat="server" />
<br />
<asp:Panel ID="panel_Animated" runat="server" CssClass="Animation1">

Animation imminent.

</asp:Panel>
<br />
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="panel_Animated">

<Animations>

<OnLoad>

<Sequence>

<Move Horizontal="300" Duration="1" Fps="20" />
<FadeOut Duration="1" Fps="20" />

</Sequence>

</OnLoad>

</Animations>

</cc1:AnimationExtender>
<br />
<br />
<asp:Button ID="btn_Animate" runat="server" Text="Animate" OnClientClick="return false;" />
<br />
<asp:Panel ID="panel_Animated2" runat="server" CssClass="Animation2">

Animation2 imminent.

</asp:Panel>
<br />
<cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="btn_Animate">

<Animations>

<OnClick>

<Sequence AnimationTarget="panel_Animated2">

<EnableAction AnimationTarget="btn_Animate" Enabled="false" />
<StyleAction Attribute="display" Value="Block" />
<Parallel>

<FadeIn Duration="1" Fps="20" />
<Scale Duration="1" Fps="20" ScaleFactor="30.0" Center="true" />

</Parallel>

</Sequence>

</OnClick>

</Animations>

</cc1:AnimationExtender>

For Detail:Click to view
Next>> (CalenderExtender)         (Alwaysvisibleextender)<<Back

Alwaysvisibleextender in Asp.net

 Example:

in .aspx page


         <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>



<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="Image1" VerticalSide="Top"
    VerticalOffset="10"
    HorizontalSide="Right"
    HorizontalOffset="10"
    ScrollEffectDuration=".1">
        </cc1:AlwaysVisibleControlExtender>


        <asp:Image ID="Image1" runat="server" ImageUrl="~/Chrysanthemum.jpg" Width="100px" Height="100px" />


For detail: Click to view

Next>> (AnimationExtender)                        (Accordian)<<Back