自我总结和学习表单提交的几种方式 (一)-白红宇的个人博客

发布日期：2021-05-08 23:17:40 浏览次数：13 分类：博客文章

本文共 6748 字，大约阅读时间需要 22 分钟。

　　最近总是记不住表单提交的几种方式，并且各种方式的适应场景也不知道，干脆来总结一次，当再学习过程。

首先从最简单的开始练手：

　　【1】纯form表单形式，无js和ajax ，提交路径有action决定，方式由method决定，如果需要传输文件加上enctype

　　我的表单内容:两个下拉选择、一个文件选择和一个输入框


                
     
                      @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 })            
     
            
     
                      @Html.LabelFor(m => m.FileType, new { @class = "col-md-2 control-label" })                @Html.DropDownListFor(m => m.FileType, (IEnumerable
      
       )ViewBag.FileType, new { @class = "form-control col-md-10" })            
      
     
            
     
                      @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" })            
     
            
     
                      @Html.LabelFor(m => m.IsPublic, new { @class = "col-md-2 control-label" })                @Html.DropDownListFor(m => m.IsPublic, (IEnumerable
      
       )ViewBag.IsPublic, new { @class = "form-control col-md-10" })

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

　　这种方式最为简便但是用处却是不大，当我后台需要返回信息时，前台的回掉函数都没有，就连是否提交成功都不知道。有朋友说可以有回掉函数，但注意这种使用的场景是无JS代码无ajax。

　　【2】基于【1】的扩展，利用Html辅助方法实现

@using (Html.BeginForm("AddFile", "Assistant", FormMethod.Post, new { @class = "form-horizontal", enctype = "multipart/form-data",id="form" }))        {            
    
                     @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 })            
    
            
    
                     @Html.LabelFor(m => m.FileType, new { @class = "col-md-2 control-label" })                @Html.DropDownListFor(m => m.FileType, (IEnumerable
     
      )ViewBag.FileType, new { @class = "form-control col-md-10" })            
     
    
            
    
                     @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" })            
    
            
    
                     @Html.LabelFor(m => m.IsPublic, new { @class = "col-md-2 control-label" })                @Html.DropDownListFor(m => m.IsPublic, (IEnumerable
     
      )ViewBag.IsPublic, new { @class = "form-control col-md-10" })            
     
    
            
                    
                     
                 
    
        }

　　实现效果和【1】是一样的，只是这样写起来会感觉方便些

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

　　这种集合了ajax和表单提交的异步方式，需要注意的是这种方式需要改变点东西，首先得增加一个js包，这个包如果框架没有默认带上可以从nuget中下载一个。

　　还需要再配置中开启允许

　　虽然这两步骤已经由框架自动设置好了，但还是得知道下。开始实践：

@using (Ajax.BeginForm("AddFile", "Assistant", new AjaxOptions {HttpMethod = "Post",OnSuccess= "success"}, new { @class = "form-horizontal", enctype = "multipart/form-data", id = "form" }))        {            
    
                     @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 })            
    
            
    
                     @Html.LabelFor(m => m.FileType, new { @class = "col-md-2 control-label" })                @Html.DropDownListFor(m => m.FileType, (IEnumerable
     
      )ViewBag.FileType, new { @class = "form-control col-md-10" })            
     
    
            
    
                     @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" })            
    
            
    
                     @Html.LabelFor(m => m.IsPublic, new { @class = "col-md-2 control-label" })                @Html.DropDownListFor(m => m.IsPublic, (IEnumerable
     
      )ViewBag.IsPublic, new { @class = "form-control col-md-10" })            
     
    
            
                    
                     
                 
    
        }

　　首先看看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
    
      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
     
       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】的效果是一样的。并在此基础上得到了回掉功能，此处需要说明下，回掉函数如果需要参数，默认参数是这样的。可参考

OnBegin – xhrOnComplete – xhr, statusOnSuccess – data, status, xhrOnFailure – 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辅助方法可以将文件提交到后台并正常接收，但是一旦加上这个包，后台便接收不到文件了，需要引起注意。

　　划重点：ajax辅助方法表单提交时如果不需要提交文件且需要回掉函数，那么这种方式很不错，但是如果需要提交文件，那么受到上面那个包的影响，文件将不能提交成功，如有知道解决方案的，可以告知我，我也想学习学习。

　　今天只尝试了三种方式，还剩下几种其它形式的利用js提交（包括ajax提交）、form插件提交的几种方式还没来的及介绍。需要去买菜啦，哈哈。下一期再写一篇。希望博友们推荐更多form表单提交的方式，感谢。

2017-11-25,望技术有成后能回来看见自己的脚步。

上一篇：自我总结和学习表单提交的几种方式 (二)

下一篇：Asp.Net MVC下自定义错误页和展示错误页的几种方式

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章