Articles: 843 | Categories: 148   
   
   
Home Articles Contact Us
 
 
 
 
Adding to Database using LINQ and AJAX in ASP.NET VB (0 Comments)
Admin: Posted Date: April 4, 2010

This tutorial will show how we can use Microsoft's new LINQ to add new records to a database, and how we can implement AJAX to make the application more dynamic and easier to use. The example was created with Visual Studio .NET 2008 - VB version.

Adding to Database using LINQ and AJAX in ASP.NET VB


This tutorial will show how we can use Microsoft's new LINQ to add new records to a database, and how we can implement AJAX to make the application more dynamic and easier to use. The example was created with Visual Studio .NET 2008 - VB version.

If you have Visual Studio.NET 2008, then LINQ capabilities are built-in.
We are going to create a sample database for this tutorial, and then display the contents in a DataGrid. We will also create TextBoxes and a Submit button to allow adding of new records to the database. First, we start by creating a new Web Project in Visual Studio - if 2005, we will need to choose the LINQ Template.

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

Once we have our project opened up in Visual Studio, we will want to add a database - right-click the project in Solution Explorer and choose Add New Item, then choose SQL Server Database. If you are asked to place in the App_Data folder, choose Yes. Now we can goto Server Explorer and add a new table. We will create a very simple table of people, with three columns - id, name and city. The id column will be the Primary Key and identifier. Now save the table
Next, right-click the project again and choose Add New Item > LINQ to SQL Classes. If you are asked to place in the App_Code folder, click Yes. We are now faced with a design view for our DataContext Class. All we need to do here is to drag and drop from the Server Explorer the tables and stored procedures we will be using. This is for LINQ to build the relevant methods that we will be using to interact with our data. So we drag our table (tblPeople) from Server Explorer to the design view and save. Saving changes is very important. After we have saved, we can add some sample data to our database.

Now we can start building. We want to add a LinqDataSource to our ASPX page, and it should look something like this:


 

 

<form id="form1" runat="server">
<asp:LinqDataSource ID="LinqDataSource1" runat="server">
</asp:LinqDataSource>
</form>

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

Next, we can click the Smart Tag of the DataSource in the design view and choose to Configure Data Source. We choose from the DropDown the Data Context we just created a moment ago, and then move on to select the data we want to work with. For this example, we will select all (*). When we are done, we click Finish. Notice now that we get the option to Enable Delete, Insert and Update in the Smart Tag for the Data Source. We will choose to Enable Insert, which will generate the method for us.
We should now have something like this:

 

<form id="form1" runat="server">
<asp:LinqDataSource ID="LinqDataSource1" runat="server"
ContextTypeName="DataClassesDataContext" EnableInsert="True"
TableName="tblPeoples">
</asp:LinqDataSource>
</form>

Now what we need is something to display this data. We are going to use a DataGrid, so let's add a DataGrid Control and set it to use the LinqDataSource. We will also add two TextBoxes and a Button to add new records to the database. Our ASPX page now looks like this:

 

<form id="form1" runat="server">
<table>
<tr><td>Name:</td><td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td></tr>
<tr><td>City:</td><td><asp:TextBox ID="txtCity" runat="server"></asp:TextBox></td></tr>
<tr><td colspan="2"><asp:Button ID="butSubmit" runat="server" Text="Add to DB"
onclick="butSubmit_Click" /></td></tr>
</table><br />
<asp:DataGrid ID="DataGrid1" runat="server" DataSourceID="LinqDataSource1"
Width="236px"></asp:DataGrid>
<br />
<asp:LinqDataSource ID="LinqDataSource1" runat="server"
ContextTypeName="DataClassesDataContext" EnableInsert="True"
TableName="tblPeoples">
</asp:LinqDataSource>
</form>

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

Notice that we have linked up the DataGrid to our LinqDataSource, and also added an event handler to the Submit Button. If we run this right now, the DataGrid will display the data from the database, but there would be no functionality. Let's add some functionality. The following would be the code-behind for the button onclick event:

 

Protected Sub butSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim connectionString As String = ConfigurationManager.ConnectionStrings("DatabaseConnectionString").ToString()
Dim dataContext As New DataClassesDataContext(connectionString)

Dim tblP As New tblPeople()
tblP.name = txtName.Text
tblP.city = txtCity.Text
dataContext.tblPeoples.InsertOnSubmit(tblP)
dataContext.SubmitChanges()
DataGrid1.DataBind()
End Sub

This block of code is the LINQ functionality that has been added to ASP.NET 3.5

The first two lines get the connection string to the database from Web.config, so we can access the database. The connection string was added automatically when we created our DataSource. The third line instantiates a new instance of the table class that LINQ created for us, the columns of the table become attributes that we can reference through our instance of the table, and thus set with new data. The InsertOnSubmit line says that we want to commit this instance to the database when Submit is called. Then on the next line we call SubmitChanges to commit the changes to the database. Then finally, we update the DataGrid to display the changes.

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

Finally, to make the page more dynamic, we can add AJAX to it by adding a ScriptManager and an UpdatePanel. This is only for Visual Studio 2008. It can be done in 2005, but you need to install the AJAX Extensions for it. Our Web Application will now commit new records to the database quicker and not reload the whole page when the button is clicked. Our ASPX page will now look something like this:

 

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="butSubmit" EventName="Click" />
</Triggers>

<ContentTemplate>
<table>
<tr><td>Name:</td><td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td></tr>
<tr><td>City:</td><td><asp:TextBox ID="txtCity" runat="server"></asp:TextBox></td></tr>
<tr><td colspan="2"><asp:Button ID="butSubmit" runat="server" Text="Add to DB"
onclick="butSubmit_Click" /></td></tr>
</table><br />
<asp:DataGrid ID="DataGrid1" runat="server" DataSourceID="LinqDataSource1"
Width="236px"></asp:DataGrid>
<br />
<asp:LinqDataSource ID="LinqDataSource1" runat="server"
ContextTypeName="DataClassesDataContext" EnableInsert="True"
TableName="tblPeoples">
</asp:LinqDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</form>

 

 

 
 
Add a Comment:
 
(You must be signed in to comment on an article. Not a member? Click here to register)
   
Title:

Comments: