从前端的UI开始
MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分。
http://ASP.NET MVC抛弃了WebForm的一些特有的习惯,例如服务器端控件,ViewState这些东西,让Web回归原始的状态,Web是什么样子就是什么样子。而谈到一个Web Application的UI,涉及到的无非就是html、css、 js这些东西。
够用,让大家能真正能用起来,理解每一个过程。
文章提纲
1.概述
2.核心概念介绍
3.建立 注册/登录UI 步骤(静态页面àViewà功能)
01PART概述
一般来说,有两块功能是每个系统都要使用的。
一个是 用户注册/登录,一个是Table的CRUD
最近四篇文章的规划:
P.S. 顺便回答下园友的两个问题:
1.有园友表示没看到EF
原因是不想一下引入太多的概念,大概下篇文章开始涉及到EF.
2. 系列的文章数量和更新:
a. 数量:本系列文章会从一个主干开始,逐渐深入,初步规划30篇。初级10篇,中级10篇,综合项目实战10篇。
b. 更新:大概每周会更新一篇
02PART核心概念介绍
应用在Controller的Action上,以帮助选择适当的Action,
文中以 [HttpPost] 举例
ViewBag
在View和Controller中传递数据的一种方式 (类似的方式还有ViewData、TempData), 掌握通过ViewBag在View和Controller中传递数据
HtmlHelper
通过View的Html属性调用,文中以Html.BeginForm为例
03PART建立,注册/登录 UI详细步骤
建立 注册/登录 UI详细步骤本系列文章知识点和演示代码都以前一篇文章为基础,有问题可以回上一篇进行查找。本次我们将会新建用户 注册/登录 的两个页面。
打开Controllersà AccountController.cs ,仿照已有的Index, 添加两个Action, 如下图。
NOTE:添加这Action可以
a. 通过手打或粘贴复制,
b.右键,插入代码段(或ctrl k, x)àhttp://ASP.NET MVC4à mvcaction4(或mvcpostaction4), 如下面一组图。
根据上一步中添加的Action, 添加相关View: Login.cshtml, Register.cshtml
添加方法详见上篇文章,不再重复讲解。
这里再说明下View的存放位置约定。记住下面三句话:
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了。
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved