ASP.NET + MVC5 入门完整教程二
原文链接:https://blog.csdn.net/qq_21419015/article/details/80318046
从前端UI开始
MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分。而谈到一个Web Application的UI,涉及到的无非就是html、css、 js这些东西。有兴趣的同学可以看看EsayUI。
任务
建立 注册/登录UI 步骤(静态页面功能实现)
借助bootstrap加入页面样式,补充其他功能,将前面的代码扩展成一个开发的基础框架
基础知识:
View的存放位置约定:都统一存放在 Views文件夹下
Action Method Selector:应用在Controller的Action上
文中以 [HttpPost] 举例
ViewBag
在View和Controller中传递数据的一种方式 (类似的方式还有ViewData、TempData), 掌握通过ViewBag在View和Controller中传递数据
HtmlHelper
通过View的Html属性调用,文中以Html.BeginForm为例
建立 注册/登录 UI详细步骤
打开上次项目,新建两个Action
本系列文章知识点和演示代码都以前一篇文章为基础,有问题可以回上一篇进行查找。本次我们将会新建用户 注册/登录 的两个页面。
打开ControllerFirstController.cs ,仿照已有的Index, 添加两个Action, 如下图。
创建方法有两种:
1 复制两个Index();修改Index 分别为Login 和 Register;
2 在public方法下方空白处右键-->插入代码段,如下图所示。
添加First相应的View
根据上一步中添加的Action, 添加相关View: Login.cshtml, Register.cshtml
添加方法详见上篇文章,不再重复讲解。
这里再说明下View的存放位置约定。记住下面三句话:
- 所有的View都放在Views文件夹
- Views文件夹创建了一系列与Controller同名的子文件夹
- 各子文件夹内存放与Action同名的cshtml文件(对应的View文件)
登录界面UI设计
把Login.cshtml就当做一个静态html页面,完成登录界面的UI,其实cshtml可以看成原来的aspx和html的混合体,利用了aspx的优点,方便和后台交互;利用了html的优点,语法简洁。然后到bootstrap上复制个登录界面html。
链接:https://getbootstrap.com/docs/3.3/css/#forms
将代码放入<div>中
F12 浏览器 View page source, 发现多了VS Browser Link废代码。为了保证界面纯净,我们不要任何样式代码,将它禁用掉。
打开web.config添加如下代码,再去浏览器查看源代码,可以看到纯净的html了。
将前端的数据传递到Controller中去
完成一个登录工作:
填写表单 à Controller获取表单数据 à 进一步操作(例如去数据库比对,通过后获取用户身份跳转到指定页面)
我们这次先完成到Controller获取数据,对数据库的操作我们下一章和EF结合起来一起讲。
OK, 现在我们对Login.cshtml进行修改。
修改前的Login.cshtml:
首先我们先去FirstController.cs中创建一个Login同名的Action来接受表单提交的数据。
注意新添加的Action中增加了一个[HttpPost] ,表示这个Action只会接受http post请求。ASP.NET MVC提供了Action Method Selector, HttpPost就是其中之一。
HttpPost属性典型的应用场景:
涉及到需要接受客户端窗口数据的时候,创建一个用于接收HTTP Get请求的Action, 用于显示界面, 提供给用户填写数据;
另一个同名Action则应用[HttpPost]属性,用于接收用户发来的数据,完成对应的功能。
打开Login.cshtml, 修改form,为后端接收数据做准备。
先在form标签内增加两个属性action, method。对于form中的method(默认是get),通常情况下, get用于简单的读取数据操作,post用于写数据操作。
打开FirstController.cs,修改[HttpPost]的Login Action用于接收数据
到html页面在form前加入
运行代码:登陆前,输入邮箱,点击Sign in ;这里只要表单提交,HttpPost Login方法就能获取表单数据;
登录后:
优化
对Login.cshtml中的form做一点改良。
如下图,First的位置是固定的,这样的话部署发生变化时有可能地址会不可用(如放在IIS根目录下和虚拟目录下是不同的)
使用HtmlHelper动态计算路由地址就是其中的一种方法。
添加下面一句代码,将form中内容放到 {} 中去即可
@using (Html.BeginForm("login", "First", FormMethod.Post)) { }
运行,到浏览器中查看源代码,可以看到生成的源代码和原来一样。
未使用HtmlHelper如图:
使用HtmlHelper如图:
渲染后的页面Html代码
实现动态地址路由。
说明:Index:操作方法的名称,First:控制器的名称,这里就是指FirstController,而对于控制器,后面的Controller可以不写,@FormMethod.Get:定义from的method的值,new { id = "mainForm", name = "mainForm",@class="form-inline mainform"}:指定form的id,name,class属性,因class是Razor语法中的关键字所以要用@来标记。另外,还可以设置路由的参数对象,在此基础上加上new{id=“”}即可,可以为id赋值,如果指定确不赋值则可以实现防止提交链接后面自带参数。在其他htmlHelper方法中如果有object HtmlAttributes参数都可以使用new{属性=“”}的方式对生成的html元素附加属性。本例中为用到id,name等属性。
同样的,完成注册界面UI(类似登录界面,步骤略)
————————————————
见 :
.net c# MVC提交表单的4种方法 : https://www.cnblogs.com/wfy680/p/12240281.html
ASP.NET MVC 在控制器中接收视图表单POST过来的数据方法 : https://i-beta.cnblogs.com/posts/edit;postId=12240284
ASP.NET + MVC5 入门完整教程二的更多相关文章
- ASP.NET + MVC5 入门完整教程八 -—-- 一个完整的应用程序(上)
https://blog.csdn.net/qq_21419015/article/details/80509513 SportsStore 1.开始创建Visual Studio 解决方案和项目这里 ...
- ASP.NET + MVC5 入门完整教程七 -—-- MVC基本工具(上)
https://blog.csdn.net/qq_21419015/article/details/80474956 这里主要介绍三类工具之一的 依赖项注入(DI)容器,其他两类 单元测试框架和模仿工 ...
- ASP.NET + MVC5 入门完整教程三 (下) ---MVC 松耦合
建立松耦合组件 MVC 模式最重要的特性之一视他支持关注分离,希望应用程序中的组件尽可能独立,只有很少的几个可控依赖项.在理想的情况下,每个组件都不了解其他组件,而只是通过抽象接口来处理应用程序的其他 ...
- ASP.NET + MVC5 入门完整教程八 -—-- 一个完整的应用程序(下)
https://blog.csdn.net/qq_21419015/article/details/80802931 SportsStore 1.导航 添加导航控件 如果客户能够通过产品列表进行分类导 ...
- ASP.NET + MVC5 入门完整教程五 --- Razor (模型与布局)
https://blog.csdn.net/qq_21419015/article/details/80451895 1.准备示例项目 为了演示Razor,使用VS创建一个名称为“Razor”的新项目 ...
- ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目
https://blog.csdn.net/qq_21419015/article/details/80420815 第一个MVC应用程序 1创建MVC项目 打开VS ,File--新建--项目,选择 ...
- ASP.NET + MVC5 入门完整教程七 -—-- MVC基本工具(下)
https://blog.csdn.net/qq_21419015/article/details/80493633 Visual Stdio 的单元测试
- ASP.NET + MVC5 入门完整教程四---MVC 中使用扩展方法
https://blog.csdn.net/qq_21419015/article/details/80433640 1.示例项目准备1)项目创建新建一个项目,命名为LanguageFeatures ...
- MVC5 + EF6 入门完整教程二
从前端的UI开始 MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分. ASP.NET MVC抛弃了WebForm的一些特有的习惯,例如服务器端控件,Vie ...
随机推荐
- unity目前学的一些操作
目前是根据b站的一位迈扣老师的30集基础教学学习的,用的是sunny land这个资源包进行的教学,这位老师讲得很清晰,吐词清晰,思路也清晰,推荐哦.其实我比较喜欢这样的老师,思路 吐词清晰.就像以前 ...
- C++中c_str()的用法
这个函数经常用到,总是记不住,记下来,方便翻阅 c_str()函数返回一个指向正规C字符串的指针,内容与string串相同. C++中c_str()主要用法就是为了与C语言兼容,在C语言中没有stri ...
- PGET,一个简单、易用的并行获取数据框架
使用场景 当我们的服务收到一个请求后,需要大量调用下游服务获取业务数据,然后对数据进行转换.计算后,响应给请求方. 如果我们采用串行获取下游数据,势必会增加响应时长,降低接口的qps.如果是并行获取下 ...
- 树莓派4B遇到的坑
由于大创需要用到机器学习这些东西,入手了一个树莓派4B(新手没弄过,直接上手最新版果然是有坑的),大佬勿喷
- canvas特效-文字粒子
具体的效果 https://www.ui.cn/detail/393461.html 实现类似的动效 要求: 1.文字内容可以自定义 2.粒子的运动轨迹 是曲线,返回是按照 原运动轨迹 3.粒子 堆叠 ...
- [USACO09JAN]Total Flow【网络流】
Farmer John always wants his cows to have enough water and thus has made a map of the N (1 <= N & ...
- 静态区间第k小 - 整体二分
蒟蒻终于学会整体二分啦! 思路 实现 丑陋无比的代码 #include <bits/stdc++.h> using namespace std; const int N = 200005; ...
- hadoop 部署在centos 7 上
一.准备工作 (文章写于 2019-6) 根据官方文档而来,请注意时间,官方可能有更新,以官方文档为准 1. 配置网站参考: http://hadoop.apache.org/docs/r1.0.4 ...
- PHP实现导出Excel文件
实现代码: private function exportExcel($params) { $arr = $this->getExportData($params); // 获取需要导出的信息( ...
- C语言回文链表
要求:请判断一个链表是否为回文链表. 示例 1: 输入: 1->2 输出: false 示例 2: 输入: 1->2->2->1 输出: true思路:利用快慢双指针+反转半链 ...