在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屬性可以獲得從客戶端傳遞來的異步數據。

傳遞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>

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對的支持。如果你想了解更多相關內容請查看下面相關鏈接