ASP.NET - Bind grid thro pure ajax - Asked By Anandh Ramanujam on 24-Dec-10 10:36 AM

Hi,

I am having Gridview, with one Delete column, when I click delete, the record should be removed using pure AJAX (not using updatepanel) and the grid should be rebind.

Can anybody help me in this regard

Danasegarane Arunachalam replied to Anandh Ramanujam on 24-Dec-10 08:12 PM
You can use the Jquery for this one..

HTML

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
 
<script src="scripts/jquery.blockUI.js" type="text/javascript"></script>
 
<script type = "text/javascript">
 
  function BlockUI(elementID) {
 
    var prm = Sys.WebForms.PageRequestManager.getInstance();
 
    prm.add_beginRequest(function () {
 
      $("#" + elementID).block({ message: '<table align = "center"><tr><td>' +
 
   '<img src="images/loadingAnim.gif"/></td></tr></table>',
 
        css: {},
 
        overlayCSS: { backgroundColor: '#000000', opacity: 0.6
 
        }
 
      });
 
    });
 
    prm.add_endRequest(function () {
 
      $("#" + elementID).unblock();
 
    });
 
  }
 
  $(document).ready(function () {
 
  
 
    BlockUI("dvgv");
 
    $.blockUI.defaults.css = {};
 
  });
 
  function Hidepopup() {
 
    $find("popup").hide();
 
    return false;
 
  }
 
</script>



Code Behind

void binddata()
{
   DataSet ds = new DataSet();
   ds.ReadXml(Server.MapPath("empdata.xml"));
   gv.DataSource = ds;
   gv.DataBind();
}
 
protected void insertinXML(object sender, EventArgs e)
 
  {
 
    txtempID.Text = string.Empty;
 
    txtName.Text = string.Empty;
 
  txtCity.Text = string.Empty;
 
    txtSalary.Text = string.Empty;
 
    count = 99;
 
    popup.Show();
 
  }
 
  
 
protected void Edit(object sender, EventArgs e)
 
{
 
   
 
  using (  GridViewRow row = (GridViewRow)((LinkButton)sender).Parent.Parent)
 
  {
 
    txtempID.Text = row.Cells[0].Text;
 
    txtName.Text = row.Cells[1].Text;
 
    txtCity.Text = row.Cells[2].Text;
 
    txtSalary.Text = row.Cells[3].Text;
 
    popup.Show();
 
   }
 
}
 
protected void Save(object sender, EventArgs e)
 
{
 
     binddata();
 
    DataSet ds = gv.DataSource as DataSet;
 
    DataRow dr = ds.Tables[0].NewRow();
 
    dr[0] = txtempID.Text;
 
    dr[1] = txtName.Text;
 
    dr[2] = txtCity.Text;
 
    dr[3] = txtSalary.Text;
 
    ds.Tables[0].Rows.Add(dr);
 
    ds.AcceptChanges();
 
    ds.WriteXml(Server.MapPath("empdata.xml"));
 
    binddata();
 
    txtempID.Text = string.Empty;
 
    txtName.Text = string.Empty;
 
    txtCity.Text = string.Empty;
 
    txtSalary.Text = string.Empty;
 
  }
 
  
 
protected void Update(object sender, EventArgs e)
 
{
 
    
 
    gv.EditIndex = -1;
 
    binddata();
 
    DataSet ds = (DataSet)gv.DataSource;
 
    int i = Convert.ToInt32(txtempID.Text);
 
    ds.Tables[0].Rows[i-1]["empid"] = txtempID.Text;
 
    ds.Tables[0].Rows[i-1]["empname"] = txtName.Text;
 
    ds.Tables[0].Rows[i-1]["empcity"] = txtCity.Text;
 
    ds.Tables[0].Rows[i-1]["empsalary"] = txtSalary.Text;
 
    ds.WriteXml(Server.MapPath("empdata.xml"));
 
    binddata();
 
   
 
}
 
  
 
protected void Deletedata(object s, GridViewDeleteEventArgs e)
 
{
 
   binddata();
 
   DataSet ds= gv.DataSource as DataSet;
 
   ds.Tables[0].Rows[gv.Rows[e.RowIndex].DataItemIndex].Delete();
 
   ds.WriteXml(Server.MapPath("empdata.xml"));
 
   binddata ();
 
}



Refer http://www.dotnetfunda.com/articles/article924-add-edit-delete-paging-records-in-gridview-using-jquery-.aspx one