Wednesday, October 23, 2013

How to Edit and delete By jquery in gridview with database?


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewDelete.aspx.cs" Inherits="GridViewDelete" %>
<!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>GridView and JQuery</title>
<style type="text/css">
.record{color:Green;}
.delbutton{color:Red;}
.Ex{color:Gray;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
 $(".delbutton").click(function () {
var record_id = $(this).attr("id");
var tr_id = $(this).parents(".record");
if (confirm("Do you want to delete this record?")) {
$.ajax({
 type: "POST",
url: "GridViewDelete.aspx/DeleteUser",
 data: "{'args': '" + record_id + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
 success: function () {
 tr_id.css("background-color", "lightgreen");
tr_id.fadeOut(500, function () {
tr_id.remove();
});
}
});
}
 return false;
});
 $(".delbutton1").click(function () {
var record_id = $(this).attr("id");
document.getElementById('Hdid').value = record_id;
document.getElementById('btnsubmit').value = 'Update';
 $("#<%=GridView1.ClientID %> tr").each(function () {
if (!this.rowIndex) return;
var age1 = $(this).find('td:first').html();
if (record_id == age1) {
document.getElementById('txtname').value = $(this).find('td:eq(1)').html();
document.getElementById('txtfname').value = $(this).find('td:eq(2)').html();
document.getElementById('txtlname').value = $(this).find('td:eq(3)').html();
}
});

});
 $("#btnsubmit").click(function () {
var record_id = document.getElementById('Hdid').value
$.ajax({
 type: "POST",
url: "GridViewDelete.aspx/adduser",
 data: "{'args': '" + record_id + "', uname:'" + document.getElementById('txtname').value + "',fname:'" + document.getElementById('txtfname').value + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
 success: function () { }
});
 if (record_id == 0) {
var stt = '<tr class=record ><td>15<td>' + document.getElementById('txtname').value + '</td>'+
'<td>' + document.getElementById('txtfname').value + '</td>'+
'<td>mname</td>'+
'<td>' + document.getElementById('txtlname').value + '</td>' +
'<td>Email</td>' +'<td> <a href=# id=15 class="delbutton">Delet</a></td>' +
'<td> <a href=# id=15 class="delbutton1">Edit</a></td>' +
'</tr>';
 $('#<%=GridView1.ClientID %>').append(stt);
 } else {
 $("#<%=GridView1.ClientID %> tr").each(function () {

if (!this.rowIndex) return;

var age1 = $(this).find('td:first').html();

if (record_id == age1) {

 $(this).find('td:eq(1)').html(document.getElementById('txtname').value);

 $(this).find('td:eq(2)').html(document.getElementById('txtfname').value);

 $(this).find('td:eq(3)').html(document.getElementById('txtlname').value);


}

 

});

}


 document.getElementById('Hdid').value = 0;


});

});


</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<table><tr>

<td>User Name</td><td><asp:TextBox ID="txtname" runat="server" ></asp:TextBox></td>

<td>First Name</td><td><asp:TextBox ID="txtfname" runat="server" ></asp:TextBox></td>

<td>Last Name</td><td><asp:TextBox ID="txtlname" runat="server" ></asp:TextBox></td>

<td>Last Name</td><td><input type="button" ID="btnsubmit" runat="server" value="save" />

<asp:HiddenField ID="Hdid" Value="0" runat="server" />

</td>

</tr></table>

<asp:GridView CellPadding="5" CellSpacing="5" ID="GridView1" runat="server" RowStyle-CssClass="record" AutoGenerateColumns="False" >

<RowStyle CssClass="record"></RowStyle>

<Columns>

<asp:BoundField DataField="ID" HeaderText="ID" />

<asp:BoundField DataField="User_Name" HeaderText="User Name" />

<asp:BoundField DataField="First_Name" HeaderText="First Name" />

<asp:BoundField DataField="Middle_Name" HeaderText="Middle Name" />

<asp:BoundField DataField="Last_Name" HeaderText="Last Name" />

<asp:BoundField DataField="Email_Id" HeaderText="Email Id" />

<asp:TemplateField>

<ItemTemplate>

<a href="#" id='<%# Eval("ID") %>' class="delbutton">Delet</a>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<ItemTemplate>

<a href="#" id='<%# Eval("ID") %>' class="delbutton1">Edit</a>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

</form>

</body>

</html>

















==========================================================

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Data.SqlClient;

public partial class GridViewDelete : System.Web.UI.Page


{


 protected void Page_Load(object sender, EventArgs e)


{


 if (!IsPostBack)


{

LoadData();

}

}


 [System.Web.Services.WebMethod]

public static void DeleteUser(string args)


{


 string conString = ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString;

SqlConnection sqlConn = new SqlConnection(conString);

try


{


 SqlCommand sqlCmd = new SqlCommand("DeleteUser", sqlConn);

sqlCmd.CommandType = CommandType.StoredProcedure;

sqlCmd.Parameters.AddWithValue("@id", Convert.ToInt32(args.Trim()));


sqlConn.Open();

sqlCmd.ExecuteNonQuery();

}


 catch


{


 //Handle Error


}


 finally


{

sqlConn.Close();

}

}




 [System.Web.Services.WebMethod]

public static void adduser(string args,string uname,string fname)


{


 string conString = ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString;

SqlConnection sqlConn = new SqlConnection(conString);

try


{


 SqlCommand sqlCmd = new SqlCommand("addUser", sqlConn);

sqlCmd.CommandType = CommandType.StoredProcedure;

sqlCmd.Parameters.AddWithValue("@id", Convert.ToInt32(args.Trim()));

sqlCmd.Parameters.AddWithValue("@uname", Convert.ToString(uname.Trim()));

sqlCmd.Parameters.AddWithValue("@fname", Convert.ToString(fname.Trim()));


sqlConn.Open();

sqlCmd.ExecuteNonQuery();


 if (args == "0") {

// LoadData();


}

}


 catch


{


 //Handle Error


}


 finally


{

sqlConn.Close();

}

}

 


 private void LoadData()


{


 string conString = ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString;

SqlConnection sqlConn = new SqlConnection(conString);

try


{


 SqlCommand sqlCmd = new SqlCommand("GetUserRecords", sqlConn);

sqlCmd.CommandType = CommandType.StoredProcedure;


sqlConn.Open();


 SqlDataReader rdr = sqlCmd.ExecuteReader();


GridView1.DataSource = rdr;

GridView1.DataBind();

rdr.Close();

}


 catch


{


 //Handle Error


}


 finally


{

sqlConn.Close();

}

}

}


 

No comments:

Post a Comment