Mvc5+ef6 Getting Started complete tutorial Five

The previous article introduced the EF implementation crud and some basic HTML Helpers.

This time we will make some modifications and refactoring of the previous content:

1. Introduce bootstrap style, build several kinds of common template pages, and make some modifications to the UI.
2. Category Introduction HTML Helpers
3. Improve some features

article outline

• Theoretical basis
• UI transformation Detailed steps
• Summarize

theoretical basis--Brief introduction of Bootstrap

The following excerpt from Baidu Encyclopedia:

Bootstrap is an open source toolkit for front-end development launched by Twitter. It was developed by Twitter's designer Mark Otto and Jacob Thornton, and is a css/html framework. The detailed steps later describe how to use it.

theoretical Basis--Html Helpers

Mainly divided into the input class and the display class.

Input class:

TextArea, TextBox

Password

Hidden

DropDownList

ListBox (similar to DropDownList, survival can be multi-selectable drop-down list box)

RadioButton

CheckBox

Display class:

Display Class helper can generate links to other resources in your application, or you can build reusable UI fragments called partial views.

ActionLink and RouteLink

URL (Url.action, url.content)

Partial and RenderPartial

Action and Renderaction

I do not introduce these specific functions, I believe that the garden friends can be guessed according to the name of the most generated HTML tags. We recommend that you create a new blank view, put all the helpers in, generate the page, right-click to view the source code, so that you can clearly understand the corresponding relationship between these tags and HTML.

Note

There are two helper instructions:

Html. ActionLink generates a <a href= "..." ></a> tags

url.action returns only one URL.
For example:
@ " LinkText ", "someaction" " Somecontroller ",new {id = Span style= "color: #a31515;" > "123" },null
build result:

<a href= "/somecontroller/someaction/123" >< Span style= "color:black;" >linktext </a>

@ url.action ( "Someaction", "Somecontroller", new {id = "123" }, null)
Build Result:
/somecontroller/someaction/123

In addition, partial and action may be unfamiliar, as described later in this article, which describes the partial view (similar to the user control in the original Web form).

I do not know if you remember our previous articles used in the helper, and this introduction is a little different.

For example

These helpers are characterized by the addition of the name to the for, which are called strongly typed helper methods.

When extracting values from view data that are not appropriate for string literals, you can use a strongly typed helper method to specify the model properties to render by passing a lambda expression. The model type of the expression must be the same as the strong type specified for view.

The primary strongly-typed helper method.

Html.textboxfor ();

Html.textareafor ();

Html.dropdownlistfor ();

Html.checkboxfor ();

Html.radiobuttonfor ();

Html.listboxfor ();

Html.passwordfor ();

Html.hiddenfor ();

Html.labelfor ();

Html.editorfor ();

Html.displayfor ();

Html.displaytextfor ();

Html.validtionmessagefor ()

These are mostly in front of the ordinary helper correspondence, you can experiment with their own.

UI Transformation Detailed steps

Let's make some modifications to the previous interface.

Download Related documents

Open Bootstrap's official Site

http://getbootstrap.com/

The current version is v3.3.0, we download the Source code directly

Post-unzip file structure:

All we actually need is put in the Dist folder, expand the Dist folder

Add file to project

We add a few new folders to the project OpenSource, Content, fonts

OpenSource we put some third-party source code, content in the actual use of CSS files, fonts put font files.

The unpacked folder bootstrap-3.3.0 is put into the opensource folder, which is convenient for later viewing.

will bootstrap-3.3.0 à bootstrap.css and Bootstrap-theme.css in Dist are placed in the Content folder.

The Fonts folder is not used first.

The documentation is ready, so let's start using bootstrap in a good project.

Open views à Account à login.cshtml, add a line under the title tag

<linkhref= "~/content/bootstrap.css"rel= "stylesheet"/>

Open this page to view and find that the style has been applied.

Let's start the UI makeover for this project.

Define Template page

Define two types of templates corresponding to the user (Main page), the administrator

Note The style of registering the login page is rarely shared, so there is no template page.

Right-click the Views folder and create a new folder shared. This new folder is used primarily to put together template files.

Right-click shared folder, new layout page _layout.cshtml and _layoutadmin.cshtml

We have finished these two layout pages in the sample style provided to us in the bootstrap.

The contents of these two layout pages are not covered in detail and can be viewed in my source code.

Here are a few notes:

@RenderBody (): View with this layout will display their content here.

To use this layout, for example, add layout= "~views/shared/_layout.cshtml" to the view;

Note

You can create a new view page under the Views folder, named _viewstart.cshtml, to write this part uniformly into this file (such as) so that the view of the application Layout page can omit this part of the content. In addition, the _viewstart.cshtml can be nested, and the view using the layout page automatically applies the _viewstart.cshtml below the nearest folder.

We're building two new Controller:mvcdemocontroller and AdminController.cs.

Create a new view based on the default index method, applying _layout.cshtml and _layoutadmin.cshtml respectively

User interface

Administrator interface

Now we're ready to do the template page. We will then beautify the login box:

Now that we've done the UI makeover, we've done three things:

Introduce bootstrap style; make common layout page; Beautify landing page

About the page UI design is not detailed, you can directly see the source code.

Summary

This time we mainly to the previous content did some improvement, did three pages to illustrate the situation.

You need to master

1. Basic use of Bootstrap
2. Use of layout pages
3. A common helper is to have a heart.

All right, here we go today.

Welcome everyone to comment, let the next article better:)

Mvc5+ef6 Getting Started complete tutorial Five