博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ASP.NET MVC 的表单提交
阅读量:2235 次
发布时间:2019-05-09

本文共 3097 字,大约阅读时间需要 10 分钟。

       ASP.NET MVC 开发过程中,我们经常要提交表单数据到后台进行处理。今天就把常见的开发过程中用到的一些数据(表单)提交的方式做一个总结,方便自己今后查阅,如果对大家有益,那就更好了,总结得不好请大家给我留言指正。

       首先我们说说不使用ASP.NET MVC 的一些特性,也不使用Jquery的Ajax做最简单的表单提交。这种表单提交只使用了HTML标签,使用html表单form的Action指向需要接收参数的Controllrt里面的Action。这时候获取表单里面的参数是通过Request.Form的形式来获取的。Request请求封装了form表单的具体细节。这个例子的代码如下:

 1.控制器

public ActionResult Regist(){     return View();}[HttpPost]public string Regist(string name){     string username = Request.Form["Username"];     string password = Request.Form["Password"];     return "Welcome:" + name;}

2.Regist.ashtml

@{    Layout = null;}    Regist            
User Regist
Username:
Password:

这里面我们仅仅使用了Jquery来获取form对象而已,通过document.GetElementById也可以办到,本质上来说还是可以不依赖Jquery的。

可以看到前端输入的值从后台的方法可以获取到,再进行处理就很方便了。这是最原始的表单提交方式,缺点在于如果字段很多的话,需要对每一个字段进行获取。

然后我们可以使用ASP.NET MVC 支持的模型绑定的form进行提交,模型绑定之后,我们就可以提交一个对象过去,这样就方便多了。模型绑定的控制器如下:

public ActionResult Regist2(){     return View();}[HttpPost]public ActionResult Regist2(User user){     return View();}

注意,控制器这时候跟模型没关系,绑定模型的页面直接和模型打交道。

@model MyMvcApp.Models.User@{    Layout = null;}@using (Html.BeginForm("Regist2", "Home", FormMethod.Post)){    

name:@Html.TextBoxFor(x => x.Name)

email:@Html.TextBoxFor(x => x.Email)

phone:@Html.TextBoxFor(x => x.Phone)

gender:@Html.DropDownListFor(x=>x.Gender,new []{ new SelectListItem{ Text = "boy", Value = "male", Selected = true}, new SelectListItem{ Text = "girl", Value = "female", Selected = false }},"--please select gender--")

}

这里的模型绑定之后,输入框等跟字段就直接绑定了。运行效果如下:

接下来,我们再讨论一种以Ajax形式提交的表单,就是AjaxForm,这种form是 html的一种扩展标签。ajax提交不需要刷新的特性增强了用户体验,不失为一种好方法。

控制器代码如下:

public ActionResult Regist3(){     return View();}[HttpPost]public string Regist3(User user){     return "Welcome:" + user.Name;}

页面的代码如下:

@model MyMvcApp.Models.User@{    Layout = null;}@using (Ajax.BeginForm("Regist3", "Home", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "result", OnSuccess = "OnSuccess" })){    

NAME:@Html.TextBoxFor(x => x.Name)

EMAIL:@Html.TextBoxFor(x => x.Email)

PHONE:@Html.TextBoxFor(x => x.Phone)

}

运行效果就是通过Ajax请求,返回一个欢迎用户的字符串。初始界面如下:

submit之后的界面:

最后介绍通过Ajax提交的表单形式,这种形式其实不局限于表单,通常做数据的提交都可以做,这里为了演示,使用了一个表单来做例子。控制器代码如下:

public ActionResult Regist4(){    return View();}[HttpPost]public string Regist4(string username,string email){    return "Hello: [" + username + "] your eamil is : [" + email + "]";}

页面代码如下:

@{    Layout = null;}
User Regis Demo
NAME:
Email:
Jquery Ajax Call Result Will Display here...

运行结果就是通过Ajax提交之后,返回结果,更新div里面的内容。

这几种形式的提交都是支持的,希望对大家有所帮助的。

你可能感兴趣的文章
JavaScript 经典例子
查看>>
判断数据的JS代码
查看>>
js按键事件说明
查看>>
AJAX 初次体验!推荐刚学看这个满好的!
查看>>
AJAX 设计制作 在公司弄的 非得要做出这个养的 真晕!
查看>>
Linux 查看文件大小
查看>>
Java并发编程:线程池的使用
查看>>
redis单机及其集群的搭建
查看>>
Java多线程学习
查看>>
检查Linux服务器性能
查看>>
Java 8新的时间日期库
查看>>
Chrome开发者工具
查看>>
【LEETCODE】102-Binary Tree Level Order Traversal
查看>>
【LEETCODE】106-Construct Binary Tree from Inorder and Postorder Traversal
查看>>
【LEETCODE】202-Happy Number
查看>>
和机器学习和计算机视觉相关的数学
查看>>
十个值得一试的开源深度学习框架
查看>>
【LEETCODE】240-Search a 2D Matrix II
查看>>
【LEETCODE】53-Maximum Subarray
查看>>
【LEETCODE】215-Kth Largest Element in an Array
查看>>