zoukankan      html  css  js  c++  java
  • ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

    前言:写这篇随笔的时候,在url上漏写了斜线,找了好久错误,整个人都很不好。#我是猪系列

    背景:之前介绍过一篇如何构建ASP.NET MVC4&JQuery&AJax&JSon示例,这一篇单独讲解如何在View和Action间传递并处理数据。

    1,前台HTML代码:

    1     <div>
    2         <button type="button" id="btn">从视图向控制器中传递数据</button>
    3         <p id="info"></p>
    4     </div>
    View Code

    2,前台JS代码:

     1         $("#btn").click(function() {
     2             $.ajax({
     3                 async:true,
     4                 type: "POST",
     5                 url: "/AjaxTest/AjaxBackData",
     6                 cache: false,
     7                 data: {
     8                     Name: "SharpL", City: "北京", Age: 18
     9                 },
    10                 success: function (result) {
    11                     $("#info").text(result);
    12                 }
    13             });
    14         });
    View Code

    JS代码讲解:注意url: "/AjaxTest/AjaxBackData",AjaxTest前的‘/'千万不能漏掉,博主已经开始怀疑人生了。

         data: {Name: "SharpL", City: "北京", Age: 18},数据就是这样以匿名对象的方式传递过去的。

    或者JS代码这样来写:

     1     $(function () {
     2         $("#btn").click(function () {
     3             var data = "";
     4             data += "&Name=" +encodeURI("SharpL");
     5             data += "&Age=" + encodeURI(18);
     6             data += "&City=" + encodeURI("北京");
     7             $.ajax({
     8                 async:true,
     9                 type: "POST",
    10                 url: "/AjaxTest/AjaxBackData",
    11                 cache: false,
    12                 data: data,
    13                 success: function (result) {
    14                     $("#info").text(result);
    15                 }
    16             });
    17         });
    18     });
    View Code

    或者JS代码这样来写:

     1     $(function () {
     2         $("#btn1").click(function () {
     3             $.ajax({
     4                 type: "POST",
     5                 url: "/TestAjax/Test?City=北京&Name=SharpL&Age=18",
     6                 cache: false,
     7                 data: null,
     8                 success: function (result) {
     9                     if (result) {
    10                         $("#pDisplay").text("返回信息为 " + result.Message + "
    " + "随机数为" + result.RandomNum);
    11                     }
    12                 }
    13                 });
    14         });
    15     })
    View Code

    三者的结果完全相同。

    3,后台代码如下:

    1         public ActionResult AjaxBackData(STU stu)
    2         {
    3             string name = stu.Name;
    4             int age = stu.Age;
    5             string city = stu.City;
    6             string tmp=string.Format("{0}年龄{1}岁,来自{2}",name,age,city);
    7             return Content(tmp);
    8         }
    View Code

    注意Action的参数为STU,直接获取以ajax方式传递过来的数据。

    或者后台代码如下:(项目中所使用的经典方式)

    1         public ActionResult AjaxBackData()
    2         {
    3             var stu = new STU();
    4             this.UpdateModel(stu);
    5             string tmp=string.Format("{0}年龄{1}岁,来自{2}",stu.Name,stu.Age,stu.City);
    6             return Content(tmp);
    7         }
    View Code

    或者后台代码如下:(以显示ContentResult的方式返回)前两种方式返回Content,其返回值仍然是ContentResult。

    1             var actionResult = default(ContentResult);
    2             var stu =new Stu();
    3             this.UpdateModel(stu);
    4             actionResult=new ContentResult(){
    5                 Content=string.Format("{0}{1}岁,来自{2}",stu.Name,stu.Age,stu.City)
    6             };
    7             return actionResult;
    View Code

    Content只能够返回Content,当需要返回多项数据时,返回Json(),代码如下:

    1         public ActionResult Test()
    2         {
    3             var stu = new Stu();
    4             this.UpdateModel(stu);
    5             var tmp= string.Format("{0}{1}岁,来自{2}", stu.Name, stu.Age, stu.City);
    6             Random r=new Random();
    7             int t=r.Next(1,10);
    8             return Json(new { Message = tmp, RandomNum = t });
    9         }
    View Code

    2.2同时前台Ajax接收的代码修改如下:

    1                 success: function (result) {
    2                     if (result) {
    3                         $("#pDisplay").text("返回信息为 " + result.Message + "
    " + "随机数为" + result.RandomNum);
    4                     }
    5                 }
    View Code

    类似的,可以将Json修改为显式返回JsonResult对象,代码如下:

     1         public ActionResult Test()
     2         {
     3             var actionResult = default(JsonResult);
     4             var stu = new Stu();
     5             this.UpdateModel(stu);
     6             var tmp= string.Format("{0}{1}岁,来自{2}", stu.Name, stu.Age, stu.City);
     7             Random r=new Random();
     8             int t=r.Next(1,10);
     9             actionResult = new JsonResult()
    10             {
    11                 Data = new { Message = tmp, RandomNum = t }
    12             };
    13             return actionResult;
    14         }
    View Code



  • 相关阅读:
    hihoCoder #1062 : 最近公共祖先·一
    hihoCoder #1050 : 树中的最长路
    hihoCoder #1049 : 后序遍历
    108 Convert Sorted Array to Binary Search Tree 将有序数组转换为二叉搜索树
    107 Binary Tree Level Order Traversal II 二叉树的层次遍历 II
    106 Construct Binary Tree from Inorder and Postorder Traversal 从中序与后序遍历序列构造二叉树
    105 Construct Binary Tree from Preorder and Inorder Traversal 从前序与中序遍历序列构造二叉树
    104 Maximum Depth of Binary Tree 二叉树的最大深度
    102 Binary Tree Level Order Traversal 二叉树的层次遍历
    101 Symmetric Tree 判断一颗二叉树是否是镜像二叉树
  • 原文地址:https://www.cnblogs.com/SharpL/p/4681596.html
Copyright © 2011-2022 走看看