MVC学习八：MVC View提交数据

学习编程最主要的就是数据交互，MVC中数据交互是怎么样的呢？

1、Controller向View传输数据在http://www.cnblogs.com/WarBlog/p/7127574.html中有提到

2、View向Controller传递数据（提交数据）又是怎么样的呢？
①URL参数提交（Get方式）-- 根据MVC路由器规则

以下是POST方式

②传统Form表单Action方法提交

③Ajax异步提交

④MVC的HtmlHelper的Form表单提交（Html.BeginForm）

⑤MVC的Ajax的异步提交（Ajax.BeginForm）

3、详细分析上述提交方式

①URL参数提交（Get方式）

View端代码
<a href="/Stu/Modify/@stu.Id">修改</a>

路由表规则

routes.MapRoute(
   name: "Default",
   url: "{controller}/{action}/{id}",//Stu/Modify/1
   defaults: new { controller = "Stu", action = "RazorView", id = UrlParameter.Optional }
);

Controller控制器Action方法

[HttpGet]
public ActionResult Modify(int id)
{
  return View(stu);
} 

 ②传统Form表单Action方法提交

View视图代码

    <form action="/stu/modify" method="post">
    <input type="hidden" name="Id" value="@Model.Id" />
    <table>
        <tr>@ViewBag
            <td>姓名：</td>
            <td><input type="text" name="Name" value="@Model.Name" /></td>
        </tr>
        <tr>
            <td>班级：</td>
            <td>
                <td><input type="text" name="ClassName" value="@Model.ClassName" /></td>
            </td>
        </tr>
    </table>
        <input type="submit" value="确定" />
    </form>

 Controller控制器Action方法有三种方式：

1、Request.Form["Name"]

2、注意：View视图中Html控件name属性值和Model的属性名一致

模型绑定：.NetMVC框架会在调用action方法前，创建参数model对象，并从请求报文中检查看是否有与该对象属性同名的数据，如果有则设置给该对象同名的属性

所以可以直接以model对象作为参数传递

[HttpPost]
public ActionResult Modify(Models.Student model)
{
    //Request.Form["Name"]

    DbEntityEntry entry = db.Entry<Models.Student>(model);
    entry.State = System.Data.EntityState.Unchanged;
    entry.Property("Name").IsModified = true;
    entry.Property("CId").IsModified = true;
    db.SaveChanges();

    return Redirect("/stu/index");
} 

3、使用FormCollection对象

public ActionResult Modify2(FormCollection from)
{ 
    return from["Name"]
}

③Ajax异步提交

View视图代码

<form id="fData">
<table id="tbData">
    <tr>
        <td>姓名：<input type="hidden" id="Id" name="Id" /></td>
        <td><input id="Name" type="text" name="Name" /></td>
    </tr>
    <tr>
        <td>班级：</td>
        <td>
            <input id="ClassName" type="text" name="ClassName" />
        </td>
    </tr>
    <tr>
        <td>性别：</td>
        <td>
            <input type="radio" id="GenderM" name="Gender" value="男" />男
            <input type="radio" id="GenderF" name="Gender" value="女" checked />女
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="button" id="btnSure" value="确 定"/>
            <input type="button" id="btnCancel" value="取 消"/>
        </td>
    </tr>
</table>
</form>

 Ajax代码

    function DoModify() {
        //1、可以通过Html标签ID属性获取数据,然后拼接josn格式数据
        //2、使用serialize()只针对form对象可用
        var data = $("#fData").serialize();
        $.post("/Stu/Modify", data, function (jsonObj) {
            if (jsonObj.Statu == "ok") {
              ...
            }
        }, "json");
    }

④MVC的HtmlHelper的Form表单提交

1、@using (Html.BeginForm(string actionName（Action方法名）,string controllerName（Controller控制器名）,FormMethod method（提交方式：Get/Post--枚举类型）,object htmlAttributes（Form标签的属性类）)){}

注意：这个Html.BeginForm方法要结合using使用

View代码（强类型视图--指定了 model 类型的视图 就叫做强类型视图）

@using (Html.BeginForm("ModifyPage", "Stu", FormMethod.Post))
{
    @*@Html.TextBox("txtName", "我是文本框", new { style = "border:1px solid #0094ff;" });<br />*@
    @*@Html.TextArea("txtContent", "我是文本域");*@
    <table id="tbData">
        <tr>
            <td>@Html.LabelFor(s => s.Name)：</td>
            <td>
                @*@Html.TextBoxFor(s=>s.Name)*@
                @Html.EditorFor(s => s.Name)
                @*@Html.ValidationMessageFor(s => s.Name)*@
            </td>
        </tr>
        <tr>
            <td>@Html.LabelFor(s=>s.CId)：</td>
            <td>
                @Html.DropDownListFor(s=>s.CId,ViewBag.selList as IEnumerable<SelectListItem>)
                @*@Html.DropDownList("CId",ViewBag.selList as IEnumerable<SelectListItem>)*@
            </td>
        </tr>
        <tr>
            <td>@Html.LabelFor(s=>s.Gender)：</td>
            <td>
                <!--生成 单选按钮的 方法，会根据 属性值 与 默认值 比较，如果相等，则设置为 选中！-->
                <!-- 也就是说，只要 当前Model中的Gender属性值，与 某个 单选按钮方法 设置的 value值一样，则自动设置为选中！ -->
                @Html.RadioButtonFor(s => s.Gender, "男") 男
                @Html.RadioButtonFor(s=>s.Gender,"女") 女
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" id="btnSure" value="确 定"/>
                <input type="button" id="btnCancel" value="取 消"/>
            </td>
        </tr>
    </table>
    @Html.ValidationSummary()
}

上面View视图在使用htmlHepler方法生成HTML标签时，会自动把对象的属性名写入到HTML标签的name属性名（即HTML标签的name属性=对象的属性名，<input type = "text" name = "obName" value="@Model.obName">）

在提交时，就会把画面上所有数据都封装到model对象中，并传递到Controller控制器Action方法中。

Controller控制器Action方法

        [HttpPost]
        public ActionResult ModifyPage(Models.Student model)
        {
            //服务器端 验证（根据实体类属性的 验证特性来检查）
            if (!ModelState.IsValid)
            {
                return Content("数据有误~！请不要恶意禁用浏览器脚本~~~！");
            }
            try
            {
                DbEntityEntry entry = db.Entry<Models.Student>(model);
                entry.State = System.Data.EntityState.Unchanged;

                entry.Property("Name").IsModified = true;
                entry.Property("CId").IsModified = true;
                entry.Property("Gender").IsModified = true;

                db.SaveChanges();
                return Content("<script>alert('修改成功~');window.location='/Stu/Index';</script>");
            }
            catch (Exception ex)
            {
                return Content("<script>alert('失败~~~~" + ex.Message+ "');window.location='/Stu/Index';</script>");
            }
        }

2、就是使用BeginForm+EndForm

此方法和using(BeginForm)用法一样。

View视图代码

@{Html.BeginForm("Login", "User", FormMethod.Post, new { id = "form2" });}
        <input type="text" />
@{Html.EndForm();}

注意：@{Html.BeginForm(string actionName（Action方法名）,string controllerName（Controller控制器名）,FormMethod method（提交方式：Get/Post--枚举类型）,object htmlAttributes（Form标签的属性类）));}标注红色大【大括号和分号{ ;}】不加上的话，页面生成HTML代码中会显示【System.Web.Mvc.Html.MvcForm】字符串。

⑤MVC的Ajax的异步提交（Ajax.BeginForm）

View视图代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
    <!--使用Ajax.BeginForm必须引用的js文件-->
    <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
        function suc(resText) {
            alert(resText);
        }
        function err(xhr) {
            alert(xhr.readyState);
        }
    </script>
    <style type="text/css">
        #imgLoad {
        display:none;
        }
    </style>
</head>
<body>
    <h1>异步表单：</h1>
    @using (Ajax.BeginForm("GetDate（Controller控制器的Action方法）", "Home（Controller控制器）", new AjaxOptions()
    {
        HttpMethod = "post",//提交方式
        OnSuccess = "suc",//js方法
        OnFailure="err",//js方法
        LoadingElementId = "imgLoad"//Html标签ID
    })) { 
        <input type="text" name="txtName" />
        <input type="submit" />
        <div id="imgLoad">加载中~~~</div>
    }

</body>
</html>

Controller控制器Action方法

/// <summary>
/// MVC 的 Ajax Form
/// </summary>
public ActionResult GetDate()
{
    System.Threading.Thread.Sleep(2000); 9     string str = Request.Form["txtName"];
    return Content(str + "," + DateTime.Now.ToString());
}