Server Intellect
 
Home   Asp.Net Tutorials   What's New   Newsletter   More Resources
Tutorial RSS
 
  Categories
Advanced Technologies
AJAX
Internet Browsers
Charts
Controls
Database
Email
Error Handling
File
Graphics
Website Navigation
Network
Performance
User Interface and Themes
Validation
Visual Web Developer
Web Services
XML
Suggest Tutorial


Navigator: Home - Tutorials - Database - Adding to Database using LINQ and AJAX in ASP.NET C#
Adding to Database using LINQ and AJAX in ASP.NET C#


ASP.NET Database Tutorial

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 - C# version.

This tutorial was created with Visual Studio 2008. If you are using 2005, Microsoft's LINQ Community Technology Preview release can be downloaded here.
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.

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!

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>

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!

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>

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

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>

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.

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 void butSubmit_Click(object sender, EventArgs e)
{
string connectionString = ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ToString();
DataClassesDataContext dataContext = new DataClassesDataContext(connectionString);

tblPeople tblP = new tblPeople();
tblP.name = txtName.Text;
tblP.city = txtCity.Text;
dataContext.tblPeoples.InsertOnSubmit(tblP);
dataContext.SubmitChanges();
DataGrid1.DataBind();
}

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.

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

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>

Looking for the VB version of this tutorial? Click Here

Looking for more ASP.NET Tutorials? Click Here!

Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!



 
  Developer Resources







Server Intellect Rocks