Enabled Ajax Data Application With LINQ in VB.NET

Here you will learn how we can use UpdatePanel control to enable asynchronous postbacks on a page.
  • 2667

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.
ASP-page1.gif
 

Step : 2 Solution Explorer -> Right -> Click-> Add New Item

  • Select WebForm.
webforms.gif
 

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 :

table23.gif

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.

sql1.gif
 

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.

sql2.gif

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.

  • Drag UpDatePanel,ScriptManager control.

  • Write a code.

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.   

datasource.gif

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.