自我總結和學習表單提交的幾種方式 (一)

来源:http://www.cnblogs.com/CKExp/archive/2017/11/25/7895353.html
-Advertisement-
Play Games

最近總是記不住表單提交的幾種方式，並且各種方式的適應場景也不知道，乾脆來總結一次，當再學習過程。 首先從最簡單的開始練手： 【1】、純form表單形式，無js和ajax ，提交路徑有action決定，方式由method決定，如果需要傳輸文件加上enctype 我的表單內容:兩個下拉選擇、一個文件選擇 ...


最近總是記不住表單提交的幾種方式，並且各種方式的適應場景也不知道，乾脆來總結一次，當再學習過程。

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

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

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

        <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">關閉</button>
            </div>
        </form>

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

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

 

【2】、基於【1】的擴展，利用Html輔助方法實現

        @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">關閉</button>
            </div>
        }

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

 

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

這種集合了ajax和表單提交的非同步方式，

需要註意的是這種方式需要改變點東西，首先得增加一個js包，這個包如果框架沒有預設帶上可以從nuget中下載一個。

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

還需要再配置中開啟允許

雖然這兩步驟已經由框架自動設置好了，但還是得知道下。

開始實踐：

@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">關閉</button>
            </div>
        }

首先看看Ajax.BeginForm的幾種重載實現

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);

都是很常見的參數，其中有一個AjaxOptions值得我們去看一番

 

果然是不錯啊  在這裡結合js代碼使用，定義幾個函數，實現需要的不同的回掉的功能。

 

實驗下，同樣起了效果，和【1】的效果是一樣的。併在此基礎上得到了回掉功能，此處需要說明下，回掉函數如果需要參數，預設參數是這樣的。

可參考jquery.unobtrusive-ajax.js 源碼

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

也就是說我在js代碼中如果要用到返回的信息，可以在指定的參數中取到

在js中接收函數寫明參數信息

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

　　......

}

html中如果需要增加額外參數可以這麼寫

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

 

實踐中，我的回掉函數得到了信息

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

效果展示

 

此處說明下，當我沒有加上這個包時，ajax輔助方法可以將文件提交到後臺並正常接收，但是一旦加上這個包，後臺便接收不到文件了，需要引起註意。

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

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

 

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

 

2017-11-25,望技術有成後能回來看見自己的腳步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTTP服務及狀態碼
    第一章 HTTP 1.1 HTTP協議的概念 HTTP協議，全稱HyperText Transfer Protocol，中文名為超文本傳輸協議，是互聯網上常用的通信協議之一，它有很多的應用。但是流行的就是用於Web瀏覽器和Web伺服器之間的通信，即WWW應用或稱為Web應用。WWW全稱World W ...
  • 數據類型轉換與常量
    隱式轉換[自動類型轉換]： 兩種類型要相容，原類型值域要小於目標類型值域，可以簡單的理解為由小轉大。 1 public class Test 2 { 3 private void Start() 4 { 5 int a = 10; 6 float b = a;//int 類型隱式轉換為 float ...
  • 獲取WebService的請求信息
    一個已經寫好的項目中有多個WebService，由於之前沒有記錄請求信息的，有時候需要查錯等需要找到當次的請求信息，所以需要加入記錄請求信息的功能。 首先想到的是在每一個帶有WebMethod特性的方法里調用記錄請求信息的方法，這樣可以記錄信息，但是太多帶WebMethod特性的方法了，於是想在全局 ...
  • docker~run起來之後執行多條命令
    最近在搞jenkins pipeline的部署工作，而在對.net core進行部署時不希望安裝dotnet sdk，為了移植性更好，打算直接使用aspnetcore的docker鏡像，通過docker去run它，而在這個時間出現了一個問題 docker run aspnetcore:2.0之後如果 ...
  • 構造方法
    構造方法：用於實例化對象。 一般情況下，類或者結構體中都會存在一個預設的無參構造方法。如果我們在類中手動書寫了有參的構造方法，那麼這個無參構造方法就會被覆蓋掉；但是結構體中卻不會被覆蓋，即使我們在結構體中書寫了有參構造方法，無參構造方法依然可以使用。 【在使用單例模式時，我們可以書寫 private ...
  • 第三講：Asp.Net+Autofac+EF/ADO.NET Winform OA（3）-啟用DevExpress皮膚功能
    作者：地溝油 進入首頁 前言： 由於系統顏色太單調，所以決定啟用DevExpress換膚功能，讓界面更美觀！ 作者的DevExpress已更換到17.2.3了，不過要是不想升級的話，也可以繼續沿用舊版的DevExpress喲，因為舊的和新的區別不大喲！ 1.首先我們進入Program，在Main() ...
  • SqlSugar入門到熟練使用 (1) : SqlSugar ORM介紹和ORM對象創建
    前言 混跡.Net圈子已經好幾年了, 從最初出來使用的SqlHelper 到 微軟的企業庫, 再到 EF, 再到第三方ORM框架, 經歷了一個不可描述的過程, SqlHelper和企業庫就不多說了. EF很強大, 但是.....(此處省去一萬字), 尋尋覓覓最後發現了幾個國內的ORM, 都使用過,  ...
  • 面向介面、面向對象、面向方面的區別
    1、面向介面： 通過介面約束對象的一些方法和屬性，屬於面向對象中的一部分。 更好的方式是「面向抽象」：先定義介面約束，再定義抽象類，在抽象類中實現公共方法，在進行具體實現。 總結：統一行為 2、面向對象： 通過封裝、繼承、多態更加有效的組織程式。 總結：提高復用 3、面向方面： 把業務的主邏輯和次邏 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類