asp.net mvc表单异步提交

html代码:

@using (Html.BeginForm("xx", "xx", FormMethod.Post, new { enctype = "multipart/form-data", id = "form1", @class = "form-horizontal", role = "form" }))
{

<div>
@Html.DropDownList("cate", ViewData["cate"] as List<SelectListItem>, new { @class = "form-control", onchange = "SelectChange(this)", id = "select1" })
</div>

<div>

<input type="file" id=‘picture‘  accept=‘image/png,image/jpeg‘>

</div>

<div>

<button type="button" class="btn1">提交</button>

</div>

}

js代码:

$(".btn1").onclick(function(){

var formData = new FormData();

var cat=$("#select1").val();

formData.append("cate", cat);

formData.append("img",document.getElementById(‘picture‘).files[0]);

//var xhr = new XMLHttpRequest();
//xhr.open("post", ‘@Url.Action("xx", "xx")‘);
//xhr.addEventListener("load", uploadComplete, false);

////formData.delete(imgID);
//xhr.send(formData);
//return false;

$.ajax({
url: $("#form1").attr("action"),
type: $("#form1").attr("method"),
cache: false,
data: formData,
processData: false,
contentType: false,
success: function (result) {
}
});

})

function uploadComplete(evt) {

var d = evt.target.responseText.toString();
var data = JSON.parse(d);

}

Control代码:

var ca = Request.Params["cate"];

//HttpFileCollectionBase files = Request.Files;

HttpPostedFileBase fileimg = Request.Files[0];

时间: 2024-10-14 11:17:17

asp.net mvc表单异步提交的相关文章

ASP.NET MVC 表单的几种提交方式

下面是总结一下在ASP.NET MVC中表单的几种提交方式. 1.Ajax提交表单 需要引用 <script type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"></script>    <script src="/Scripts/jquery.validate.min.js" type="text/javascript">&l

jQuery的表单异步提交(MVC版)

之前在公司做了一个关于热门专业的项目,用到了jQuery的表单异步提交,由于项目是MVC5框架的,所以我的代码也只是针对MVC而言的哦! 代码如下: $.ajax({ type: "POST", url: "/HotMajor/AddOK", dataType:"text", data:$('#hotmajor').serialize(), success: function (dat) { if (dat == "true"

使用jQuery.form插件,实现完美的表单异步提交

示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是 今天我想介绍的是一款jQuery的插件:Jquery.form.js 官网. 通过该插件,我们可以非常简单的实现表单的异步提交,并实现文件上传.进度条显示等等. 现在我们从一个ASP.NET同步表单提交开始,然后再将其转化为异步的表单提交.我写了3种表单提交示例,并简单分析了各种方式的利弊. 当然主题还是使用jQuery表单插件轻松实现表单异步提交以及分析下该插件的源码. ASP.NET服务

使用jQuery,实现完美的表单异步提交

jQuery异步提交表单 1 <form id="form1" method="post"> 2 <table border="1"> 3 <tr> 4 <td>用户名:</td> 5 <td> 6 <input type="text" name="loginName" /></td> 7 </tr>

[ASP NET MVC] 表单 Partial View / Editor Template 使用抉择

表单 Partial View / Editor Template 使用抉择 前言 最近有不少同事都会问到"为什么在这边要使用Editor Tamplate? 怎么不用Partial View来做?",其实如果想要知道各自适用的时机,首先就必须了解两者差异为何.从以下表格不难发现,两者都是从VIEW中将ViewModel之Boo属性对象传入Partial View / Editor Template,并且都是使用@Html.EditorFor() 方法来产出Html 元素,但最终产出H

asp.net mvc 表单

1. <form action="/controller/action" method="post"> ... </form> *action 属性指定表单要提交到的网页地址 *method 属性指定表单提交时使用的方法(如: get , post) 2. 表单提交按钮可以使用<input type="submit" value="Submit">或<button type="

spring mvc表单修改提交

实际应用中,列表中的单条记录的修改,可能需要传很多对象参数到后台服务器,Spring MVC表单标签<form:> 提供了一种简洁的提交方式. 1 <form id="form1" class="form-horizontal chukong_form" method="post" 2 action="${ctx}/channel/sdkversion/postedit.do"> 3 <form:

ASP.NET MVC 表单提交多层子级实体集合数据到控制器中

于遇到了项目中实体类嵌套多层子级实体集合,并且子级实体集合的数据需要提交保存到数据库中的问题.针对此情况需要进行一些特殊的处理才可以将整个 实体类及子级实体集合数据提交表单到控制器中,解决的方法是根据MVC视图中表单的命名规则来设置正确的子级实体集合所属的表单控件name属性,从而来 获取提交的集合数据. 在说明如何将表单中实体的子级实体集合数据提交到控制器中的问题前,我们需要了解MVC的对于数组和列表集合的表单提交方式(点击此链接进行查看). 定义多层嵌套实体和假设场景 首先我们根据情况进行分

ASP.NET MVC 表单验证

ASP.NET MVC 框架验证每个传递给操作的数据是否有效,控制器操作可以通过查询ModelState来检查请求是否有效,例如,保存有效数据到数据库.后缀返回包含错误提示信息的原始表单给用户.这里是AuctionsController.Create操作,用于判断ModelState的有效性后进行“保存或者返回” 操作: [HttpPost] public ActionResult Create(Auction auction) { if(ModelState.IsValid) { var db