Mobile Content

Friday, December 30, 2011

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();
        }
    }

Wednesday, December 28, 2011

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 ObjectByVal 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

Tuesday, December 27, 2011

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