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同名的子文件夹
各子文件夹内存放与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添加如下代码:

    <add key="vs:EnableBrowserLink" value="false" />   

再去浏览器查看源代码,可以看到纯净的html了。

将前端的数据传递到Controller中去

完成一个登录工作:

填写表单 --->Controller获取表单数据 ---> 进一步操作(例如去数据库比对,通过后获取用户身份跳转到指定页面)

我们这次先完成到Controller获取数据,对数据库的操作我们下一章和EF结合起来一起讲。

现在我们对Login.cshtml进行修改。

修改前的Login.cshtml:

 

1、控制器建立一个接收Form的Action

首先我们先去AccountController.cs中创建一个Login同名的Action来接受表单提交的数据 

注意新添加的Action中增加了一个[HttpPost] ,表示这个Action只会接受http post请求。ASP.NET MVC提供了Action Method Selector, HttpPost就是其中之一。(后续文章中会专门有一篇讲解这些Selector)

HttpPost属性典型的应用场景:

涉及到需要接受客户端窗口数据的时候,创建一个用于接收HTTP Get请求的Action, 用于显示界面, 提供给用户填写数据;

另一个同名Action则应用[HttpPost]属性,用于接收用户发来的数据,完成对应的功能。

2、修改前台Form,说明接收Form的方法及post

打开Login.cshtml, 修改form,为后端接收数据做准备。

先在form标签内增加两个属性action, method。对于form中的method(默认是get),通常情况下, get用于简单的读取数据操作,post用于写数据操作。

3、修改Form,为了方法能接收Form,添加name属性

在input元素下添加name属性,设置成和id一样的值。

NOTE: 服务器端需要通过name来取值。

4、在后台方法能接收Form提交的数据

打开AccountController.cs,修改[HttpPost]的Login Action用于接收数据

5、前台加登录状态信息

为了区分登录前后,我们通过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

MVC5+EF6 入门完整教程2 :从前端UI开始的更多相关文章

  1. MVC5+EF6 入门完整教程

    MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用 MVC5+EF6 入门完整教程10:多对多关联表更新&使用原生SQL@20150521 MVC5+EF6 入门完整教程9:多表 ...

  2. MVC5+EF6 入门完整教程13 -- 动态生成多级菜单

    稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...

  3. MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用

    摘要: 第一阶段1~10篇已经覆盖了MVC开发必要的基本知识. 第二阶段11-20篇将会侧重于专题的讲解,一篇文章解决一个实际问题. 根据园友的反馈, 本篇文章将会先对呼声最高的仓储模式进行讲解. 文 ...

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

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

  5. MVC5+EF6 入门完整教程12--灵活控制Action权限

    大家久等了. 本篇专题主要讲述MVC中的权限方案. 权限控制是每个系统都必须解决的问题,也是园子里讨论最多的专题之一. 前面的系列文章中我们用到了 SysUser, SysRole, SysUserR ...

  6. MVC5+EF6 入门完整教程 总目录

    本系列文章会从一个主干开始,逐渐深入,初步规划30篇.初级10篇,中级10篇,综合项目实战10篇 初级10篇 MVC5+EF6 入门完整教程10:多对多关联表更新&使用原生SQL@201505 ...

  7. MVC5 + EF6 入门完整教程1

    https://www.cnblogs.com/miro/p/4030622.html 第0课 从0开始 ASP.NET MVC开发模式和传统的WebForm开发模式相比,增加了很多"约定& ...

  8. MVC5 + EF6 入门完整教程(转载)--01

    MVC5 + EF6 入门完整教程   第0课 从0开始 ASP.NET MVC开发模式和传统的WebForm开发模式相比,增加了很多"约定". 直接讲这些 "约定&qu ...

  9. MVC5+EF6 入门完整教程九

    前一阵子临时有事,这篇文章发布间隔比较长,我们先回顾下之前的内容,每篇文章用一句话总结重点. 文章一 MVC核心概念简介,一个基本MVC项目结构 文章二 通过开发一个最基本的登录界面,介绍了如何从Co ...

  10. MVC5 + EF6 入门完整教程二:从前端的UI开始

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

随机推荐

  1. Pikachu-URL重定向

    不安全的url跳转 不安全的url跳转问题可能发生在一切执行了url地址跳转的地方.如果后端采用了前端传进来的(可能是用户传参,或者之前预埋在前端页面的url地址)参数作为了跳转的目的地,而又没有做判 ...

  2. C#序列化与反序列化学习笔记

    本笔记摘抄自:https://www.cnblogs.com/maitian-lf/p/3670570.html,记录一下学习过程以备后续查用. 序列化是把一个内存中的对象的信息转化成一个可以持久化保 ...

  3. django cookie session 自定义分页

    cookie cookie的由来 http协议是无状态的,犹如人生若只如初见,每次都是初次.由此我们需要cookie来保持状态,保持客户端和服务端的数据通信. 什么是cookie Cookie具体指的 ...

  4. node常用模块汇总

    node常用模块汇总: 点击插件名字,查看使用文档 npm常用模块汇总 node常用模块汇总 gulp常用插件汇总 mkdirp:在node.js中像mkdir -p一样递归创建目录及其子目录

  5. Socket之TCP-IP

    通常的TCP/IP流程如下: TCP/IP的通讯更像是打电话,连接上通了确认是自己拨叫的用户之后才能进行正常通话,更加安全合理. Qt中的TCP/IP流程如下: Qt中流程和普通的思路一样,只是封装成 ...

  6. JN_0009:win下快捷键注销,关机,重启

    注销:  wn + x  + U  再按 I 键 关机: win + x  + U  再按 U 键 重启: win + x  + U  再按 R 键

  7. (一)Python模块化编程简介

    1 引言 众所周知,模块化编程具备很多优点,尤其在复杂项目上体现更为明显.Python模块化编程有助于开发者统筹兼顾和分工协作,并提升代码灵活性和可维护性,是编程开发者不可或缺的一项重要工具. 2 P ...

  8. JS 字符串 String对象

    charAt(index) 返回指定索引位置的字符 charCodeAt() 返回指定索引位置字符的 Unicode 值 indexOf(searchString, startIndex) 返回子字符 ...

  9. archlinux下安装nvidia驱动解决Nvidia显卡显示问题

    root下使用以下命令: sudo pacman -S nvidia nvidia-libgl

  10. py 二级习题(turtle)

    用turtle画一个正方形 import turtle turtle.penup() turtle.goto(-100,-100) turtle.pendown() turtle.begin_fill ...