MVC5 + EF6 Getting Started complete tutorial two

Original: MVC5 + EF6 Get started full tutorial two

Start from the front-end UI

The MVC separation is good, the development sequence is not special requirements, the first development of which part can be, this time we mainly explain the front-end UI part.

ASP. NET MVC discards some of the WebForm's unique habits, such as server-side controls, viewstate these things, letting the web go back to its original state, and what the web looks like. When it comes to a Web application UI, it's all about HTML, CSS, JS.

article outline

• Overview
• Important Concept Introduction
• Create a registration/Login UI Step (Static page à View à function)

Overview

In general, there are two pieces of functionality that are used by every system.

One is user registration/login, one is the crud of table

Planning for the last four articles:

1. This time will do a simple registration/login UI
2. Join EF to complete registration/login functions
3. Take the crud of table as an example and start to explain EF (Code first mode)
4. Add a page style with bootstrap, add additional functionality, and extend the previous code into a development-based framework

P.s. By the way to answer the two questions of the park friend:

1. A friend of the park said he didn't see EF.

The reason is not to introduce too many concepts, probably the next article began to relate to EF.

2. Number of articles and updates for series:

A. Quantity: This series of articles will start from a trunk, gradually in-depth, the initial planning of 30 articles. Elementary 10, intermediate 10, comprehensive project combat 10.

B. Update: A weekly update is likely

Important Concept Introduction

1. Storage location Conventions for view
2. Action Method Selector

Apply to the Controller's action to help select the appropriate action,

Examples of [httppost] in this paper

1. ViewBag

A way of passing data in the view and controller (in a similar way, ViewData, TempData), mastering the data passing through the viewbag in the View and controller

1. HtmlHelper

Using the view's HTML property call, take Html.BeginForm as an example

Establish registration/Login UI detailed steps

1. Open the last project, create a new two action

This series of article Knowledge points and demo code are based on a previous article, there is a problem can go back to the previous article to find. This time we will create a new user registration/login two pages.

Open controllersà AccountController.cs, follow the existing index, add two action, such as.

Note: Add this action to

A. by hand or paste copy,

B. Right-click, insert code snippet (or CTRL k, x) à ASP. MVC4 à Mvcaction4 (or Mvcpostaction4), as shown in the following photo.

1. Add an action corresponding view

Based on the action added in the previous step, add the relevant View:Login.cshtml, register.cshtml

Add the method described in the previous article, no longer repeat the explanation.

Here again to explain the location of the view of the Convention. Remember the following three words:

2. All views are placed in the View folder
4. Views folder creates a series of subfolders with the same name as the controller
5. cshtml files with the same name as the action (corresponding view file) are stored in each sub-folder
   1. Completing the Login interface UI

   1.1 We take login.cshtml as a static HTML page to complete the UI of the login interface

   You can think of cshtml as the original ASPX and HTML blends:

   Using the advantages of ASPX, convenient and background interaction, using the advantages of HTML, Syntax concise (htmlhelper)

   A. Copy a login interface to bootstrap HTML

   http://getbootstrap.com/css/#forms

   B. Put it in Login.cshtml's body div

   Note In order to reduce distractions, we do not add any style, the project all finished before the page beautification.

   Right-click Browser View page source and find out more about the VS Browser link scrap code.

   We'll disable it.

   Open Web. config to add the following code, and then go to the browser to view the source code, you can see the pure HTML.

   1. Passing data from the front end to the controller

   Complete a login job:

   fill out the form à controller gets form data à further operations (for example, to go to a database, and then get the user identity to jump to the specified page)

   We're going to finish this one. Get data from the controller, we'll combine the next chapter with EF to talk about the database operation.

   OK, now we're going to modify the login.cshtml.

   Login.cshtml before the modification:

   1. First we go to AccountController.cs to create a login with the same name as the action to accept the form submitted data.

   Note that a [HttpPost] is added to the newly added action to indicate that the action will only accept HTTP POST requests. ASP. NET MVC provides the action Method Selector, HttpPost is one of them. (There will be a special article on these selector in the following article)

   Typical application scenarios for HttpPost properties:

   When it comes to the need to accept client window data, create an action to receive the HTTP GET request for displaying the interface and providing the user with the data;

   Another action with the same name applies the [HttpPost] property to receive data from the user and complete the corresponding function.

   1. Open the login.cshtml, modify the form, and prepare for the backend to receive the data.

   First, add two properties to the form tag, action, method. For the method in form (the default is get), get is typically used for simple read data operations and post for write data operations.

   Under the INPUT element, add the Name property, set to the same value as the ID.

   Note: The server side needs to use the name to fetch the value.

   2. open AccountController.cs, modify [HttpPost] Login action to receive data

In order to differentiate between logins, we pass a login state through ViewBag past.

The front desk also adds a text ID.

Login effect:

Optimization: Using the first HtmlHelper

Because the content of this is relatively simple, there is no need to use the HtmlHelper

We made a little improvement on the form in login.cshtml.

For example, the position of the action is fixed, so that if the deployment changes, it is possible that the address is not available (such as in the IIS root directory and the virtual directory is different)

Using HtmlHelper to dynamically compute the routing address is one of the methods.

Add the following code and put the contents of the form into the {}.

    @ using (html.beginform ("Login", "account", formmethod. Post)) {}

Run, to view the source code in the browser, you can see that the generated source is the same as the original.

Similarly, complete the Registration interface UI ( similar login interface, steps slightly)

Summary

Through the development of a most basic login interface, describes how to get form data from the controller.

Because this example is relatively simple, you do not need to use the HtmlHelper

The next article will automatically generate the database through model, complete the function.

This time source: Http://files.cnblogs.com/miro/MVCDemo%401021.rar

You are welcome to comment on the question:)

MVC5 + EF6 Getting Started complete tutorial two