本人总括和学习表单提交的二种形式 (一)

多年来连接记不住表单提交的二种模式,并且各个方法的适应场景也不知道,干脆来总括四遍,当再深造过程。

先是从最简易的发端练手:

【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>

后台成功接到到了急需的消息

图片 1

那种措施最好便捷不过用处却是不大,当自己后台需要再次回到音信时,前台的回掉函数都并未,就连是否交由成功都不知晓。有情侣说可以有回掉函数,但只顾那种利用的光景是无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>

还需要再配备中拉开允许

图片 2

即便这两步骤已经由框架自动安装好了,但要么得了解下。

千帆竞发实践:

@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值得我们去看一番

 

图片 3

果真是不易啊 
在此地结合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");//隐藏弹框
        }
    }

效用显示

图片 4

 

此间表达下,当我从没添加这多少个包时,ajax协理方法可以将文件提交到后台并正常接收,不过固然增长这一个包,后台便接过不到文件了,需要引起注意。

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

 划重点:ajax协理方法表单提交时如若不需要提交文件且需要回掉函数,那么这种办法很不利,可是假使需要付出文件,那么受到下边十分包的影响,文件将不可能交到成功,如有知道解决方案的,可以告诉自己,我也想学学深造。

 

先天只尝试了二种办法,还余下二种其他形式的行使js提交(包括ajax提交)、form插件提交的三种方法还没来的及介绍。需要去买菜呀,哈哈。下一期再写一篇。希望博友们推荐更多form表单提交的章程,感谢。

 

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

 

相关文章