HTMLServerControlFormat.aspx

  1. <%@ Page Language="C#" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <script runat="server">  
  6.     protected void Button1_Click(object sender, System.EventArgs e) {  
  7.         Div1.Style["Color"] = "White";  
  8.         Div1.InnerText = "Division Changed";  
  9.         Div1.Style["height"] = "250px";  
  10.         Div1.Style["width"] = "250px";  
  11.         Div1.Style["background-color"] = "Crimson";  
  12.         Div1.Style["border-style"] = "double";  
  13.         Div1.Style["border-color"] = "HotPink";  
  14.         Div1.Style["font-size"] = "large";  
  15.         Div1.Style["text-align"] = "center";  
  16.           
  17.     }  
  18. </script>  
  19.   
  20. <html xmlns="http://www.w3.org/1999/xhtml">  
  21. <head runat="server">  
  22.     <title>asp.net HTML server control example: how to format (design and style) programmatically</title>  
  23. </head>  
  24. <body>  
  25.     <form id="form1" runat="server">  
  26.     <div>  
  27.         <h2 style="color:Teal">HTML server control example: Design and Style</h2>  
  28.         <div id="Div1" runat="server">  
  29.             Hi this is a HTML server control: Div  
  30.         </div>  
  31.         <br />  
  32.         <asp:Button   
  33.             runat="server"   
  34.             Text="Format the Division"   
  35.             OnClick="Button1_Click"  
  36.             Font-Bold="true"  
  37.             ForeColor="Green"  
  38.             />  
  39.     </div>  
  40.     </form>  
  41. </body>  
  42. </html>  




CreateAndApplyCSSStyle.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <script runat="server">  
  5.     protected void Button1_Click(object sender, System.EventArgs e)  
  6.     {  
  7.         BulletedList1.Style.Add("Padding", "10px 25px 10px 55px");  
  8.         BulletedList1.Style.Add("font-family", "Courier New");  
  9.         BulletedList1.Style.Add("font-size", "x-large");  
  10.         BulletedList1.Style.Add("font-style", "italic");  
  11.         BulletedList1.Style.Add("text-decoration", "underline");  
  12.         BulletedList1.Style.Add("border", "2px dotted darkred");  
  13.         BulletedList1.Style.Add("background-color", "pink");  
  14.         BulletedList1.Style.Add("color", "deeppink");  
  15.     }  
  16. </script>  
  17.   
  18. <html xmlns="http://www.w3.org/1999/xhtml">  
  19. <head id="Head1" runat="server">  
  20.     <title>How to create and apply CSS style programmatically in asp.net control</title>  
  21. </head>  
  22. <body>  
  23.     <form id="form1" runat="server">  
  24.     <div>  
  25.         <h2 style="color:MidnightBlue; font-style:italic;">  
  26.             How to create and apply CSS style  
  27.             <br /> programmatically in asp.net control  
  28.         </h2>  
  29.         <hr width="450" align="left" color="SkyBlue"/>  
  30.         <asp:BulletedList  
  31.              ID="BulletedList1"  
  32.              runat="server"  
  33.              Width="500"  
  34.              BackColor="Crimson"  
  35.              ForeColor="Snow"  
  36.              >  
  37.              <asp:ListItem>Crimson</asp:ListItem>  
  38.              <asp:ListItem>MidnightBlue</asp:ListItem>  
  39.              <asp:ListItem>CornFlower</asp:ListItem>  
  40.              <asp:ListItem>DarkSalmon</asp:ListItem>  
  41.              <asp:ListItem>IndianRed</asp:ListItem>  
  42.              <asp:ListItem>OliveDrab</asp:ListItem>  
  43.         </asp:BulletedList>  
  44.         <asp:Button   
  45.             ID="Button1"  
  46.             runat="server"  
  47.             OnClick="Button1_Click"  
  48.             Text="Create And Apply CSS Style In BulletedList"  
  49.             Height="45"  
  50.             Font-Bold="true"  
  51.             ForeColor="DarkBlue"  
  52.             />  
  53.     </div>  
  54.     </form>  
  55. </body>  
  56. </html>  




Ajax updatepanel example with triggers in asp.net

April 04, 2013 |

Introduction:

In this article I will explain what is Ajax updatepanel control, advantages of updatepanel control and how to use multiple updatepanels in asp.net.








Ajax updatepanel contains property called UpdateMode this property is used to specify whether UpdatePanel is always refreshed during a partial render or if it refresh only when a particular trigger hit. By default updatepanel contains UpdateMode="Always" if we want to set it conditionally we need to change this property UpdateMode="Conditional"
Ajax updatepanel control contains two child tags those are ContentTemplate and Triggers.
ContentTemplate is used to hold the content of the page means suppose we designed page with some controls we will place controls inside of the ContentTemplate
Triggers we used in a situation like need to refresh updatepanel only whenever I click some button control in that situation I will define those controls with this Triggers child tag.
Our Sample update panel control will be like this
<asp:UpdatePanel ID="UpdatePanel2" runat="server"
 UpdateMode="Conditional">
 <ContentTemplate>
 <asp:Label ID="Label2" runat="server"
 ForeColor="red" />
……………………………………………………..
………………………………………………………
……………………………………………………….
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1"
 EventName="Click" />
</Triggers>
 </asp:UpdatePanel>
Now we will create one sample application with updatepanels for that first create application and design your aspx page will be likes this
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head id="Head1" runat="server">
 <title>UpdatePanel Example in asp.net</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server"/>
 <div>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <fieldset style="width:30%">
 <legend>Update Panel-1</legend>
 <asp:Label ID="lbl1" runat="server" ForeColor="green"/><br />
 <asp:Button ID="btnUpdate1" runat="server" Text="Update Both Panels" OnClick="btnUpdate1_Click" />
 <asp:Button ID="btnUpdate2" runat="server" Text="Update This Panel" OnClick="btnUpdate2_Click" />
 </fieldset>
 </ContentTemplate>
 </asp:UpdatePanel>
 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <fieldset style="width:30%">
 <legend>Update Panel-2</legend>
  <asp:Label ID="lbl2" runat="server" ForeColor="red" />
  </fieldset>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="btnUpdate1" EventName="Click" />
 </Triggers>
 </asp:UpdatePanel>
 </div>
 </form>
 </body>
</html>
If you observe above code in UpdatePanel2 I defined Triggers property with btnUpdate1. Here UpdatePanel2 content will update only whenever we click on btnUpdate1 because we defined UpdatePanel2 property UpdateMode="Conditional" and we set AsyncPostBackTrigger property with btnUpdate1
Write following code in code behind
C#.NET
protected void btnUpdate1_Click(object sender, EventArgs e)
{
lbl1.Text = DateTime.Now.ToLongTimeString();
lbl2.Text = DateTime.Now.ToLongTimeString();
}
protected void btnUpdate2_Click(object sender, EventArgs e)
{
lbl1.Text = DateTime.Now.ToLongTimeString();
lbl2.Text = DateTime.Now.ToLongTimeString();
}
VB Code
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub btnUpdate1_Click(ByVal sender As Object, ByVal e As EventArgs)
lbl1.Text = DateTime.Now.ToLongTimeString()
lbl2.Text = DateTime.Now.ToLongTimeString()
End Sub
Protected Sub btnUpdate2_Click(ByVal sender As Object, ByVal e As EventArgs)
lbl1.Text = DateTime.Now.ToLongTimeString()
lbl2.Text = DateTime.Now.ToLongTimeString()
End Sub
Demo

Introduction

Here I will explain how to populate one dropdown based on selection in another dropdown asp.net using c#


Description
I have three dropdowns Country dropwdown, State dropdown, Region dropdown I need to populate states dropdown based on country dropdown and I need to populate region dropdown based on states dropdown for that what we have to do first design three tables in sql server with data like this 

CountryTable 
StateTable
RegionTable
After that design your aspx page like this 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CasCading Dropdowns Sample</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center">
<tr>
<td>
Select Country:
</td>
<td>
<asp:DropDownList ID="ddlCountry" runat="server" AutoPostBack="true"
onselectedindexchanged="ddlCountry_SelectedIndexChanged"></asp:DropDownList>
</td>
</tr>
<tr>
<td>
Select State:
</td>
<td>
<asp:DropDownList ID="ddlState" runat="server" AutoPostBack="true"
onselectedindexchanged="ddlState_SelectedIndexChanged"></asp:DropDownList>
</td>
</tr>
<tr>
<td>
Select Region:
</td>
<td>
<asp:DropDownList ID="ddlRegion" runat="server"></asp:DropDownList>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
In code behind write like this 

private String strConnection = "Data Source=XZCBJ017550;Initial Catalog=MySamplesDB;Integrated Security=True";
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindContrydropdown();
}
}
/// <summary>
/// Bind COuntrydropdown
/// </summary>
protected void BindContrydropdown()
{
//conenction path for database
SqlConnection con = new SqlConnection(strConnection);
con.Open();
SqlCommand cmd = new SqlCommand("select * from CountryTable", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
ddlCountry.DataSource = ds;
ddlCountry.DataTextField = "CountryName";
ddlCountry.DataValueField = "CountryID";
ddlCountry.DataBind();
ddlCountry.Items.Insert(0, new ListItem("--Select--", "0"));
ddlState.Items.Insert(0, new ListItem("--Select--", "0"));
ddlRegion.Items.Insert(0, new ListItem("--Select--", "0"));
}
/// <summary>
/// Bind State Dropdown Based on CountryID
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
{
int CountryID = Convert.ToInt32(ddlCountry.SelectedValue);
SqlConnection con = new SqlConnection(strConnection);
con.Open();
SqlCommand cmd = new SqlCommand("select * from StateTable where CountryID="+CountryID, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
ddlState.DataSource = ds;
ddlState.DataTextField = "StateName";
ddlState.DataValueField = "StateID";
ddlState.DataBind();
ddlState.Items.Insert(0, new ListItem("--Select--", "0"));
if(ddlState.SelectedValue=="0")
{
ddlRegion.Items.Clear();
ddlRegion.Items.Insert(0, new ListItem("--Select--", "0"));
}
}
/// <summary>
/// Bind Region dropdown based on Re
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)
{
int StateID = Convert.ToInt32(ddlState.SelectedValue);
SqlConnection con = new SqlConnection(strConnection);
con.Open();
SqlCommand cmd = new SqlCommand("select * from RegionTable where StateID=" + StateID, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
ddlRegion.DataSource = ds;
ddlRegion.DataTextField = "RegionName";
ddlRegion.DataValueField = "RegionID";
ddlRegion.DataBind();
ddlRegion.Items.Insert(0, new ListItem("--Select--", "0"));
}
Demo