Mvc提交表单的四种方法全程详解


Posted in Javascript onAugust 10, 2016

一,MVC HtmlHelper方法

1.

Html.BeginForm(actionName,controllerName,method,htmlAttributes){}

2.

BeginRouteForm 方法 (HtmlHelper, String, Object, FormMethod)

二,传统Form表单Aciton属性提交

三,Jquery+Ajax 提交表单

四,MVC Controller控制器和表单参数传递

MVC HtmlHelper方法

一,Html.BeginForm(actionName,controllerName,method,htmlAttributes){}

注:所有要提交的内容包括按钮都必须在{ }内

参数

htmlHelper类型:System.Web.Mvc.HtmlHelper

此方法扩展的 HTML 帮助器实例。actionName类型:System.String

操作方法的名称。controllerName类型:System.String

控制器的名称。routeValues类型:System.Object

一个包含路由参数的对象。 通过检查对象的属性,利用反射检索参数。 此对象通常是使用对象初始值设定项语法创建的。method类型:System.Web.Mvc.FormMethod
用于处理窗体的 HTTP 方法(GET 或 POST)。htmlAttributes类型:System.Object

一个对象,其中包含要为该元素设置的 HTML 特性。

返回值

类型:System.Web.Mvc.Html.MvcForm

<form> 开始标记。

用法说明

在 Visual Basic 和 C# 中,您可以对 HtmlHelper 类型的任何对象将此方法作为实例方法调用。在您使用实例方法语法调用此方法时,将忽略第一个参数

Html.BeginForm 方法示例

MVC View代码

<h1>在线申请</h1>
@using (Html.BeginForm("Apply", "Star", FormMethod.Post, new {@class="MyForm"}))
{
<div class="application_b_3">
<table width="820" border="0">
<tr>
<td width="80" height="50">达人类型</td>
<td width="730">
@Html.DropDownListFor(m => m.StarModel.TypeID, Model.DropList, new { id = "type", @class = "my-" })
</td>
</tr>
<tr>
<td height="50">首页达人照</td>
<td>
<div class="picture_an" id="UploadPhoto" style="width: 142px">
<a href="javascript:void(0);" class="btn_addPic"><span><em>+</em>上传照片</span>
<input tabindex="3" title="支持jpg、jpeg、gif、png格式,文件小于5M" size="3" name="pic" id="absFileInput" class="filePrew" type="file" />
</a>
</div>
</td>
</tr>
<tr>
<td height="50"></td>
<td>
@Html.HiddenFor(m => m.StarModel.UserGravatar, new { id = "SXtPhoto" })
<img src="" id="imgPhoto" height="176px" />
</td>
</tr>
<tr>
<td height="100">自荐理由</td>
<td>
@Html.TextAreaFor(m => m.StarModel.ApplyReason, new { id = "tDesc" })
</td>
</tr>
<tr>
<td height="50"></td>
<td>
<a href=" javascript:void(0)" id="btnApplication"><img src="@Url.Content("~/Areas/SNS/Themes/Default/Content/images/ap_9.gif")" alt="" /></a>
</td>
</tr>
</table>
</div>
}

二,BeginRouteForm 方法 (HtmlHelper, String, Object, FormMethod)

参数

htmlHelper类型:System.Web.Mvc.HtmlHelper

此方法扩展的 HTML 帮助程序实例。

routeName类型:System.String

用于获取窗体发布 URL 的路由的名称。

routeValues类型:System.Object

一个包含路由参数的对象。 通过检查对象的属性,利用反射检索参数。 此对象通常是使用对象初始值设定项语法创建的。
method类型:System.Web.Mvc.FormMethod

用于处理窗体的 HTTP 方法(GET 或 POST)。

返回值

类型:System.Web.Mvc.Html.MvcForm

一个开始 <form> 标记。

使用说明

在 Visual Basic 和 C# 中,可以在 HtmlHelper 类型的任何对象上将此方法作为实例方法来调用。当使用实例方法语法调用此方法时,请省略第一个参数。

BeginRouteForm示例

<div class="group-search-box clearfix">
@using (Html.BeginRouteForm("SearchPage", new { cityID = Model.CityID, productType = Model.CurrentProductType, currentPageIndex = Model.CurrentIndex, keyword = Model.keyword }, FormMethod.Get))
{
<input type="text" name="keyword" class="search-ipt" value=@Model.keyword>
<input type="submit" id="submit" value="搜 索" class="gsearch-btn" >
}
</div>

传统Form表单Aciton属性提交

直接利用html表单的Aciton属性进行提交。

方法示例

<form id="askform" action="@Url.Action("AskForm")" method="post">
<div class="title-area-outter clearfix">
<span></span>
<select id="dplBDTType" name="dplBDTType"></select> 
<select id="selType" name="selType"></select> 
</div>
</form>

Jquery+Ajax 提交表单

方法示例

View 部分

<div class="issue" id="postWeibo" style="width: 80px">
<a href="javascript:void(0)" class="publish-btn">发布</a>
</div>

Jquery和Ajax部分

//发布长微博
$("#postWeibo").click(function () {
var blogID = $("#hfID").val();
var title = $("#title").val();
var imgurl = $("#previewImgHide").val();
var des = editor.getContent();
if (title == "") {
ShowFailTip('微博标题不能为空!');
return;
}
if (title.length >= 40) {
ShowFailTip("微博标题不能超出40个字!");
return;
}
//检查是否数字
if (isNaN(fee)) {
ShowFailTip("不能包含文本必须是数值!");
return;
}
if (ContainsDisWords(title + des)) {
ShowFailTip('您输入的内容含有禁用词,请重新输入!');
return;
}
$.ajax({
url: "/fx" + $Maticsoft.BasePath + "Blog/AjaxUpdate",
type: 'POST',
async: false,
dataType: 'html',
// timeout: 10000,
data: { Title: title, CityID: city, Fee: fee, CategoryID: category, Days: days, Tag: tag, startDate: startdate, endDate: enddate, ImgUrl: imgurl, Des: des, BlogID: blogID }, //
success: function (resultData) {
$(".dialogDiv").hide();
if (resultData == "No") {
ShowFailTip("操作失败,请您重试!");
} else if (resultData == "AA") {
$.jBox.tip('管理员不能操作', 'error');
} else {
var data = $(resultData);
}
}
});
});

MVC Controller控制器和表单参数传递

1.普通参数

HTML标签name 和参数名一样。

public ActionResult AskForm(string txtTitle, string txtEditor, string dplBDTType, string selType, string txtYZM)
{
}

2.实体传参

HTML标签name 属性和Model属性保持一致

[HttpPost]
public ActionResult Apply(ViewModel.SNS.Star model)
{
//逻辑
}

4.表单集合传参

[HttpPost]
public ActionResult Apply(FormCollection Form)
{
//逻辑
}

以上所述是小编给大家介绍的Mvc提交表单的4种方法全程详解 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
mvc中form表单提交的三种方式(推荐)
Aug 10 #Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 #Javascript
浅谈jQuery中的checkbox问题
Aug 10 #Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 #Javascript
Three.js学习之网格
Aug 10 #Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 #Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 #Javascript
You might like
php 生成WML页面方法详解
2009/08/09 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
django foreignkey(外键)的实现
2019/07/29 Python
详解python pandas 分组统计的方法
2019/07/30 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
航海技术专业毕业生推荐信
2014/07/09 职场文书
六五普法宣传标语
2014/10/06 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
五四青年节活动总结
2015/02/10 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python