ASP.NET MVC视图页使用jQuery传递异步数据的几种方式详解(asp网站程序工程师招聘)全程干货

随心笔谈12个月前发布 admin
97 0



在ASP.NET MVC的视图页向控制器传递异步数据,可能是数组,JavaScript对象,json,表单数据,等等。

关于数据,JavaScript对象有时候和json长得一模一样,有么有?

var person={Name: ‘darren’, Age: 21};

以上是一个JavaScript对象。不过也可以这样表示:

var person={“Name”:”darren”,”Age”:21};

以上JavaScript对象的另外一种表达方式,恰恰也符合json的表达方式。不过,JavaScript对象的写法推荐使用第一种方式。

关于异步ajax发送;data属性表示传递的数据;contentType树形的默认值是application/x-www-form-urlencoded,表示客户端请求类型;dataType表示从服务端返回的类型,可以是text, xml, json, script, html, jsonp。

而在服务端,通过Request.Form属性可以获得从客户端传递来的异步数据。

在Home/Index.cshtml视图中,使用jQuery发出一个异步请求,把返回的html内容加载到当前视图中。

@{
ViewBag.Title=”Index”;
Layout=”~/Views/Shared/_Layout.cshtml”;
}
<h2>Index</h2>
<div id=”result”></div>
@section scripts
{
<script type=”text/javascript”>
$(function() {
var person={Name: ‘Darren’, Age: 21};
$.ajax({
type: ‘GET’,
url: ‘@Url.Action(“GetInfo”,”Home”)’,
data: person,
datatype: ‘html’,
success:function(data) {
$(‘#result’).html(data);
}
});
});
</script>
}

HomeController中从Request.Form中获取数据,并返回强类型部分视图。

public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult GetInfo()
{
//从表单中获取的数据
var person=new Person();
person.Name=Request[“Name”];
person.Age=int.Parse(Request[“Age”]);
return PartialView(“_DisplayJavaScriptObject”, person);
}
}

Home/_DisplayJavaScriptObject.cshtml强类型视图展示数据。

@model MvcApplication1.Models.Person
<div>
<h3>从表单中读出的数据</h3>
<p><span>Name:</span><span>@Model.Name</span></p>
<p><span>Age:</span><span>@Model.Age</span></p>
</div>

传递数组的时候有几点需注意:

1、需要把数组toString()后作为json数据传递,toString()后数组变成以逗号隔开的字符串

2、是以Query String的形式传递给服务端的

3、服务端为了获取集合数据,需要split数组字符串

在Home/Index.cshtml视图中,使用jQuery发送异步GET请求时,数组ids需要toString()转换成”1,2,3″形式的字符串。

@{
ViewBag.Title=”Index”;
Layout=”~/Views/Shared/_Layout.cshtml”;
}
<h2>Index</h2>
<div id=”result”></div>
@section scripts
{
<script type=”text/javascript”>
$(function() {
var ids=[1, 2, 3];
$.ajax({
type: ‘GET’,
url: ‘@Url.Action(“GetInfo”,”Home”)’,
data: { myArr: ids.toString() },
datatype: ‘html’,
success:function(data) {
$(‘#result’).html(data);
}
});
});
</script>
}

在HomeController中,通过Request.QueryString来获取数组字符串,最后再split转换成集合。

public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult GetInfo()
{
string temp=Request.QueryString[“myArr”];
List<int> result=new List<int>();
string[] tempArr=temp.Split(‘,’);
foreach (var item in tempArr)
{
result.Add(int.Parse(item));
}
ViewData[“t”]=result;
return PartialView(“_DisplayJavaScriptObject”);
}
}

Home/_DisplayJavaScriptObject.cshtml从ViewData中取出数据遍历集合展示数据。

@foreach (var item in ViewData[“t”] as IEnumerable<int>)
{
<span>@item.ToString()</span>
}

传递表单数据的时候有几点需注意:

1、通过$(‘#myForm’).serialize()把表单数据封装起来

2、控制器Action方法需要打上[HttpPost]

3、控制器Action方法,可以通过强类型参数来接收,也可通过Request[“Name”]的方式获取数据

在Home/Index.cshtml视图中,使用jQuery发送异步POST请求时,使用$(‘#myForm’).serialize()把表单数据封装起来。

@{
ViewBag.Title=”Index”;
Layout=”~/Views/Shared/_Layout.cshtml”;
}
<h2>Index</h2>
<div>
<form id=”myForm”>
<div>
@Html.Label(“Name”,”姓名”)
@Html.TextBox(“Name”,”Darren”)
</div>
<div>
@Html.Label(“Age”,”年龄”)
@Html.TextBox(“Age”,”21″)
</div>
</form>
<div>
<button id=”btn”>提交</button>
</div>
</div>
<div id=”result”></div>
@section scripts
{
<script type=”text/javascript”>
$(function() {
$(‘#btn’).on(“click”, function() {
$.ajax({
type: ‘POST’,
url: ‘@Url.Action(“GetInfo”,”Home”)’,
data: $(‘#myForm’).serialize(),
dataType: ‘html’,
success: function(data) {
$(‘#result’).html(data);
}
});
});
});
</script>
}

在HomeController中,需要在GetInfo方法上打上[HttpPost],用强类型参数来接收数据。

public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult GetInfo(Person person)
{
return PartialView(“_DisplayJavaScriptObject”, person);
}
}

Home/_DisplayJavaScriptObject.cshtml强类型视图展示数据。

@model MvcApplication1.Models.Person
<div>
<h3>从表单中读出的数据</h3>
<p><span>Name:</span><span>@Model.Name</span></p>
<p><span>Age:</span><span>@Model.Age</span></p>
</div>

传递json数据需注意的是:

1、json格式要写对:{ “Name”:”Darren”,”Age”:21}

2、控制器Action方法中通过Request[“Name”]的方式获取数据

在Home/Index.cshtml视图中,使用jQuery发送异步Get请求。

@{
ViewBag.Title=”Index”;
Layout=”~/Views/Shared/_Layout.cshtml”;
}
<h2>Index</h2>
<div id=”result”></div>
@section scripts
{
<script type=”text/javascript”>
$(function() {
$.ajax({
type: ‘GET’,
url: ‘@Url.Action(“GetInfo”,”Home”)’,
data: { “Name”:”Darren”,”Age”:21},
datatype: ‘html’,
success:function(data) {
$(‘#result’).html(data);
}
});
});
</script>
}

在HomeController中通过Request[“Name”]的方式获取数据。

public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult GetInfo()
{
//从表单中获取的数据
var person=new Person();
person.Name=Request[“Name”];
person.Age=int.Parse(Request[“Age”]);
return PartialView(“_DisplayJavaScriptObject”, person);
}
}

Home/_DisplayJavaScriptObject.cshtml强类型视图展示数据。

@model MvcApplication1.Models.Person
<div>
<h3>从表单中读出的数据</h3>
<p><span>Name:</span><span>@Model.Name</span></p>
<p><span>Age:</span><span>@Model.Age</span></p>
</div>

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

您可能感兴趣的文章:ASP.NET?MVC通过勾选checkbox更改select的内容ASP.NET?MVC使用Log4Net记录异常日志并跳转到静态页ASP.NET?MVC实现树形导航菜单ASP.NET?MVC扩展带验证的单选按钮ASP.NET MVC实现横向展示购物车ASP.NET MVC获取多级类别组合下的产品ASP.NET MVC使用正则表达式验证手机号码ASP.NET?MVC实现登录后跳转到原界面ASP.NET?MVC使用jQuery的Load方法加载静态页面及注意事项

© 版权声明

相关文章