最近總是記不住表單提交的幾種方式，并且各種方式的適應(yīng)場景也不知道，干脆來總結(jié)一次，當(dāng)再學(xué)習(xí)過程。

?

首先從最簡單的開始練手：

　　【1】純form表單形式，無js和ajax ，提交路徑有action決定，方式由method決定，如果需要傳輸文件加上enctype

　　我的表單內(nèi)容:兩個下拉選擇、一個文件選擇和一個輸入框

<form action="@Url.Action("AddFile", "Assistant")" id="form" method="post" class="form-horizontal" enctype="multipart/form-data" ><div class="form-group">@Html.LabelFor(m => m.FileDescription, new { @class = "col-md-2 control-label" })@Html.TextAreaFor(m => m.FileDescription, new { @class = "form-control col-md-10", rows = 5 })</div><div class="form-group">@Html.LabelFor(m => m.FileType, new { @class = "col-md-2 control-label" })@Html.DropDownListFor(m => m.FileType, (IEnumerable<SelectListItem>)ViewBag.FileType, new { @class = "form-control col-md-10" })</div><div class="form-group">@Html.LabelFor(m => m.File, new { @class = "col-md-2 control-label" })@Html.TextBoxFor(m => m.File, new { type = "file", id = "file", @class = "form-control col-md-10" })</div><div class="form-group">@Html.LabelFor(m => m.IsPublic, new { @class = "col-md-2 control-label" })@Html.DropDownListFor(m => m.IsPublic, (IEnumerable<SelectListItem>)ViewBag.IsPublic, new { @class = "form-control col-md-10" })</div><div class="form-group"><input type="submit" id="AddFile" class="btn col-md-offset-2" value="添加" /><button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button></div></form>

　　后臺成功接收到了需要的信息

　　這種方式最為簡便但是用處卻是不大，當(dāng)我后臺需要返回信息時，前臺的回掉函數(shù)都沒有，就連是否提交成功都不知道。有朋友說可以有回掉函數(shù)，但注意這種使用的場景是無JS代碼無ajax。

?

　　【2】基于【1】的擴展，利用Html輔助方法實現(xiàn)

@using (Html.BeginForm("AddFile", "Assistant", FormMethod.Post, new { @class = "form-horizontal", enctype = "multipart/form-data",id="form" })){<div class="form-group">@Html.LabelFor(m => m.FileDescription, new { @class = "col-md-2 control-label" })@Html.TextAreaFor(m => m.FileDescription, new { @class = "form-control col-md-10", rows = 5 })</div><div class="form-group">@Html.LabelFor(m => m.FileType, new { @class = "col-md-2 control-label" })@Html.DropDownListFor(m => m.FileType, (IEnumerable<SelectListItem>)ViewBag.FileType, new { @class = "form-control col-md-10" })</div><div class="form-group">@Html.LabelFor(m => m.File, new { @class = "col-md-2 control-label" })@Html.TextBoxFor(m => m.File, new { type = "file",id="file", @class = "form-control col-md-10" })</div><div class="form-group">@Html.LabelFor(m => m.IsPublic, new { @class = "col-md-2 control-label" })@Html.DropDownListFor(m => m.IsPublic, (IEnumerable<SelectListItem>)ViewBag.IsPublic, new { @class = "form-control col-md-10" })</div><div class="form-group"><input type="submit" id="AddFile" class="btn col-md-offset-2" value="添加" /><button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button></div>}

　　實現(xiàn)效果和【1】是一樣的，只是這樣寫起來會感覺方便些

?

　　【3】Ajax.BeginForm方式，利用Ajax的輔助方法

　　這種集合了ajax和表單提交的異步方式，需要注意的是這種方式需要改變點東西，首先得增加一個js包，這個包如果框架沒有默認帶上可以從nuget中下載一個。

<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

　　還需要再配置中開啟允許

　　雖然這兩步驟已經(jīng)由框架自動設(shè)置好了，但還是得知道下。開始實踐：

@using (Ajax.BeginForm("AddFile", "Assistant", new AjaxOptions {HttpMethod = "Post",OnSuccess= "success"}, new { @class = "form-horizontal", enctype = "multipart/form-data", id = "form" })){<div class="form-group">@Html.LabelFor(m => m.FileDescription, new { @class = "col-md-2 control-label" })@Html.TextAreaFor(m => m.FileDescription, new { @class = "form-control col-md-10", rows = 5 })</div><div class="form-group">@Html.LabelFor(m => m.FileType, new { @class = "col-md-2 control-label" })@Html.DropDownListFor(m => m.FileType, (IEnumerable<SelectListItem>)ViewBag.FileType, new { @class = "form-control col-md-10" })</div><div class="form-group">@Html.LabelFor(m => m.File, new { @class = "col-md-2 control-label" })@Html.TextBoxFor(m => m.File, new { type = "file", id = "file", @class = "form-control col-md-10" })</div><div class="form-group">@Html.LabelFor(m => m.IsPublic, new { @class = "col-md-2 control-label" })@Html.DropDownListFor(m => m.IsPublic, (IEnumerable<SelectListItem>)ViewBag.IsPublic, new { @class = "form-control col-md-10" })</div><div class="form-group"><input type="submit" id="AddFile" class="btn col-md-offset-2" value="添加" /><button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button></div>}

　　首先看看Ajax.BeginForm的幾種重載實現(xiàn)

public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, AjaxOptions ajaxOptions); public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes); public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions); public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions); public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes); public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes); public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes); public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, object routeValues, AjaxOptions ajaxOptions); public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions); public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, AjaxOptions ajaxOptions); public static MvcForm BeginForm(this AjaxHelper ajaxHelper, AjaxOptions ajaxOptions);

　　都是很常見的參數(shù)，其中有一個AjaxOptions值得我們?nèi)タ匆环?/p>

　　果然是不錯啊? 在這里結(jié)合js代碼使用，定義幾個函數(shù)，實現(xiàn)需要的不同的回掉的功能。

　　實驗下，同樣起了效果，和【1】的效果是一樣的。并在此基礎(chǔ)上得到了回掉功能，此處需要說明下，回掉函數(shù)如果需要參數(shù)，默認參數(shù)是這樣的。可參考jquery.unobtrusive-ajax.js 源碼

OnBegin – xhr OnComplete – xhr, status OnSuccess – data, status, xhr OnFailure – xhr, status, error

　　也就是說我在js代碼中如果要用到返回的信息，可以在指定的參數(shù)中取到在js中接收函數(shù)寫明參數(shù)信息

function success(data,status,xhr,此處還可自己擴展需要的參數(shù)信息){......}

　　html中如果需要增加額外參數(shù)可以這么寫

Onsuccess="success(data,status,xhr,此處還可自己擴展需要的參數(shù)信息)"

　　實踐中，我的回掉函數(shù)得到了信息

function success(data, status, xhr){if (data.result) {layer.alert("添加成功！");$("#myModal").modal("hide");//隱藏彈框 }}

　　效果展示

?　　此處說明下，當(dāng)我沒有加上這個包時，ajax輔助方法可以將文件提交到后臺并正常接收，但是一旦加上這個包，后臺便接收不到文件了，需要引起注意。

<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

?　　劃重點：ajax輔助方法表單提交時如果不需要提交文件且需要回掉函數(shù)，那么這種方式很不錯，但是如果需要提交文件，那么受到上面那個包的影響，文件將不能提交成功，如有知道解決方案的，可以告知我，我也想學(xué)習(xí)學(xué)習(xí)。

　　今天只嘗試了三種方式，還剩下幾種其它形式的利用js提交（包括ajax提交）、form插件提交的幾種方式還沒來的及介紹。需要去買菜啦，哈哈。下一期再寫一篇。希望博友們推薦更多form表單提交的方式，感謝。

?

2017-11-25,望技術(shù)有成后能回來看見自己的腳步。

轉(zhuǎn)載于:https://www.cnblogs.com/CKExp/p/7895353.html

總結(jié)

以上是生活随笔為你收集整理的自我总结和学习表单提交的几种方式 (一)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。