首页 > > 网络编程 > Asp.Net编程 >

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

2018-06-22 06:17:19来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

【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,望技术有成后能回来看见自己的脚步。

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：ASP.NET没有魔法——ASP.NET MVC 过滤器(Filter)

下一篇：WebApi的多版本管理

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签