I am new in asp.net and working to create an ajax gridview with edit and delete functionality. I got an article on this website but its populating blank data in columns.
here is my C# and aspx page:
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Reference" ItemStyle-Width="150px" ItemStyle-CssClass="Name">
<ItemTemplate>
<asp:Label Text='<%# Eval("Reference") %>' runat="server" />
<asp:TextBox Text='<%# Eval("Reference") %>' runat="server" Style="display: none" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="MDDeptNo" ItemStyle-Width="150px" ItemStyle-CssClass="Country">
<ItemTemplate>
<asp:Label Text='<%# Eval("MDDeptNo") %>' runat="server" />
<asp:TextBox Text='<%# Eval("MDDeptNo") %>' runat="server" Style="display: none" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton Text="Edit" runat="server" CssClass="Edit" />
<asp:LinkButton Text="Update" runat="server" CssClass="Update" Style="display: none" />
<asp:LinkButton Text="Cancel" runat="server" CssClass="Cancel" Style="display: none" />
<asp:LinkButton Text="Delete" runat="server" CssClass="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
<tr>
<td style="width: 150px">Name:<br />
<asp:TextBox ID="txtName" runat="server" Width="140" />
</td>
<td style="width: 150px">Country:<br />
<asp:TextBox ID="txtCountry" runat="server" Width="140" />
</td>
<td style="width: 100px">
<br />
<asp:Button ID="btnAdd" runat="server" Text="Add" />
</td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess
});
});
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Table");
var row = $("[id*=gvCustomers] tr:last-child").clone(true);
$("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
$.each(customers, function () {
var customer = $(this);
AppendRow(row, $(this).find("Reference").text(), $(this).find("MDDeptNo").text())
row = $("[id*=gvCustomers] tr:last-child").clone(true);
});
}
function AppendRow(row, Reference, MDDeptNo) {
//Bind CustomerId.
//Bind Name.
$(".Reference", row).find("span").html(Reference);
$(".Reference", row).find("input").val(Reference);
//Bind Country.
$(".MDDeptNo", row).find("span").html(MDDeptNo);
$(".MDDeptNo", row).find("input").val(MDDeptNo);
$("[id*=gvCustomers]").append(row);
}
</script>
Below is my CS file code:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.BindDummyRow();
}
}
private void BindDummyRow()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("reference");
dummy.Columns.Add("MDDeptNo");
dummy.Rows.Add();
gvCustomers.DataSource = dummy;
gvCustomers.DataBind();
}
[WebMethod]
public static string GetCustomers()
{
string query = "SELECT Reference, MDDeptNo FROM Dbo.rec_LU_LocationCodes";
SqlCommand cmd = new SqlCommand(query);
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds.GetXml();
}
}
}
}