MVC_2

强类型dynamic,强类型视图,ViewData,自动实现CURD(选择包含读写的mvc5模板),路由规则的匹配,HtmlHelper的使用,MVC校验方式(Query Validate以及MVC自带的),MVC中Ajax的使用(JQ做法以及AJAX.BEGINFROM),

MVC_2

强类型视图

在大多数情况下,类型的dynamic行为类似object,但是

1
2
3
4
5
6
7
8
9
10
11
class Program
{
static void Main(string[] args)
{
dynamic dyn = 1;
object obj = 1;

dyn = dyn + 3;
obj = obj + 3;
}
}

报告尝试在表达式中添加整数和对象时发生编译器错误obj + 3。但是,没有错误报告dyn + 3。包含的表达式dyn在编译时没有被检查,因为dynis 的类型dynamic。因此我们可以看出dynamic是在运行时就确定类型

1
2
3
4
5
6
7
8
public ActionResult Details()
{
EfFirstModleEntities1 db = new EfFirstModleEntities1();
int id = Convert.ToInt32(Request["id"]);
var modle=db.UserInfo.Where<Models.UserInfo>(u => u.Id ==id ).FirstOrDefault();
ViewData.Model = modle;
return View();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@ViewData.Model  MVC_Demo.Models.UserInfo//引入模型
@{
ViewBag.Title = "Details";
}

<h2>Details</h2>
<table border="1">
<tr>
<th>用户名</th>
<th>密码</th>
</tr>
<tr>
<td>@Model.UserName</td>//直接使用模型的属性,只能提示是点不出来的
<td>@Model.UserPwd</td>
</tr>
</table>

自动实现 CURD

在我们添加控制器的时候,选择包含读写的mvc5模板即可。

HtmlHelper

路由规则的匹配顺序,从第一开始匹配,知道匹配上,哪怕下面能匹配上也不回继续进行下去,HtmlHelper表示支持在视图中呈现 HTML 控件。

下面的这个方法事代表html中的a标签,参数依此代表要写的东西,请求的方法,请求的控制器,传递的参数,html的属性,这个方法请求的地址是根据路由规则的生成,这样一来就不用担心路由规则改了

1
@Html.ActionLink("用户列表","Index","UserInfo",new{id=1,name="zhansgan"},new {id="hehe",@class="txt"})
1
<a class="txt" href="/UserInfo/Index/1?name=zhansgan" id="hehe">用户列表</a>

在aspx中,:输出会把html的也原样输出,=输出就会解析html

下拉框标签

1
@Html.DropDownList("city",null,new{id="cityList"})//参数依此为下拉框名字,填充的数据,html属性
1
2
3
4
5
6
7
8
9
10
public ActionResult Index()
{
List<SelectListItem> list = new List<SelectListItem>()
{
new SelectListItem(){Text = "济南",Value = "1"},
new SelectListItem(){Text = "北京",Value = "2",Selected = true}
};
ViewData["city"] = list;//如果和DropDownList的名字一样那么将会自动填充下拉框
return View();
}

单选框

1
2
男 @Html.RadioButton("Gender","0",true,new {id="1"})//属性依此为name,value,是否选中,html属性
女 @Html.RadioButton("Gender","1",new {id="2"})

form表单

1
2
3
4
@using (Html.BeginForm("Index","UserInfo",FormMethod.Get,new {id="1",enctype=""}))//默认向当前的页面请求,属性依次为,请求的方法,控制器,请求的方式,html元素
{
@Html.TextBox("userName","张三")
}

带后缀for表明能接收控制器数据

1
2
var userinfo=db.UserInfo.Where(u => u.Id == 1).FirstOrDefault();
ViewData.Model = userinfo;
1
@Html.TextBoxFor(u=>u.UserName)

MVC校验方式

第一种jQuery Validate插件,这种插件无论是webfrom还是在mvc都可以用,具体用法可以参照

http://www.runoob.com/jquery/jquery-plugin-validate.html

第二种的MVC的验证方法

在view视图先引用这三

1
2
3
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>//隐式

实体模型类

1
2
3
4
5
6
7
8
9
public class StudentUserInfo
{
[Required(ErrorMessage = "用户名不可为空")]
public string Name { get; set; }
[Required(ErrorMessage = "密码不可为空")]
[RegularExpression(@"/^[a-zA-Z\d_]{8,}$/", ErrorMessage = "密码格式不正确,必须大于八位")]
public string Pwd { get; set; }
public DateTime Time { get; set; }
}

然后可以根据你创建的view视图选择强类型视图,对象就是上面的,模板选择Creat。

但是我们的实体类模型一般由EF来创建,那么这时候我们在EF创建好的模型类前面添加属性是不行的,只要一保存就会变回原来的。这时候我们可以这样做:新建一个类,这个类跟我们的EF创建的实体模型类中的所有属性是 一样的,在这类的下面在新建一个EF实体类的部类,在前面添加标签。做法如下:

上面的三个JS还是照样引用

EF生成的类型

1
2
3
4
5
6
7
8
public partial class UserInfo
{
public int Id { get; set; }
public string Email { get; set; }
public System.DateTime RegTime { get; set; }
public string UserName { get; set; }
public string UserPwd { get; set; }
}

我们自己创建的类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class UserInfoViewiable//必须跟UserInfo类型属性一致
{
public int Id { get; set; }
[Required(ErrorMessage = "邮箱是必须的")]
[RegularExpression(@"^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$",ErrorMessage = "邮箱格式错误")]
public string Email { get; set; }
public System.DateTime RegTime { get; set; }
[Required(ErrorMessage = "用户名是必须的")]
public string UserName { get; set; }
public string UserPwd { get; set; }
}
[MetadataType(typeof(UserInfoViewiable))]//关联起来
public partial class UserInfo
{

}

其实我们一般更偏向于第一种的开发

MVC中Ajax的使用

像以前的做法

View视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btnGetJson").click(function() {
$.post("/MVCAjax/GetUsers",
{},
function(data) {
for (var i = 0; i < data.length; i++) {
//var datas = parseJSON(data); 不需要转换json
$("#users").append(data[i].UserName);
}
});
});
});
</script>
<h2>Index</h2>

<input type="button" id="btnGetJson" value="获取所有用户"/>
<div id="users"></div>

控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public class MVCAjaxController : Controller
{
// GET: MVCAjax
public ActionResult Index()
{
return View();
}

public ActionResult GetUsers()
{
EfFirstModleEntities1 db = new EfFirstModleEntities1();
var user= db.UserInfo.Where(u => true).ToList();
return Json(user);//直接返回JSON
}
}

MVC中的AJAX请求

首先必须引用两个JS,很重要!

1
2
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

view视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGetJson").click(function () {
$.post("/MVCAjax/GetUsers",
{},
function (data) {
//var datas = parseJSON(data); 不需要转换json
for (var i = 0; i < data.length; i++) {
$("#users").append(data[i].UserName);
}
});
});
});
//Ajax的回掉函数
function AfterAjax(data) {
alert("ok");
}
</script>

@*Confirm对话框,HttpMethod选择提交方式,InsertionMode插入格式,LoadingElementId选择显示过程的id,OnSuccess回掉方法,UpdateTargetId选择更具服务器响应更新的ID*@

@using (Ajax.BeginForm("GetUsers", "MVCAjax", new AjaxOptions() { Confirm = "确定要添加吗", HttpMethod = "post", InsertionMode = InsertionMode.InsertBefore, LoadingElementId = "loading", OnSuccess = "AfterAjax", UpdateTargetId = "users" }))
{
<input type="submit" value="MVC获取所有用户" />
}
<div id="users"></div>
<div id="loading" style="display: none">正在添加中。。。。</div>

路由规则

2JrM7w.png

越复杂的规则排越前**

FILTER过滤器

方法过滤器,即在执行控制器里面的方法之前执行。

https://blog.csdn.net/heyangyi_19940703/article/details/51259684

Razior

1
@MvcHtmlString.Create(你要执行的html字符串)//如果需要输出html标签

要引用命名空间using前面在@(插件应该会自动添加)

在Razior模板页叫布局页,新建的时候要注意,在添加视图的时候可以选布局。

模板页面挖坑,@RenderSection(“head”),填坑

1
2
3
@Section head{
...
}

MVC_2
http://www.kju147.com/2018/04/15/MVC-2/
作者
个人学习
发布于
2018年4月15日
许可协议