Introduction : Ajax Enabled Data
Application help we create basic user interface for creating, managing, and
deleting lists. All the insert, update, delete,sort and paging operation are
inside UpdatePanel control that uses Ajax. We can use UpdatePanel control to
enable asynchronous postbacks on a page.
Following task are illustrated for creation
of Ajax Enabled Data Application.
- Create SQL database and add data.
- Add LinqDataSource control.
- Add LINQ to SQL Classes.
- Use ListView control to display, edit,delete, data.
Step : 1 Open Visual Studio -> File -> WebSite.
- Select ASP.NET WebSite.
- Default.aspx page open.
Step : 2 Solution
Explorer -> Right -> Click-> Add New Item
Step : 3 Create New SQL Server Database.
- Solution Explorer -> Add New Item.
- SQL Database.
Step : 4 Create a Schema and Data for
the Database.
- Solution Explorer -> App_Data folder and double click
- Right-Click in Table folder and then click Add New Table.
Table :
Step : 5 Right-Click the row and click
Set Primary Key.
- Open the Identity Specification section and set (Is Identity) to yes.
- Server Explorer -> Table -> Right - Click -> Show Table Data.
- Add record to the table.
Creating Data
Access Controls.
Step : 6 Solution
Explorer ->Right-Click-> Add ASP.NET Folder.
- App_Code-> Right-Click-> Add New Item.
- Select LINQ to SQL Classes
- Server Explorer drag Table.
Creating a LinqDataSource Control.
Step : 7 Switch Default.aspx page.
- Select Design View option.
- Drag LinqDataSource Control.
- Selct Context object -> TaskDataContext.
- LinqDataSource Task menu.
- Select Enable Delete, Enable Insert, Enable Update.
Step : 8 Drag and Drop Data Source
Controls.
- ListView, DropDownList control.
- Write a code.
Code :
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<span id ="filter">
current list filter:
<asp:DropDownList ID="DropDownList1"
AutoPostBack = "true" runat="server">
<asp:ListItem Text = "active" Value = "False" />
<asp:ListItem Text = "complete" Value = "True" />
</asp:DropDownList>
</span>
<hr id = "separator" />
<asp:LinqDataSource ID="LinqDataSource1" runat="server"
ContextTypeName="DataClassesDataContext" EntityTypeName="" TableName="Table1s">
</asp:LinqDataSource>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ListView ID="ListView1" runat="server" DataSourceID="LinqDataSource1">
</SelectedItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
<div>
</div>
</form>
</body>
</html>
Step : 9 Add Ajax
Functionality to the Page.
Code :
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
Step : 10
Press F5 and run.
