Nevron Diagram
ARTICLE

Bind data on Gridview using MVC

Posted by Manish Singh Articles | ASP.NET MVC with C# November 29, 2011
Tags: ASP.NET MVC, MVC, MVC article, mvc tutorials
This is a simple ASP.NET MVC application that shows bound data on a Gridview through a database. This is simple application for beginners to learn how to create the database in MVC ASP.NET application and bind the data on Gridview.
Reader Level:

Introduction : This is a simple ASP.NET MVC application that shows bound data on a Gridview through a database. This is simple application for beginners to learn how to create the database in MVC ASP.NET application and bind the data on Gridview. The MVC (Model-View-Controller) architecture is a way of decomposing an application into three parts the model, the view and the controller. It was originally applied in the graphical userinteraction model of input, processing and output. A model represents an application data and contains the logic for accessing and manipulating that data. The view is responsible for rendering the state of the model. The controller is responsible for intercepting and translating user input into actions to be performed by the model. Some simple steps to bind the data on a Gridview in a MVC ASP.NET that is given below.

Step 1:

  • Open Visual Studio 2010.
  • Click file ->New->Projects.
  • Add MVC ASP.NET 2 Empty Web application

start.gif

Step 2 :

  • Right Click on Solution Explorer add a Folder.
  • Right Click on Solution Explorer->Add->Folder.
  • Name of folder "App_Data".

addfolder.gif

Step 3 :

  • In a App_Data folder add SQL Server Database.
  • Right Click on App_Data Folder->Add New Item-> add "Sql Server Database" class.

sql.gif

Step 4 : After adding the Sql Server Database two file create in folder.

  • First is "Ram.mdf".
  • Second is "Ram_log.ldf".

Step 5 :

  • Right Click of "Ram.mdf"->Add Table Schema.Set the fields "Name,Id,Salary,Address".Set table name "Employee".
server.gif

opentable.gif

set-table-name.gif

Step 6 : If you want to set the Primary key and Relationship.

  • Right click on "ID" Fields and set Primary key.
  • In same way set Relationship.
  • Close and Save the name of the table just like a "Person".

primarykey-and-schema.gif

Step 7 :

  • Right click on Employee and open "Show table data".
  • Insert data from a table.

enter-data.gif

Step 8 :

  • Open a "index.aspx" page drag and drop a Gridview.
  • Bind the data on the gridview.

output.gif

Code:

<%@ Page Language="C#"  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
</head>
<body style="height: 106px" bgcolor="#66ffcc">
    <form id="form1" runat="server">
    <div style="background-color: #CC6699">
       <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
           DataSourceID="SqlDataSource1">
           <Columns>
               <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
               <asp:BoundField DataField="Id" HeaderText="Id" SortExpression="Id" />
               <asp:BoundField DataField="Address" HeaderText="Address"
                   SortExpression="Address" />
               <asp:BoundField DataField="salary" HeaderText="salary"
                   SortExpression="salary" />
           </Columns>
       </asp:GridView>
       <asp:SqlDataSource ID="SqlDataSource1" runat="server"
           ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
           SelectCommand="SELECT [Name], [Id], [Address], [salary] FROM [Employee]">
       </asp:SqlDataSource>
   </tr>
    </div>
    </form>
</body>
</html>

Step 9 : Press crtl+f5 run the program.

Output:

gridview.gif

Login to add your contents and source code to this article
This Feature is Sponsored By .NET Charting component with full set of charting and gauge types
comments
COMMENT USING
PREMIUM SPONSORS
Infragistics is experts in technology and design, and passionate about helping you build highly performant and stylish applications that solve problems, deliver inspiration, and maximize results.
Nevron Diagram
TRENDING UP
MOST LIKED ARTICLE
HOT KEYWORDS
SPONSORED BY
Nevron Chart
WHITEPAPERS AND BOOKS
Hosted By CBeyond Cloud Services MVPs MOST VIEWEDLEGENDSNOW PRIZESAWARDSREVIEWSSURVEYCERTIFICATIONSDOWNLOADS
PRIVACY POLICY | TERMS & CONDITIONS | SITEMAP | CONTACT US | ABOUT US | REPORT ABUSE
©2013 C# Corner. All contents are copyright of their authors.