Asp.net MVC html.beginform 提交表单的四种方法全程详解

一 前端

1. MVC HtmlHelper方法
Html.BeginForm(actionName,controllerName,method,htmlAttributes){}

注：所有要提交的内容包括按钮都必须在{ }内

参数

htmlHelper
    类型： System.Web.Mvc.HtmlHelper
    此方法扩展的 HTML 帮助器实例。 

actionName
    类型： System.String
    操作方法的名称。 

controllerName
    类型： System.String
    控制器的名称。 

routeValues
    类型： System.Object
    一个包含路由参数的对象。 通过检查对象的属性，利用反射检索参数。 此对象通常是使用对象初始值设定项语法创建的。 

method
    类型： System.Web.Mvc.FormMethod
    用于处理窗体的 HTTP 方法（GET 或 POST）。 

htmlAttributes
    类型： System.Object
    一个对象，其中包含要为该元素设置的 HTML 特性。 

返回值

类型： System.Web.Mvc.Html.MvcForm

开始标记。 用法说明

在 Visual Basic 和 C# 中，您可以对 HtmlHelper 类型的任何对象将此方法作为实例方法调用。在您使用实例方法语法调用此方法时，将忽略第一个参数
Html.BeginForm 方法示例

MVC View代码

 <h1>在线申请</h1>
        @using (Html.BeginForm("Apply", "Star", FormMethod.Post, new  {@class="MyForm"}))
        {
            <div class="application_b_3">
                <table width="820" border="0">
                    <tr>
                        <td width="80" height="50">达人类型</td>
                        <td width="730">
                            @Html.DropDownListFor(m => m.StarModel.TypeID, Model.DropList, new { id = "type", @class = "my-" })
                        </td>
                    </tr>
                    <tr>
                        <td height="50">首页达人照</td>
                        <td>
                             <div class="picture_an" id="UploadPhoto" style="width: 142px">
                                <a href="javascript:void(0);" class="btn_addPic"><span><em>+</em>上传照片</span>
                                    <input tabindex="3" title="支持jpg、jpeg、gif、png格式，文件小于5M" size="3" name="pic" id="absFileInput" class="filePrew" type="file" />
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td height="50"></td>
                        <td>
                              @Html.HiddenFor(m => m.StarModel.UserGravatar, new { id = "SXtPhoto" })
                            <img src="" id="imgPhoto"  height="176px" />
                        </td>
                    </tr>
                    <tr>
                        <td height="100">自荐理由</td>
                        <td>
                            @Html.TextAreaFor(m => m.StarModel.ApplyReason, new { id = "tDesc" })
                        </td>
                    </tr>
                    <tr>
                        <td height="50"></td>
                        <td>
                            <a href=" javascript:void(0)" id="btnApplication"><img src="@Url.Content("~/Areas/SNS/Themes/Default/Content/images/ap_9.gif")" alt="" /></a>
                        </td>
                    </tr>
                </table>
            </div>
        }

2. BeginRouteForm 方法 (HtmlHelper, String, Object, FormMethod)

参数

htmlHelper
    类型： System.Web.Mvc.HtmlHelper
    此方法扩展的 HTML 帮助程序实例。

routeName
    类型： System.String
    用于获取窗体发布 URL 的路由的名称。

routeValues
    类型： System.Object
    一个包含路由参数的对象。 通过检查对象的属性，利用反射检索参数。 此对象通常是使用对象初始值设定项语法创建的。 

method
    类型： System.Web.Mvc.FormMethod
    用于处理窗体的 HTTP 方法（GET 或 POST）。

返回值
类型： System.Web.Mvc.Html.MvcForm
一个开始 标记。
使用说明

在 Visual Basic 和 C# 中，可以在 HtmlHelper 类型的任何对象上将此方法作为实例方法来调用。当使用实例方法语法调用此方法时，请省略第一个参数。
BeginRouteForm示例

<div class="group-search-box clearfix">
           
           @using (Html.BeginRouteForm("SearchPage", new { cityID = Model.CityID, productType = Model.CurrentProductType, currentPageIndex = Model.CurrentIndex, keyword = Model.keyword }, FormMethod.Get))
           {
                <input type="text" name="keyword" class="search-ipt" value=@Model.keyword>
                <input type="submit" id="submit" value="搜 索" class="gsearch-btn" >
           }
            
            </div>

3. 传统Form表单Aciton属性提交

直接利用html表单的Aciton属性进行提交。

方法示例

 <form id="askform" action="@Url.Action("AskForm")" method="post">
                    <div class="title-area-outter clearfix">
                        <span></span>
                        <select id="dplBDTType" name="dplBDTType"></select>                   
                        <select id="selType" name="selType"></select>   
                    </div>
</form>

4. Jquery+Ajax 提交表单

方法示例

View 部分

  <div class="issue" id="postWeibo" style="width: 80px">
                            <a href="javascript:void(0)" class="publish-btn">发布</a>
                        </div>

Jquery和Ajax部分

//发布长微博
$("#postWeibo").click(function () {
    var blogID = $("#hfID").val();
    var title = $("#title").val();
    var imgurl = $("#previewImgHide").val();
    var des = editor.getContent();
    if (title == "") {
        ShowFailTip('微博标题不能为空！');
        return;
    }

    if (title.length >= 40) {
        ShowFailTip("微博标题不能超出40个字！");
        return;
    }
    //检查是否数字
    if (isNaN(fee)) {
        ShowFailTip("不能包含文本必须是数值！");
        return;
    }
    if (ContainsDisWords(title + des)) {
        ShowFailTip('您输入的内容含有禁用词，请重新输入！');
        return;
    }

    $.ajax({
        url: "/fx" + $Maticsoft.BasePath + "Blog/AjaxUpdate",
        type: 'POST',
        async: false,
        dataType: 'html',
        //            timeout: 10000,
        data: { Title: title, CityID: city, Fee: fee, CategoryID: category, Days: days, Tag: tag, startDate: startdate, endDate: enddate, ImgUrl: imgurl, Des: des, BlogID: blogID }, //
        success: function (resultData) {

            $(".dialogDiv").hide();
            if (resultData == "No") {
                ShowFailTip("操作失败，请您重试！");
            } else if (resultData == "AA") {
                $.jBox.tip('管理员不能操作', 'error');
            } else {
                var data = $(resultData);
           
            }
        }
    });
});

二. 后端 MVC Controller控制器和表单参数传递

1.普通参数

HTML标签name 和参数名一样。

public ActionResult AskForm(string txtTitle, string txtEditor, string dplBDTType, string selType, string txtYZM)
{
}

2.实体传参

HTML标签name 属性和Model属性保持一致

[HttpPost]
public ActionResult Apply(ViewModel.SNS.Star model)
{
//逻辑
}

3.表单集合传参

[HttpPost]
public ActionResult Apply(FormCollection Form)
{
//逻辑
}