你的位置:首页 > ASP.net教程

[ASP.net教程]总结ASP.NET MVC视图页使用jQuery传递异步数据的几种方式


在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,

 

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

 

□ 传递JavaScript对象

 

在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数据

 

传递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>

 

就这样。