Step 1: Register your Web service
First you have to register your Web service to use it in your page:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="./ContactService.asmx" />
</Services>
</asp:ScriptManager>
Step 2: Create header and the row to insert
Secondly, you have to create the header and insert row. Note that the link buttons save and cancel, call client methods and return false to interrupt the post back.
<%--Header--%>
<div style="width: 500px" class="HeaderStyle">
<div style="width: 200px; float: left;">
First Name
</div>
<div style="width: 200px; float: left;">
Last Name
</div>
<div style="width: 100px; float: left;">
Command
</div>
</div>
<%--Row to insert--%>
<div runat="server" id="divInsert" style="display: none">
<div style="width: 200px; float: left;">
<asp:TextBox runat="server" ID="txtFirstName" Width="180"></asp:TextBox>
</div>
<div style="width: 200px; float: left;">
<asp:TextBox runat="server" ID="txtLastName" Width="180"></asp:TextBox>
</div>
<div style="width: 100px; float: left;">
<asp:LinkButton runat="server" ID="lnkSave" OnClientClick="Save();return false;"
Text="Save"></asp:LinkButton>
<asp:LinkButton runat="server" ID="lnkCancel" OnClientClick="Cancel();return false;"
Text="Cancel"></asp:LinkButton>
</div>
</div>
Step 3: Create the grid view
To accomplish this task I use an external component named AjaxDataControls
The Ajax Data Controls is a DotNetSlackers project. Developed on top of Asp.net Ajax Extension, the main goal of this project is to provide rich set of data controls for Client Centric Development Model. Since the data controls of Asp.net like GridView, DataList, Repeater etc does not have any Client Side Object Model thus it is not possible to work with these controls with Web Service / Page Methods call.
- Add the reference to AjaxDataControls.dll
- Register the control:
If you want to do that in the page:
<%@ Register Assembly="AjaxDataControls" Namespace="AjaxDataControls" TagPrefix="AjaxData" %>
You can also do that in the Web.Config:
<add tagPrefix="AjaxData" namespace="AjaxDataControls" assembly="AjaxDataControls"/>
Add the following code to create the gridview:
<div style="clear: both; width: 500px;">
<ajaxdata:gridview id="grvContacts" runat="server" cssclass="DataWebControlStyle" cellspacing="0" cellpadding="3">
<AlternatingRowStyle CssClass="AlternatingRowStyle" />
<RowStyle CssClass="RowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<EmptyDataTemplate>
There is no records available.
</EmptyDataTemplate>
<EmptyDataRowStyle HorizontalAlign="Center" />
<Columns>
<AjaxData:GridViewBoundColumn DataField="FirstName" ItemStyle-Width="200" />
<AjaxData:GridViewBoundColumn DataField="LastName" HeaderStyle-Width="200" />
<AjaxData:GridViewBoundColumn HeaderStyle-Width="100" />
</Columns>
</ajaxdata:gridview>
</div>
Step 4: Add the javascript event
On page load, you bind the grid. When you click the save button you call the web service insert method and onSaveSuccess you bind the grid again.
<script type="text/javascript">
function pageLoad(sender, e) {
TestGridView.ContactService.GetContacts(onLoadSuccess);
}
function onLoadSuccess(result) {
var gridView = $find('<%= grvContacts.ClientID %>');
gridView.set_dataSource(result);
gridView.dataBind();
}
function Add() {
$get("<%= divInsert.ClientID %>").style.display = 'block';
}
function Save() {
TestGridView.ContactService.InsertContact(
$get("<%= txtFirstName.ClientID %>").value,
$get("<%= txtLastName.ClientID %>").value,onSaveSuccess);
}
function Cancel() {
$get("<%= txtFirstName.ClientID %>").value = '';
$get("<%= txtLastName.ClientID %>").value = '';
$get("<%= divInsert.ClientID %>").style.display = 'none';
}
function onSaveSuccess(result) {
$get("<%= txtFirstName.ClientID %>").value = '';
$get("<%= txtLastName.ClientID %>").value = '';
TestGridView.ContactService.GetContacts(onLoadSuccess);
$get("<%= divInsert.ClientID %>").style.display = 'none';
}
</script>
Web Service for this example
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class ContactService : System.Web.Services.WebService
{
[WebMethod]
public List<Contact> GetContacts()
{
ContactBAL contactBAL = new ContactBAL();
return contactBAL.GetContacts();
}
[WebMethod]
public void InsertContact(string firstName, string lastName)
{
ContactBAL contactBAL = new ContactBAL();
Contact contact = new Contact();
contact.FirstName = firstName;
contact.LastName = lastName;
contactBAL.InsertContact(contact);
}
}
Don't forget this line to enable JavaScript call:
[System.Web.Script.Services.ScriptService]
Download the full code