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 replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
七个很有意思的PHP函数
May 12 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
如何实现vue的tree组件
Dec 03 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+memcache实现消息队列案例分享
2014/05/21 PHP
浅谈php冒泡排序
2014/12/30 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
php微信开发之关注事件
2018/06/14 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python判断两个对象相等的原理
2017/12/12 Python
python读取各种文件数据方法解析
2018/12/29 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
sort命令的作用和用法
2012/11/04 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
师范院校学生自荐信范文
2013/12/27 职场文书
实用的简历自我评价
2014/03/06 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
公务员政审材料
2014/12/23 职场文书
教师个人发展总结
2015/02/11 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
Python pandas求方差和标准差的方法实例
2021/08/04 Python
Java 在生活中的 10 大应用
2021/11/02 Java/Android