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 快捷键设置实现代码
Mar 13 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
Validform表单验证总结篇
Oct 31 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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
第六章 php目录与文件操作
2011/12/30 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
JS hashMap实例详解
2016/05/26 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
python 实现删除文件或文件夹实例详解
2016/12/04 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
高中生学习总结的自我评价范文
2013/10/13 职场文书
护理学毕业生求职信
2013/11/14 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
质检部经理岗位职责
2014/02/19 职场文书