MVC学习-发送请求

在HomeControl中添加一个Action,代码如下:

public ActionResult Add()
{
     return View();
}

当View()中不写任何参数时,默认会调用同名的视图,添加一个视图Add.cshtml,同时添加一个表单,代码如下:

<body>
    <div>
        @using (Html.BeginForm())
        {
            <input type="text" id="id1" name="id1"/><br/>
            <input type="text" id="name1" name="name1"/><br/>
        <input type="text" id="gender" name="gender"/><br/>
        <input type="submit" value="提交"/>  
        }
    </div>
</body>

通过浏览器,可以看到,生成了一个表单,如下图:

<form action="/Home/Add" method="post">       
     <input type="text" id="id1" name="id1"/><br/>
            <input type="text" id="name1" name="name1"/><br/>
        <input type="text" id="gender" name="gender"/><br/>
        <input type="submit" value="提交"/>  
</form>

可以看到在BeginForm()中未写参数,默认会提交到当前的后台,post方式请求。跟asp.net很像

既然提交到后台,那么后台肯定要有个方法接受数据,而且是与请求的视图同名的,那么我们接下来就创建一个Action,代码如下:

[HttpPost]
        public ActionResult Add(UserInfo user)
        {
            int a = 10;//此处设断点
            if (user.Id == 0)
            {
                int id = int.Parse(Request["Id1"]);
                string name = Request["Name1"];
                string gender = Request["Gender"];
                user = new UserInfo() {Id = id, Name = name, Gender = gender};
            }
                
            return Content("OK");
        }

该Action接受post请求,且与原有Add()构成重载,参数为UserInfo 类型的参数,UserInfo类的代码如下:

namespace _02HtmlHelper.Models
{
    public class UserInfo
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
    }
}

在int a=10,前面设一个断点,然后选择【工具】-【添加到进程】-【iisexpress  托管】

然后在刷新html页面,再在html中输入数据,提交表单,这个时候,会自动运行到断点处,本次测试输入的数据如下图:

技术分享

这个时候,可以看到传入Add()方法的参数,user中的值如下:

Gender:33
Id:0
Name:null

分析结果,得出知识:

传入值为:
id1=11;name1=22;gender=33
方法中的UserInfo接收到的参数为
Id=0;Name=null;Gender=33


1.在客户端中name的大小写不重要
2.不管有没有传入id的值,id总有值,这点很重要
3.当前台发送数据到后台时,mvc内部会自动为把我们把参数拼接成对象,那我们在前台使用对象的话,就可以少写很多代码了

接下来修改前台代码,用对象的方式,因为该视图在添加的时候,为强类型某种类型,所以要在开头强类型为UserInfo,代码如下:

@model _02HtmlHelper.Models.UserInfo
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Add</title>
</head>
<body>
    <div>
        @using (Html.BeginForm())
        {
            @Html.TextBoxFor(u=>u.Id)<br/>
            @Html.TextBoxFor(u=>u.Name)<br/>
            @Html.TextBoxFor(u=>u.Gender)<br/>
            
        <input type="submit" value="提交"/>  
        }
        
        
    </div>
</body>
</html>

上面页面运行后,查看源代码,如下,对于name=’Id’的部分,会在另外文章中说明:

<form action="/Home/Add" method="post">
<input data-val="true" data-val-number="字段 Id 必须是一个数字。" data-val-required="Id 字段是必需的。" id="Id" name="Id" type="text" value="" /><br/>
         <input id="Name" name="Name" type="text" value="" /><br/>
         <input id="Gender" name="Gender" type="text" value="" /><br/>
         <input type="submit" value="提交"/>  
</form>

按照上面步骤,在int a=10处设立断点,添加进程,运行后,查看传入Add(UserInfo user)中user的值,所有的值,后台全部接受到了。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。