프런트 엔드 UI로 시작

MVC의 분리가 더 좋고 개발 순서에 특별한 요구 사항이 없으며 어느 부분을 먼저 개발하든 상관 없습니다. 이번에는 Front-end UI 부분을 중심으로 설명하겠습니다.

ASP.NET MVC는 서버 측 컨트롤 및 ViewState와 같은 WebForm의 일부 고유한 습관을 포기하고 웹을 원래 상태로 되돌립니다. 웹 애플리케이션의 UI에 관해서는 html, css 및 js 외에는 아무것도 관련되지 않습니다.

기사 개요

개요
중요한 개념 소개
등록/로그인 UI 단계 생성(정적 페이지 à 보기 à 기능)

개요

일반적으로 모든 시스템에서 사용하는 두 가지 기능이 있습니다.

하나는 사용자 등록/로그인이고 다른 하나는 테이블의 CRUD입니다.

마지막 4개 기사 계획:

이번에는 간단한 회원가입/로그인 UI를 먼저 해보도록 하겠습니다.
EF와 결합하여 등록/로그인 기능 완성
Table의 CRUD를 예로 들어 EF(code first method)에 대해 설명
부트스트랩을 사용하여 페이지 스타일을 추가하고, 다른 기능을 보완하고, 이전 코드를 개발을 위한 기본 프레임워크로 확장합니다.

PS 그런데 정원 친구의 두 가지 질문에 답하십시오.

1. 일부 정원사는 EF를 보지 못했다고 말했습니다.

그 이유는 한 번에 너무 많은 개념을 소개하고 싶지 않기 때문입니다. 아마도 다음 기사에서는 EF와 관련되기 시작할 것입니다.

2. 시리즈의 기사 및 업데이트 수:

수량: 이 연재 기사는 본문으로 시작하여 점차 심화되며 처음에는 30개의 기사를 계획합니다. 초급 10문항, 중급 10문항, 종합 프로젝트 실습 10문항이 있습니다.

b.업데이트 : 매주 1회 정도 업데이트

중요한 개념 소개

저장 위치 규칙 보기
작업 방법 선택기

컨트롤러의 액션에 적용되어 적절한 액션을 선택하는데 도움을 주며,

텍스트에서 [HttpPost]를 예로 들어 보겠습니다.

뷰백

View 및 Controller에서 데이터를 전송하는 방법(비슷한 방법에는 ViewData, TempData 포함), ViewBag를 통해 View 및 Controller에서 데이터 전송 마스터

HtmlHelper

View의 Html 특성을 통해 호출되는 텍스트는 Html.BeginForm을 예로 사용합니다.

등록/로그인 UI 구축을 위한 세부 단계

打开上次项目，新建两个Action

本系列文章知识点和演示代码都以前一篇文章为基础，有问题可以回上一篇进行查找。本次我们将会新建用户注册/登录的两个页面。

打开Controllersà AccountController.cs ，仿照已有的Index, 添加两个Action, 如下图。

NOTE：添加这Action可以

a. 通过手打或粘贴复制,如上图

b.右键，插入代码段（或ctrl k, x）àASP.NET MVC4à mvcaction4(或mvcpostaction4), 如下面一组图。

添加Action相应的View

根据上一步中添加的Action, 添加相关View: Login.cshtml, Register.cshtml

添加方法详见上篇文章，不再重复讲解。

这里再说明下View的存放位置约定。记住下面三句话：

所有的View都放在Views文件夹
Views文件夹创建了一系列与Controller同名的子文件夹
各子文件夹内存放与Action同名的cshtml文件（对应的View文件）
1. 完成登录界面UI
1.1 我们把Login.cshtml就当做一个静态html页面，完成登录界面的UI
大家可以把cshtml理解成原来的aspx和html的混合体：
利用了aspx的优点，方便和后台交互；利用了html的优点，语法简洁（HtmlHelper）
a. 到bootstrap上复制个登录界面html
http://getbootstrap.com/css/#forms
b. 放到Login.cshtml 的body的div中
NOTE为了减少干扰项，我们不加任何样式, 项目全部结束后再进行页面美化。
右键浏览器 View page source, 发现多了VS Browser Link废代码。
我们将它禁用掉。
打开web.config添加如下代码，再去浏览器查看源代码，可以看到纯净的html了。
1. 将前端的数据传递到Controller中去
完成一个登录工作：
填写表单 à Controller获取表单数据 à 进一步操作（例如去数据库比对，通过后获取用户身份跳转到指定页面）
我们这次先完成到Controller获取数据，对数据库的操作我们下一章和EF结合起来一起讲。
OK, 现在我们对Login.cshtml进行修改。
修改前的Login.cshtml：
1. 首先我们先去AccountController.cs中创建一个Login同名的Action来接受表单提交的数据。
注意新添加的Action中增加了一个[HttpPost] ，表示这个Action只会接受http post请求。ASP.NET MVC提供了Action Method Selector, HttpPost就是其中之一。（后续文章中会专门有一篇讲解这些Selector）
HttpPost属性典型的应用场景：
涉及到需要接受客户端窗口数据的时候，创建一个用于接收HTTP Get请求的Action, 用于显示界面, 提供给用户填写数据;
另一个同名Action则应用[HttpPost]属性，用于接收用户发来的数据，完成对应的功能。
1. 打开Login.cshtml, 修改form，为后端接收数据做准备。
先在form标签内增加两个属性action, method。对于form中的method（默认是get），通常情况下, get用于简单的读取数据操作，post用于写数据操作。
在input元素下添加name属性，设置成和id一样的值。
NOTE: 服务器端需要通过name来取值。
2. 打开AccountController.cs，修改[HttpPost]的Login Action用于接收数据