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 相关文章推荐
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 Javascript
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
MYSQL环境变量设置方法
2007/01/15 PHP
php生成圆角图片的方法
2015/04/07 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
vue.js实现简单轮播图效果
2017/10/10 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python 全文检索引擎详解
2017/04/25 Python
python脚本第一行如何写
2020/08/30 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
简短证婚人证婚词
2014/01/09 职场文书
初中学生期末评语
2014/04/24 职场文书
起诉意见书范文
2015/05/19 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书