Introduction
The objective behind writing this article is to make use of Ajax Control Toolkit in implementation. Here I have tried to create a three layer architecture by using ObjectDataSource
. In an application, suppose we want to do an edit and delete GridView
row on the client side. So here, I present the easiest way around Ajax Control Toolkit to do client side data modification.
Background
Earlier I too faced lots of problem and was unable to work out of how to handle anything JUST after an update of update panel. So I planned to write up a demo as soon I had some time. Please feel free to post any comments, bugs or suggestions for improvement.
Key Scenario
Use of:
- Ajax Control Toolkit
- Three layer architecture
ObjectDataSource
- JavaScript
Implementation of Three Layer Architecture
Now let's start making the things in a real world application. Create a database layer named DBClass.cs where we are going to define the various fields and methods:
Under DBClass.cs class file, create the following:
public class DBClass
{
private SqlConnection con = new SqlConnection();
private SqlCommand com = new SqlCommand();
private SqlDataAdapter da = new SqlDataAdapter();
public DBClass()
{
}
private void setConnectionState()
{
if (con.State == System.Data.ConnectionState.Open)
{
con.Close();
}
con.ConnectionString = ConfigurationSettings.AppSettings["sqlCon"];
con.Open();
}
public SqlCommand setCommand(string SP_Name)
{
setConnectionState();
com = new SqlCommand(SP_Name, con);
com.CommandType = System.Data.CommandType.StoredProcedure;
return com;
}
public SqlDataAdapter setAdapter(string SP_Name)
{
setConnectionState();
da = new SqlDataAdapter(SP_Name, con);
da.SelectCommand.CommandType = System.Data.CommandType.StoredProcedure;
return da;
}
}
Now create a Client.cs where we are going to define the various fields, properties and methods:
Under Client.cs class file, create the following fields:
private int CustomerID;
private string CompanyName;
private string ContactName;
private string ContactTitle;
private string Address;
private string City;
private string PostalCode;
private string Country;
private string Phone;
private string Fax;
public Client()
{
}
public Client(int customerID, string companyName, string contactName,
string contactTitle, string address, string city, string postalCode,
string country, string phone,string fax)
{
this.CustomerID = customerID;
this.CompanyName = companyName;
this.ContactName = contactName;
this.ContactTitle = contactTitle;
this.Address = address;
this.City = city;
this.PostalCode = postalCode;
this.Country = country;
this.Phone = Phone;
this.Fax = fax;
}
public int customerID
{
get
{
return this.CustomerID;
}
set
{
this.CustomerID = value;
}
}
[DataObjectMethod(DataObjectMethodType.Select)]
public static DataSet GetAllClient()
{
DataSet ds = new DataSet();
try
{
DBClass db = new DBClass();
SqlDataAdapter da = db.setAdapter("GetAllCustomers");
da.Fill(ds);
}
catch (Exception ex)
{
Console.WriteLine(ex);
}
return ds;
}
[DataObjectMethod(DataObjectMethodType.Fill)]
public static DataSet ClientLoadByID(int CustomerID)
{
DataSet ds = new DataSet();
try
{
DBClass db = new DBClass();
SqlDataAdapter da = db.setAdapter("GetCustomerByID");
da.SelectCommand.Parameters.Add
(new SqlParameter("@CustomerID", CustomerID));
da.Fill(ds);
}
catch (Exception ex)
{
Console.WriteLine(ex);
}
return ds;
}
[DataObjectMethod(DataObjectMethodType.Delete)]
public static bool ClientDelete(int CustomerID)
{
try
{
DBClass db = new DBClass();
SqlCommand com = db.setCommand("DeleteCustomerByID");
com.Parameters.Add(new SqlParameter("@CustomerID", CustomerID));
com.ExecuteNonQuery();
}
catch (Exception ex)
{
Console.WriteLine(ex);
}
return true;
}
[DataObjectMethod(DataObjectMethodType.Update)]
public static bool ClientUpdate(Client cust)
{
try
{
DBClass db = new DBClass();
SqlCommand com = db.setCommand("CustomerUpdate");
com.Parameters.Add(new SqlParameter("@CustomerID", cust.CustomerID));
com.Parameters.Add(new SqlParameter("@CompanyName", cust.companyName));
com.Parameters.Add(new SqlParameter("@ContactName", cust.contactName));
com.Parameters.Add(new SqlParameter("@ContactTitle", cust.contactTitle));
com.Parameters.Add(new SqlParameter("@Address", cust.address));
com.Parameters.Add(new SqlParameter("@City", cust.city));
com.Parameters.Add(new SqlParameter("@PostalCode", cust.postalCode));
com.Parameters.Add(new SqlParameter("@Country", cust.country));
com.Parameters.Add(new SqlParameter("@Phone", cust.phone));
com.Parameters.Add(new SqlParameter("@Fax", cust.fax));
com.ExecuteNonQuery();
}
catch (Exception ex)
{
Console.WriteLine(ex);
}
return true;
}
AjaxComponentArtStyle.aspx
This page contains two update Panels. In the first update Panel, I have GridView
and in the second update Panel, I have a DetailsView
.
ASP.NET UpdatePanel
control enables you to build rich, client-centric Web applications. By using UpdatePanel
controls, you can refresh selected parts of the page instead of refreshing the whole page with a postback. This is referred to as performing a partial-page update. An ASP.NET Web page that contains a ScriptManager
control and one or more UpdatePanel
controls can automatically participate in partial-page updates, without custom client script.
ScriptManager
The ScriptManager
control manages client script for Microsoft ASP.NET AJAX pages. By default, the ScriptManager
control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial page rendering and Web-service calls.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="gvCustomers" runat="server" DataSourceID="odsCustomerList">
// Here we will add columns and template column fields
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
ObjectDataSource
The ASP.NET ObjectDataSource
control represents a middle-tier object with data retrieval and update capabilities.The ObjectDataSource
control acts as a data interface for data-bound controls such as the GridView
, FormView
or DetailsView
controls. You can use these controls to display and edit data from a middle-tier business object on an ASP.NET Web page.
Here I took two ObjectDataSource
to fill GridView
and for DetailsView
:
<asp:ObjectDataSource ID="odsCustomerList" runat="server" TypeName="Client"
SelectMethod="GetAllClient" DeleteMethod="ClientDelete">
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="odsCustomerDetail" runat="server" TypeName="Client"
DataObjectTypeName="Client" OnSelecting="OdsCustomerDetail_Selecting"
SelectMethod="ClientLoadByID" UpdateMethod="ClientUpdate">
</asp:ObjectDataSource>
ModalPopupExtender
It pops up a modal form on the screen with whatever you want to see, prompting the user to perform some action.
<ajax:ModalPopupExtender ID="mdlPopup" runat="server"
TargetControlID="btnShowPopup"
PopupControlID="pnlPopup" CancelControlID="btnClose"
BackgroundCssClass="modalBackground" />
DetailsView
The DetailsView
control displays a single record from a data source, where each data row represents a field in the record. It is often used in combination with a GridView
control for master/detail scenarios.
<asp:DetailsView ID="dvCustomerDetail" runat="server"
DataSourceID="odsCustomerDetail" CssClass="detailgrid"
GridLines="None" DefaultMode="Edit" AutoGenerateRows="false"
Visible="false" Width="100%">
<Fields>
// Here we will add Bound field and template field to edit a row
</Fields>
</asp:DetailsView>
Progress Bar
<ajax:UpdatePanelAnimationExtender ID="UPAnimation" runat="server"
TargetControlID="updatePanel">
<Animations>
<OnUpdating>
<Parallel duration="0">
<%----%>
<ScriptAction Script="onUpdating();" />
</Parallel>
</OnUpdating>
<OnUpdated>
<Parallel duration="0">
<%----%>
<ScriptAction Script="onUpdated();" />
</Parallel>
</OnUpdated>
</Animations>
</ajax:UpdatePanelAnimationExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="progress_bar"
style="display:none;">
<div class="container">
<div class="header"> Loading, please wait...</div>
<div class="body"><br />
<img src="Images/Indicater.gif" />
</div>
</div>
</asp:Panel>
Using the Code
To use this code, download the related zip file and create a database named AjaxDB
and run the given script in that. Then create a virtual directory for the application, and change your server in web.config as shown below:
<appSettings>
<add key="sqlCon"
value="data source=SARFARAZ-0923B2\SQLEXPRESS;initial catalog=AjaxDB;
integrated security=True"/>
</appSettings>
History
About the Author
Ashish Singh Parihar has done Master of Computer Application from IPS Academy Indore, Madhya Pradesh, India. He is currently working in a S/W company as a team lead at Indore for more than 1 year. He has over 2 years of experience. He has also done Bachelor Degree in BSc(PCM). He loves working with Microsoft Technology. He has stared with C, then C++, then moved to .NET 1.1 and then .NET 2.0. He is currently working with C#, ASP.NET, Enterprise application Block, Active Directory, WSS (Windows SharePoint Server), DotNetNuke. He loves Programming in C#. He is also a Microsoft Gold Certified Technology Specialist on Web Development. His hobbies include listening to music and developing his own small tools and utilities.