ASP. net mvc 3.0 (14): create a data table in the MVC 3.0 instance Series

Overview

In ASP. in net MVC, Microsoft does not provide us with controls such as the gridview table, but as a web developer, table data display is one of the common tasks we face, starting from this section, we will step by step learn how to use the razor engine-Based ASP. the net MVC page displays tables like the gridview, and supports sorting, paging, filtering, and other functions in tables, so that we can better understand and use ASP. net MVC.

 

Introduction

In ASP. net webforms, Microsoft provides the gridview Control for us, and the control provides a quick and easy way to display datasets in a table, and provides sorting, paging, editing, delete and other additional features. We know that in ASP. NET webformsWhen a page is loaded, the gridview is automatically displayed as
<Table> element, so that we do not have to write any HTML Tag, only focus on retrieving data in the gridview and binding data.However, in ASP. NET
MVC applicationProgram, Developers must manually complete the view tag.Does the gridview table in webforms feel a headache.

From thisArticleAt the beginning, we will explore how to display table data in ASP. net mvc applications. Then we gradually expand to complete the complex functions in the table step by step., Including sorting, paging, filtering, and other enhanced features. 

Let's create an ASP. NET
MVC application to see how to display database records in tables on a web page.

Create a solution

Create a solution named mvc3.grid Based on the MVC 3.0 framework

Select a blank solution and the view engine select the razor engine. No test framework is generated.

Solution created

Create model

For the model, we can choose to use several custom analog data, or the database as the basic data.

In this case, we select LINQ to SQL as the data model.

Right-click the model folder to add a new project.

Create a data model named "LINQ to SQL"

After clicking Add, we can create a connection to the data in the server resource manager.

The design of the two tables "employee" and "department" in the example is provided.

Departmentid is an int-Type Auto-increasing column.

External mentid is a foreign key

Drag two tables. Here, we mainly use the two tables "employee" and "department" as examples. The two tables are connected using the foreign mentid as the foreign key.

Note: In the following example, only a few attributes are selected as examples.

 

Rebuild the solution to see if our project is successful.

Create a controller

First, we create a simple controller base class named basecontroller In order to reuse data.

The base class is responsible for communicating with the database.

This is only for the convenience of obtaining data in this example. I don't want to worry about other factors. Thank you.

TheCodeAs follows:

   Public     Class  Basecontroller: Controller
{
  Private  Modeldatacontext _ datacontext  =     Null  ;
 Protected  Modeldatacontext datacontext
{
  Get  
{
  If  (_ Datacontext  =     Null  )
_ Datacontext  =     New  Modeldatacontext ();

VaR options  =    New  Dataloadoptions ();
Options. loadwith  <  Employee  >  (P  =>  P. employeeno );
_ Datacontext. loadoptions  =  Options;

  Return  _ Datacontext;
}
}

} 

Create a controller named employeecontroller. The controller inherits from the basecontroller base class above.

After successful creation, the Controller provides the index method by default.

We can modify the modification so that the index method returns a list <employee>

The Code is as follows:

Public ClassEmployeecontroller: basecontroller
{
//
//Get:/employee/

PublicActionresult index ()
{
VaR list= This. Datacontext. employee;
ReturnView (list );
}

}
 

Create View

We create a view for the index method.

Select a view based on the razor engine, and select create strong view

The model class is for our LINQ to SQLCreate the generated employee

Click Add

Modify the view Code as follows:

 @ Model ienumerable  <  Mvc3  . Grid. Models. Employee  >  

@{
Viewbag. Title = "Index ";
Layout = "~ /Views/shared/_ layout. cshtml ";
}

  <  H2 >  Member List  </  H2  >  

  <  Table  Border  = "1"  Width  = "100%"  Style  = "Text-align: center; border-collapse: collapse"  >  
  < Tr  >   
  <  Th  >  No.  </  Th  >   
  <  Th  >  Name  </  Th  >  
  <  Th  >  Gender  </  Th  >   
  <  Th  >  Birthday  </  Th  >   
  < Th  >  Matching or not  </  Th  >  
  </  Tr  >   
@ Foreach (VAR item in Model)
{

  <  Tr  >   
  <  TD >  @ Item. employeeno  </  TD  >   
  <  TD  >  @ Item. employname  </  TD  >   
  <  TD  > @ Item. Sex  </  TD  >   
  <  TD  >  @ String. Format ("{0: Mm DD, yyyy}", item. Birthday)  </  TD  >   
  <  TD  > 
@ If (item. Marital = "1 ")
{
@: @ ("Yes ")
}
@ If (item. Marital! = "1 ")
{
@: @ ("No ")
}
  </  TD  >  
  </  Tr  >   

}

  </  Table  >    

Modify the default homepage of Global. asax to "employee ".

Click to run

As you can see, a standard table has been completed so far.

 

Summary

The table is presented in the form of table. tr generated based on the number of rows in the list set during list traversal. Table. TD is generated based on the attribute of each item in the list.

Next Preview

At the beginning of the next section, we will add the sorting function to the basic table header. What should we do?

Author:Memories of lost youth
Source:Http://www.cnblogs.com/lukun/

The copyright of this article is shared by the author and the blog. You are welcome to repost this article. However, you must keep this statement without the author's consent and provide the original article connection clearly on the article page. If you have any questions, you can useHttp://www.cnblogs.com/lukun/ Thank you very much for contacting me.