目的:1 学习mvc+ef

   2  写下日记也是对自己的督促

从前端的UI开始

MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分。

ASP.NET MVC抛弃了WebForm的一些特有的习惯,例如服务器端控件,ViewState这些东西,让Web回归原始的状态,Web是什么样子就是什么样子。而谈到一个Web Application的UI,涉及到的无非就是html、css、 js这些东西。

文章提纲

  • 概述
  • 重要概念介绍
  • 建立 注册/登录UI 步骤(静态页面àViewà功能)

概述

一般来说,有两块功能是每个系统都要使用的。

一个是 用户注册/登录,一个是Table的CRUD

最近四篇文章的规划:

  1. 本次会先做简单的注册/登录UI
  2. 结合EF完成注册/登录的功能
  3. 以Table的CRUD为例子,展开讲解EF (code first方式)
  4. 借助bootstrap加入页面样式,补充其他功能,将前面的代码扩展成一个开发的基础框架

P.S. 顺便回答下园友的两个问题:

1.有园友表示没看到EF

原因是不想一下引入太多的概念,大概下篇文章开始涉及到EF.

2. 系列的文章数量和更新:

a. 数量:本系列文章会从一个主干开始,逐渐深入,初步规划30篇。初级10篇,中级10篇,综合项目实战10篇。

b. 更新:大概每周会更新一篇

重要概念介绍

  1. View的存放位置约定
  2. Action Method Selector

应用在Controller的Action上,以帮助选择适当的Action,

文中以 [HttpPost] 举例

  1. ViewBag

在View和Controller中传递数据的一种方式 (类似的方式还有ViewData、TempData), 掌握通过ViewBag在View和Controller中传递数据

  1. HtmlHelper

通过View的Html属性调用,文中以Html.BeginForm为例

建立 注册/登录 UI详细步骤

  1. 打开上次项目,新建两个Action

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

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

NOTE: 添加这Action可以

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

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

  1. 添加Action相应的View

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

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

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

  1. 所有的View都放在Views文件夹
  2. Views文件夹创建了一系列与Controller同名的子文件夹
  3. 各子文件夹内存放与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(有很多现成的html直接拿)

    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用于接收数据

为了区分登录前后,我们通过ViewBag传递一个登录状态过去。

前台同样加个文字标识。

登录效果:

优化:使用第一个HtmlHelper

因为这次的内容比较简单,还没必要用到HtmlHelper

我们对Login.cshtml中的form做一点改良。

如下图,action的位置是固定的,这样的话部署发生变化时有可能地址会不可用(如放在IIS根目录下和虚拟目录下是不同的)

使用HtmlHelper动态计算路由地址就是其中的一种方法。

添加下面一句代码,将form中内容放到 {} 中去即可

@using (Html.BeginForm("login", "Account", FormMethod.Post)) { }

运行,到浏览器中查看源代码,可以看到生成的源代码和原来一样。

同样的,完成注册界面UI(类似登录界面,步骤略)

总结

通过开发了一个最基本的登录界面,介绍了如何从Controller中获取表单数据。

因本次示例比较简单,还不需要用到HtmlHelper

下篇文章会通过model自动生成数据库,完成整个功能。

本次源码:http://files.cnblogs.com/miro/MVCDemo%401021.rar

今天代码(上面链接失效后下载这个):http://pan.baidu.com/s/1slNr3Gh

原著:五色令人目盲   MVC5+EF6 入门完整教程2 :从前端UI开始

下页小希学MVC5+EF6.2 学习记录二的更多相关文章

  1. 下页小希学MVC5+EF6.2 学习记录三

      目的:1 学习mvc+ef 2  写下日记也是对自己的督促 期待已久的EF终于来了. 学完本篇文章,你将会掌握基于EF数据模型的完整开发流程. 本次将会完成EF数据模型的搭建和使用. 基于这个模型 ...

  2. 下页小希学MVC5+EF6.2 学习记录一

    目的:1 学习mvc+ef 2  写下日记也是对自己的督促 第0课 从0开始 ASP.NET MVC开发模式和传统的WebForm开发模式相比,增加了很多"约定". 直接讲这些 & ...

  3. Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客

    ==他的博客应该不错,没有细看 Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客 http://blog.csdn.net/u012706811/article/det ...

  4. JavaScript学习记录二

    title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  5. Material Calendar View 学习记录(二)

    Material Calendar View 学习记录(二) github link: material-calendarview; 在学习记录一中简单翻译了该开源项目的README.md文档.接下来 ...

  6. 2.VUE前端框架学习记录二

    VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...

  7. 一个好的mvc5+ef6的学习地址

    链接地址: MVC5 + EF6 入门完整教程  感谢这位博主的无私奉献 文章目录列表:http://www.cnblogs.com/miro/p/3777960.html#3673688

  8. MVC5 + EF6 入门完整教程二

    从前端的UI开始 MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分. ASP.NET MVC抛弃了WebForm的一些特有的习惯,例如服务器端控件,Vie ...

  9. 小菜学Chromium之OpenGL学习之二

    在这个教程里,我们一起来玩第一个OpenGL程序.它将显示一个空的OpenGL窗口,可以在窗口和全屏模式下切换,按ESC退出.它是我们以后应用程序的框架. 在CodeBlock里创建一个新的GLUT ...

随机推荐

  1. python列表元组 魔法方法

    1.元祖 count()    统计某个字符串的出现次数 tuple.count('22')    返回一个整数 index()    获取某个值出现的位置 2.列表 字符串可以直接转换列表    l ...

  2. Activemq、Rabbitmq、Rocketmq、Kafka的对比

    综上所述,各种对比之后,我个人倾向于是: 一般的业务系统要引入MQ,最早大家都用ActiveMQ,但是现在确实大家用的不多了,没经过大规模吞吐量场景的验证,社区也不是很活跃,所以大家还是算了吧,我个人 ...

  3. hyper-V pcie直通

    横河VI702失败. 显卡没有提示失败,但分配给的那个虚拟机中 检测不到独占的显卡,不知道那里出错了. 参考教程22#:[网络] 既然最新hyper V也支持pcie直通.是不是可以扔掉esxi了?

  4. mysql any和all的用法

      1.ANY关键字假设any内部的查询语句返回的结果个数是三个,如:result1,result2,result3,那么, select ...from ... where a > any(. ...

  5. Ternsorflow 学习:001-通过例程,初步了解Tensorflow

    前言 本章的目的是了解和运行 TensorFlow,在开始之前,让我们先看一段使用 Python API 撰写的 TensorFlow 示例代码,让你对将要学习的内容有初步的印象. 下面这段短小的 P ...

  6. zabbix agent的主动工作模式实战案例

    zabbix agent的主动工作模式实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.zabbix agent的工作模式概述 zabbix agent的主动工作模式: ...

  7. java.lang.ClassNotFoundException: com.microsoft.sqlserver.jdbc.SQLServerDriver java.sql.SQLException

    今天下午一直想用netbeans连接数据库,结果就是来来回回碰到这两个问题. 我还在想,连接数据库并不是一个什么困难的事情啊,我都按照教程上一步一步做的,代码什么的都感觉很好,怎么就找不到类呢,怎么就 ...

  8. Day5-T1

    原题目 小月言要过四岁生日了,她的妈妈为她准备了n根火腿,她想将这些火腿均分给m位小朋友,所以她可能需要切火腿.为了省事,小月言想切最少的刀数,使这n根火腿分成均等的m份.请问最少要切几刀? 第一行一 ...

  9. R 《回归分析与线性统计模型》page120,4.3

    #P120习题4.3 rm(list = ls()) A = read.xlsx("xiti_4.xlsx",sheet = 3) names(A) = c("ord&q ...

  10. 剑指offer第12题打印从1到n位数以及大整数加法乘法

       字符和数字加减就是字符的ASCII码和数字直接加减. 方法一: 1)在字符串操作中给一个整形数字加(字符0)就是把它转化为字符,当然给一个字符减去(字符0)就可以把它转化为数字了:如果确实是最后 ...