Mvc 提交表單的4種方法全程詳解

一，MVC HtmlHelper方法
       Html.BeginForm(actionName,controllerName,method,htmlAttributes){}
       BeginRouteForm 方法 (HtmlHelper, String, Object, FormMethod)
二，傳統Form表單Aciton屬性提交
三，Jquery+Ajax 提交表單
四，MVC Controller控制器和表單參數傳遞

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
<form> 開始標記。

用法說明

在 Visual Basic 和 C# 中，您能夠對 HtmlHelper 類型的任何對象將此方法做爲實例方法調用。在您使用實例方法語法調用此方法時，將忽略第一個參數

方法示例   MVC View代碼

 1 <h1>在線申請</h1>
 2         @using (Html.BeginForm("Apply", "Star", FormMethod.Post, new  {@class="MyForm"}))
 3         {
 4             <div class="application_b_3">
 5                 <table width="820" border="0">
 6                     <tr>
 7                         <td width="80" height="50">達人類型</td>
 8                         <td width="730">
 9                             @Html.DropDownListFor(m => m.StarModel.TypeID, Model.DropList, new { id = "type", @class = "my-" })
10                         </td>
11                     </tr>
12                     <tr>
13                         <td height="50">首頁達人照</td>
14                         <td>
15                              <div class="picture_an" id="UploadPhoto" style="width: 142px">
16                                 <a href="javascript:void(0);" class="btn_addPic"><span><em>+</em>上傳照片</span>
17                                     <input tabindex="3" title="支持jpg、jpeg、gif、png格式，文件小於5M" size="3" name="pic" id="absFileInput" class="filePrew" type="file" />
18                                 </a>
19                             </div>
20                         </td>
21                     </tr>
22                     <tr>
23                         <td height="50"></td>
24                         <td>
25                               @Html.HiddenFor(m => m.StarModel.UserGravatar, new { id = "SXtPhoto" })
26                             <img src="" id="imgPhoto"  height="176px" />
27                         </td>
28                     </tr>
29                     <tr>
30                         <td height="100">自薦理由</td>
31                         <td>
32                             @Html.TextAreaFor(m => m.StarModel.ApplyReason, new { id = "tDesc" })
33                         </td>
34                     </tr>
35                     <tr>
36                         <td height="50"></td>
37                         <td>
38                             <a href=" javascript:void(0)" id="btnApplication"><img src="@Url.Content("~/Areas/SNS/Themes/Default/Content/images/ap_9.gif")" alt="" /></a>
39                         </td>
40                     </tr>
41                 </table>
42             </div>
43         }

二，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
一個開始 <form> 標記。

使用說明

在 Visual Basic 和 C# 中，能夠在 HtmlHelper 類型的任何對象上將此方法做爲實例方法來調用。當使用實例方法語法調用此方法時，請省略第一個參數。

代碼示例

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

直接利用html表單的Aciton屬性進行提交。

方法示例

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

 

 Jquery+Ajax 提交表單

 方法示例

View 部分

1 <div class="issue" id="postWeibo" style="width: 80px">
2                             <a href="javascript:void(0)" class="publish-btn">發佈</a>
3                         </div>

Jquery和Ajax部分

 1 //發佈長微博
 2     $("#postWeibo").click(function () {
 3         var blogID = $("#hfID").val();
 4         var title = $("#title").val();
 5         var imgurl = $("#previewImgHide").val();
 6         var des = editor.getContent();
 7         if (title == "") {
 8             ShowFailTip('微博標題不能爲空！');
 9             return;
10         }
11 
12         if (title.length >= 40) {
13             ShowFailTip("微博標題不能超出40個字！");
14             return;
15         }
16         //檢查是否數字
17         if (isNaN(fee)) {
18             ShowFailTip("不能包含文本必須是數值！");
19             return;
20         }
21         if (ContainsDisWords(title + des)) {
22             ShowFailTip('您輸入的內容含有禁用詞，請從新輸入！');
23             return;
24         }
25 
26         $.ajax({
27             url: "/fx" + $Maticsoft.BasePath + "Blog/AjaxUpdate",
28             type: 'POST',
29             async: false,
30             dataType: 'html',
31             //            timeout: 10000,
32             data: { Title: title, CityID: city, Fee: fee, CategoryID: category, Days: days, Tag: tag, startDate: startdate, endDate: enddate, ImgUrl: imgurl, Des: des, BlogID: blogID }, //
33             success: function (resultData) {
34 
35                 $(".dialogDiv").hide();
36                 if (resultData == "No") {
37                     ShowFailTip("操做失敗，請您重試！");
38                 } else if (resultData == "AA") {
39                     $.jBox.tip('管理員不能操做', 'error');
40                 } else {
41                     var data = $(resultData);
42                
43                 }
44             }
45         });
46     });

MVC Controller控制器和表單參數傳遞

1.普通參數

HTML標籤name 和參數名同樣。

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

 

 2.實體傳參

HTML標籤name 屬性和Model屬性保持一致

1  [HttpPost]
2         public ActionResult Apply(ViewModel.SNS.Star model)
3         {
4 //邏輯
5 }

 

3.表單集合傳參

1  [HttpPost]
2         public ActionResult Apply(FormCollection Form)
3         {
4 //邏輯
5 }