ASP.NET MVC視圖頁(yè)使用jQuery傳遞異步數(shù)據(jù)的幾種方式詳解

更新時(shí)間：2022年09月19日 08:28:10 作者：Darren Ji

本文詳細(xì)講解了ASP.NET MVC視圖頁(yè)使用jQuery傳遞異步數(shù)據(jù)的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

在ASP.NET MVC的視圖頁(yè)向控制器傳遞異步數(shù)據(jù)，可能是數(shù)組，JavaScript對(duì)象，json，表單數(shù)據(jù)，等等。

關(guān)于數(shù)據(jù)，JavaScript對(duì)象有時(shí)候和json長(zhǎng)得一模一樣，有么有？

var person = {Name: 'darren', Age: 21};
以上是一個(gè)JavaScript對(duì)象。不過(guò)也可以這樣表示：

var person = {"Name":"darren","Age":21};
以上JavaScript對(duì)象的另外一種表達(dá)方式，恰恰也符合json的表達(dá)方式。不過(guò)，JavaScript對(duì)象的寫(xiě)法推薦使用第一種方式。

關(guān)于異步ajax發(fā)送；data屬性表示傳遞的數(shù)據(jù)；contentType樹(shù)形的默認(rèn)值是application/x-www-form-urlencoded，表示客戶端請(qǐng)求類型；dataType表示從服務(wù)端返回的類型，可以是text, xml, json, script, html, jsonp。

而在服務(wù)端，通過(guò)Request.Form屬性可以獲得從客戶端傳遞來(lái)的異步數(shù)據(jù)。

傳遞JavaScript對(duì)象

在Home/Index.cshtml視圖中，使用jQuery發(fā)出一個(gè)異步請(qǐng)求，把返回的html內(nèi)容加載到當(dāng)前視圖中。

@{
    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中獲取數(shù)據(jù)，并返回強(qiáng)類型部分視圖。

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetInfo()
        {
            //從表單中獲取的數(shù)據(jù)
            var person = new Person();
            person.Name = Request["Name"];
            person.Age = int.Parse(Request["Age"]);
            return PartialView("_DisplayJavaScriptObject", person);
        }
    }

Home/_DisplayJavaScriptObject.cshtml強(qiáng)類型視圖展示數(shù)據(jù)。

@model MvcApplication1.Models.Person
<div>
    <h3>從表單中讀出的數(shù)據(jù)</h3>
    <p><span>Name:</span><span>@Model.Name</span></p>
    <p><span>Age:</span><span>@Model.Age</span></p>
</div>

傳遞數(shù)組

傳遞數(shù)組的時(shí)候有幾點(diǎn)需注意：
1、需要把數(shù)組toString()后作為json數(shù)據(jù)傳遞，toString()后數(shù)組變成以逗號(hào)隔開(kāi)的字符串
2、是以Query String的形式傳遞給服務(wù)端的
3、服務(wù)端為了獲取集合數(shù)據(jù)，需要split數(shù)組字符串

在Home/Index.cshtml視圖中，使用jQuery發(fā)送異步GET請(qǐng)求時(shí)，數(shù)組ids需要toString()轉(zhuǎn)換成"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中，通過(guò)Request.QueryString來(lái)獲取數(shù)組字符串，最后再split轉(zhuǎn)換成集合。

    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中取出數(shù)據(jù)遍歷集合展示數(shù)據(jù)。

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

傳遞表單數(shù)據(jù)

傳遞表單數(shù)據(jù)的時(shí)候有幾點(diǎn)需注意：
1、通過(guò)$('#myForm').serialize()把表單數(shù)據(jù)封裝起來(lái)
2、控制器Action方法需要打上[HttpPost]
3、控制器Action方法，可以通過(guò)強(qiáng)類型參數(shù)來(lái)接收，也可通過(guò)Request["Name"]的方式獲取數(shù)據(jù)

在Home/Index.cshtml視圖中，使用jQuery發(fā)送異步POST請(qǐng)求時(shí)，使用$('#myForm').serialize()把表單數(shù)據(jù)封裝起來(lái)。

@{
    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]，用強(qiáng)類型參數(shù)來(lái)接收數(shù)據(jù)。

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

Home/_DisplayJavaScriptObject.cshtml強(qiáng)類型視圖展示數(shù)據(jù)。

@model MvcApplication1.Models.Person
<div>
    <h3>從表單中讀出的數(shù)據(jù)</h3>
    <p><span>Name:</span><span>@Model.Name</span></p>
    <p><span>Age:</span><span>@Model.Age</span></p>
</div>

傳遞json數(shù)據(jù)

傳遞json數(shù)據(jù)需注意的是：
1、json格式要寫(xiě)對(duì)：{ "Name":"Darren","Age":21}
2、控制器Action方法中通過(guò)Request["Name"]的方式獲取數(shù)據(jù)

在Home/Index.cshtml視圖中，使用jQuery發(fā)送異步Get請(qǐng)求。

@{
    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中通過(guò)Request["Name"]的方式獲取數(shù)據(jù)。

   public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetInfo()
        {
            //從表單中獲取的數(shù)據(jù)
            var person = new Person();
            person.Name = Request["Name"];
            person.Age = int.Parse(Request["Age"]);
            return PartialView("_DisplayJavaScriptObject", person);
        }
    }

Home/_DisplayJavaScriptObject.cshtml強(qiáng)類型視圖展示數(shù)據(jù)。

@model MvcApplication1.Models.Person
<div>
    <h3>從表單中讀出的數(shù)據(jù)</h3>
    <p><span>Name:</span><span>@Model.Name</span></p>
    <p><span>Age:</span><span>@Model.Age</span></p>
</div>

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

您可能感興趣的文章: