HTML5

Forget about the fact that in HTML you can have a static sites noly, with enhanced HTML5 along with CSS3 you can have lots of elements of Dynamica site you've come across

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.

While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.

So today we’re going to experiment a little with these new technologies. At the end of this article you’ll learn how to:

* Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.
* Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.
* Use HTML5 alongside a rising technology: Microformats.
* Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.

AJAX in GridView

This Post helps you more to explore the ModalPopup Extender integrated with Asp.Net GridView control. By reading this article, you will understand the way to show dynamic data in the ModalPopup, edit the data in the ModalPopup extender and save it into database by making a postback.
What we are going to do?
The basic idea of this article is to fetch data from the database, bind it with Asp.Net GridView control, and then we are going to show the values in the server controls placed in the ModalPopup extender and perform an edit/update function from the ModalPopup extender itself. To achieve this, we are going to use WebService which will return the required data as XML, this XML data is captured in the client-side by JavaScript’s XMLDOM object, then we are going to process the XML to fill the controls in the ModalPopup extender. These data can be changed and on postback, these data will be saved in the database. You can place any server controls in the ModalPopup extender.
Sample Scenario
For demonstration, we are going to use customer information from a table called Customers. The primary key column is customer code and its field name is ‘Cus_Code’. The other columns in the customer table is customer name [Cus_Name], Gender [Cus_Gender], City[Cus_City], State [Cus_State] and Customer Type [Cus_Type]. We are going to use TextBox, DropDownList and HiddenField controls in the ModalPopup extender to manipulate these data.
Make GridView control
In your Ajax enabled website’s aspx page, add a GridView control in it and set the DataKeyNames to your primary key (in this case it is Cus_Code), and bind it with your Data source control. Or if you want to bind the GridView control from code-behind, create a private method to fetch data from the database and bind it as follows

private void FillGridViewWithCustomerInfo()
{
string sql = "Select * from customers";
SqlDataAdapter da = new SqlDataAdapter(sql, “Your connection string”);
DataTable dt = new DataTable();
da.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}

In the Page Load event, call this method to bind the GridView control with the data from the database. Then add a TemplateField column to the GridView. In the ItemTemplate section of this column, drag and drop a HyperLink control, specify the Text property as ‘Edit’. We have to add an client-side onclick event to this hyperlink to show the ModalPopup extender. In the GridView control’s RowDataBound event, add the following code.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
HyperLink HyperLink1 = (HyperLink)e.Row.FindControl("HyperLink1");
HyperLink1.Attributes.Add("onclick", "ShowMyModalPopup('" + GridView1.DataKeys[e.Row.RowIndex].Value + "')");
}
}

The second line of the above code, adds the onclick attributes to the HyperLink1, with ShowMyModalPopup as a JavaScript function which takes the value from the DataKeyNames of the GridView control. A DataKeyNames property is an array that contains the names of the primary key fields for the items displayed in a GridView control.

So far, we made all the basic things ready for the GridView control to display data. Now you run the application, the GridView control will be populated with data from the customer table. When the hyperlink is clicked, the ModalPopup extender should come to action with the corresponding data from the selected row. We are going to do this with the help of Webservice method, which will return specific row data in an XML format. This webservice method will be called by the JavaScript method ShowMyModalPopup, and then we will process the XML and extract the data to display in the controls of the ModalPopup extender.

Make the WebService.asmx
In your application, add a new WebService file and write a method to fetch single row from the customer table and return it in XML format. The webmethod will be as follows
[WebMethod]
public string FetchOneCustomer(string customerid)
{
string sql = "select * from Customers where cus_code=" + customerid;
SqlDataAdapter da = new SqlDataAdapter(sql, “Your connection string”);
DataSet ds = new DataSet();
da.Fill(ds);
return ds.GetXml();
}

The above method will take customer code as argument and fetch the row and it will return the row as XML. So far GridView contol and WebService is ready. Now we can start to work on the ModalPopup extender to display the data for the corresponding selected row from the GridView control.
Design ModalPopup Extender
Drag and drop a ScriptManager, a ModalPopup Extender and a Panel control. Set the PopupControlID and TargetControlID of the ModalPopup Extender as ‘Panel1’. In the Panel control, you put 3 Textboxes to display Customer name, City and State and 2 DropDownList controls to take Gender and Customer Type. Also add a Hidden field to store Customer Code, and 2 Buttons to perform Update and Cancel action. Add a ServiceReference to the ScriptManager and point it to the WebService.asmx. Below we provide the sample code for ScriptManager, ModalPopup Extender and the Panel control
Source Code
Customer # :
Name:
Gender: Male Female
City:
State:
Type: Retailer Wholesale

So the ModalPopup extender has to appear on the screen along with the data of the corresponding row whenever the user clicks the HyperLink in the GridView control. For this we have write two JavaScript functions, one to show the ModalPopup window with the data and another function to display the data in the control of the ModalPopup extender.
The first JavaScript function is ShowMyModalPopup, which we already set in the HyperLink’s client-side onclick in the GridView’s RowDataBound event. This JavaScript function will be as follows
function ShowMyModalPopup(customerid)
{
var modal = $find('ModalPopupExtender1');
modal.show();
WebService.FetchOneCustomer(customerid,DisplayResult);
}
In the above function, we find the ModalPopup Extender in the web page and show it. The next line of code is calling the webservice method from the JavaScript by passing the customer code and a JavaScript function name to process the result returned by the webmethod. This is the concept of consuming webservice with Asp.Net Ajax. The DisplayResult function takes an argument which is the resultant XML data come from the webservice method, process it with all browser compatibility issues, remove whitespaces in the XML data and set the values to the corresponding server controls in the ModalPopup Extender’s Panel control. Look carefully at the code below to set the values from XML data to Asp.Net server controls in the ModalPopup window.
function DisplayResult(result)
{
var doc;
if (window.ActiveXObject)
{
doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(result);
}
else
{
var parser=new DOMParser();
var doc=parser.parseFromString(result,"text/xml");
}

var root=doc.documentElement.childNodes;
var tags;

for(var i=0;i section.
function fnClickUpdate(sender, e)
{
__doPostBack(sender,e);
}

These two steps will help the ModalPopup Extender to perform Postback actions, and the Button1’s server side click event will get fired, which in turn takes the data from the ModalPopup controls and save it into the database.
To implement this we need to put a Hidden field inside the Panel control and specify its ID as hidCusCode. This Hidden field will hold the primary key, that is the unique customer code, which we are going to use to update the records in the database. The value for this hidden field will be set in the DisplayResult JavaScript function.
Double click on the Update Button, it will create an Button1_Click event in your code-behind file. Write the code here to update the database record with the modified data and call FillGridViewWithCustomerInfo method to bind the GridView control with the updated data as follows
protected void Button1_Click(object sender, EventArgs e)
{
string sql = "Update Customers Set Cus_Name=’”+txtName.Text+”’, others_fields=other_controls.Text Where Cus_Code="+hidCusCode.Value;
SqlConnection conn = new SqlConnection(“Your Connection String”);
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
cmd.ExecuteNonQuery();
conn.Close();

FillGridViewWithCustomerInfo();
}
Save your application, view it in your browser. You can view GridView Control with customer data, click on the 'Edit' link, ModalPopup Extender will appear with data from the selected row, change something and click on the Update Button. Page will get postback and data will be updated in the database and showed in the GridView control.
Click here to view our Sample ModalPopup with GridView control