总结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, 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>

就这样。

时间: 2024-09-30 10:39:15

总结ASP.NET MVC视图页使用jQuery传递异步数据的几种方式的相关文章

ASP.NET MVC 视图(一)

ASP.NET MVC 视图(一) 前言 从本篇开始就进入到了MVC中的视图部分,在前面的一些篇幅中或多或少的对视图和视图中的一些对象的运用进行了描述,不过毕竟不是视图篇幅说的不全面,本篇首先为大家讲解一下自定义视图引擎的定义和使用,由此慢慢的来了解视图引擎以及视图模块的工作过程. ASP.NETMVC 视图 l 自定义视图引擎简易示例 l Razor视图引擎执行过程 l  Razor视图的依赖注入.自定义视图辅助器 l  分段.分部视图的使用 l  Razor语法.视图辅助器 自定义视图引擎

(转)Asp.Net Mvc视图引擎Razor介绍

Asp.Net Mvc视图引擎Razor介绍 1.Razor介绍 程序园原创,转载请注明:http://www.kwstu.com/ArticleView/dabaomvc_201408240820545275 1)ASP.NET MVC3 带来了一种新的名为Razor 的视图引擎,提供了下列优点: Razor 的语法简单且清晰,只需要最小化的输入 Razor 容易学习,语法类似于 C# 和 VB Visual Studio 对于 Razor 提供了智能提示和语法着色 Razor 视图不需要允许

ASP.NET MVC 视图(五)

ASP.NET MVC 视图(五) 前言 上篇讲解了视图中的分段概念.和分部视图的使用,本篇将会对Razor的基础语法简洁的说明一下,前面的很多篇幅中都有涉及到视图的调用,其中用了很多视图辅助器,也就是相当于传统webform中的服务器控件,它们都是给我们带来方便的.都是用于生成Html代码的. ASP.NETMVC 视图 l  自定义视图引擎 l Razor视图引擎执行过程 l  Razor视图的依赖注入.自定义视图辅助器 l  分段.分部视图的使用 l  Razor语法.视图辅助器 Razo

ASP.NET MVC 视图(二)

ASP.NET MVC 视图(二) 前言 上篇中对于视图引擎只是做了简单的演示,对于真正的理解视图引擎的工作过程可能还有点模糊,本篇将会对由MVC框架提供给我们的Razor视图引擎的整个执行过程做一个粗略的讲解,目的在于让大家对Razor视图引擎的执行过程留个印象以便联想的思考到视图引擎的作用以及视图在MVC框架中的表示. ASP.NET MVC 视图 自定义视图引擎 Razor视图引擎执行过程 Razor视图的依赖注入.自定义视图辅助器 分段.分部视图的使用 Razor语法.视图辅助器 Raz

ASP.NET MVC 视图(三)

ASP.NET MVC 视图(三) 前言 上篇对于Razor视图引擎和视图的类型做了大概的讲解,想必大家对视图的本身也有所了解,本篇将利用IoC框架对视图的实现进行依赖注入,在此过程过会让大家更了解的视图,最后还会简单的介绍一下自定义的视图辅助器是怎么定义和使用的. ASP.NET MVC 视图 l  自定义视图引擎 l Razor视图引擎执行过程 l Razor视图的依赖注入.自定义视图辅助器 l  分段.分部视图的使用 l  Razor语法.视图辅助器   Razor视图的依赖注入 首先我们

ASP.NET MVC 视图(四)

ASP.NET MVC 视图(四) 前言 上篇对于利用IoC框架对视图的实现进行依赖注入,最后还简单的介绍一下自定义的视图辅助器是怎么定义和使用的,对于Razor语法的细节和辅助器的使用下篇会说讲到,本篇来讲解一下视图中的分段概念.和分部视图的使用. ASP.NET MVC 视图 自定义视图引擎 Razor视图引擎执行过程 Razor视图的依赖注入.自定义视图辅助器 分段.分部视图的使用 Razor语法.视图辅助器 分段.分部视图的使用 分段的使用 在ASP.NET MVC框架的Razor引擎中

为ASP.NET MVC视图输出json

做个小小练习,为asp.net mvc视图输出json字符串: 创建JsonResult操作: 创建此视图: 浏览结果:

Asp.net MVC 视图引擎

Asp.net MVC视图引擎有两种: 1.ASPX View Engine 这个做过WebForm的人都清楚 设计目标:一个用于呈现Web Form页面的输出的视图引擎. 2.Razor View 在Asp.net MVC 3 版本引入的, 可以支持UnitTest,也容易上手. Razor在减少代码冗余.增强代码可读性和vs 智能感知方面,都有着很大的优势. 下面主要讨论下视图引擎 ActionResult 讲到视图引擎,不得不说ActionResult,因为在Controller中,我们看

Asp.net MVC中 Controller 与 View之间的数据传递

在ASP.NET MVC中,经常会在Controller与View之间传递数据 1.Controller向View中传递数据 (1)使用ViewData["user"] (2)使用ViewBag.user (3)使用TempData["user"] (4)使用Model(强类型) 区别: (1)ViewData与TempData方式是弱类型的方式传递数据,而使用Model传递数据是强类型的方式. (2)ViewData与TempData是完全不同的数据类型,View