SIGN UP MEMBER LOGIN:    
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
share this article :
post comment
 

We need the connection settings and here where is the MVC architecture?

Posted by Arun Kumar Apr 07, 2012

Are you sure this one is done using MVC architecture fully.

Posted by Dorababu M Mar 15, 2012

In ASp.net MVC will paging feature work of gridview? If yes how we can handle the pageindexchnaging event.

Posted by Krishna Garad Dec 01, 2011
TOP LEADERS
TRENDING UP
Sponsored by
Become a Sponsor
MOST LIKED ARTICLE
TAG CLOUD
PREMIUM SPONSORS
  • Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
    Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites - Click Here!
LATEST JOBS
Sponsored by
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor
WHITEPAPERS AND BOOKS
Hosted By CBeyond Cloud Services TOP MEMBERSMOST VIEWEDTRENDING NOW PRIZESAWARDSBOOK REVIEWSSURVEY
PHOTOSTIPSCONSULTING TRAININGSTUDENTSMEMBERSMEDIA KIT SUGGEST AN IDEA
PRIVACY POLICY | TERMS & CONDITIONS | SITEMAP | CONTACT US | REPORT ABUSE © 2012 C# Corner. All contents are copyright of their authors.