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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
js密码强度检测
Jan 07 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 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中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
php中smarty区域循环的方法
2015/06/11 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python中方法链的使用方法
2016/02/23 Python
Python装饰器简单用法实例小结
2018/12/03 Python
WxPython建立批量录入框窗口
2019/02/27 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python设置随机种子实例讲解
2019/09/12 Python
如何在sublime编辑器中安装python
2020/05/20 Python
Python 字符串池化的前提
2020/07/03 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
超市国庆节促销方案
2014/02/20 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
DE1107机评
2022/04/05 无线电
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript