Tuesday 22 May 2012

Customise AJAX Using JQuery

Step 1: Download Jquery file from Here

Step 2 : Add the Given Below Code in Your Source Page Named Mydata.aspx.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Mydata.aspx.cs" Inherits="Mydata" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type ="text/javascript">
$(document).ready(function(){
  $("#Button1").click(function(){
    $.ajax({url:"AjaxServer.aspx?id=1",success:function(result){
      $("#GridData").html(result);
    }});
  });
});
</script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick ="FetchDGContents();"/>

    </ContentTemplate>
         </asp:UpdatePanel>
                
<div id = "GridData">
   
    </div>
    </div>
        </form>


</body>
</html>

Step 3: Add a page named AjaxServer.aspx
Step 4: Write Code in AjaxServer.aspx.cs

public partial class AjaxServer : System.Web.UI.Page
{
    SqlConnection cn = new SqlConnection(@"Your Connection String");
   
     
protected void Page_Load(object sender, EventArgs e)
    {
        string id = Request.QueryString["id"];
        //string XmlString;
        SqlDataAdapter da = new SqlDataAdapter("select * from Emp",cn);
        DataSet ds = new DataSet();
        da.Fill(ds, "XmlTable");
        ConvertHTML(ds);
    }



    public void ConvertHTML(DataSet ds)
    {

        using (StringWriter sw = new StringWriter())
        {
            using (HtmlTextWriter htw = new HtmlTextWriter(sw))
            {
                string srtMsg;
                // instantiate a datagrid 
                DataGrid dg = new DataGrid();
                dg.DataSource = ds.Tables[0];
                dg.HeaderStyle.BackColor = System.Drawing.Color.Gray;
                dg.HeaderStyle.Font.Name = "Tahoma";
                dg.HeaderStyle.Font.Size = 12;
                dg.HeaderStyle.ForeColor = System.Drawing.Color.White;
                dg.DataBind();

                dg.RenderControl(htw);
                srtMsg = sw.ToString();

                ds.Clear();
                Response.Clear();
                Response.ContentType = "text/HTML";
                Response.Write(srtMsg);
                Response.End();

            }
        }
    }
   
}









No comments:

Post a Comment