zoukankan      html  css  js  c++  java
  • ASP.NET MVC + jQuery + Newtonsoft.Json 快乐的AJAX

    这是目前我的方案,个人觉得还蛮轻巧自在的。 Controller负责把要输出的资料序列成json。

    Html.ActionUrl 这只method原来的MVC Toolkit没有,我随手加的。

    我 是用Newtonsoft.Json作物件序列成JSON,那为什麽不用MS Ajax内建的 System.Web.Script.Serialization.JavaScriptSerializer 来做,是因为他将DateTime序列成字串格式,Client 端无法直接取用。Newtonsoft.Json的部份我也是小改一点,让他可以做Value Type 的序列化,可参考。

    附带一提,我是架在iis 5.1上测试,本来看到 IIS 6.0 和 ASP.NET 3.5 / VS 2008 的相容性测试,己为会很困难的,大概是测MVC Web Project比较单纯吧,装完 .NET Framework 3.5 再装 ASP.NET 3.5 Extensions Preview (是的,目前只是preview版),直接就ok了。

    底 下的流程 Controller(AjaxTest) -> View(AjaxPage) -> Controller(Ajax, id=1) -> View(AjaxPage) 取得json ->Controller(Ajax, id=2) -> View(AjaxPage) 取得json -> end ,大概是这样。(如果画成图会比较漂亮吧)

    ControllerBase.cs
      public class ControllerBase : Controller {
        public void RenderJSON(object obj) {
          string jsonString = Newtonsoft.Json.JavaScriptConvert.SerializeObject(obj);
          Response.Clear();
          Response.ContentEncoding = Encoding.UTF8;
          Response.ContentType = "application/json";
          Response.Write(jsonString);
          Response.Flush();
          Response.End();
        }
      }
    HomeController.cs
      public class HomeController : ControllerBase {
        [ControllerAction]
        public void AjaxTest() {
          RenderView("AjaxPage");
        }
        [ControllerAction]
        public void Ajax(int id) {
          switch (id) {
            case 1:       
              RenderJSON(DateTime.Now.ToString());          
              break;
            case 2:
              Order[] orders = new Order[] {
                new Order() {PK=1, Title="B001", OrderDate = DateTime.Now},
                new Order() {PK=2, Title="A003", OrderDate = DateTime.Now}
              };
              RenderJSON(orders);
              break;
            case 3:          
              int n1,n2;
              int.TryParse(Request["n1"],out n1);
              int.TryParse(Request["n2"],out n2);            
              RenderJSON(n1 + n2);
              break;
          }
        }
      }
    }
    AjaxPage.aspx
     <script language="javascript" type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.min.js"></script>
     <script language="javascript" type="text/javascript">
      $(document).ready(function() {
        var actionUrl1 = '<%=Html.ActionUrl("ajax", "/1") %>';
        var actionUrl2 = '<%=Html.ActionUrl("ajax", "/2") %>';
        var actionUrl3 = '<%=Html.ActionUrl("ajax", "/3") %>';
        $("#link1").click(function() {
          $.getJSON(actionUrl1, { }, function(json){
           alert("Server Time: " + json);
          });
        });
        $("#link2").click(function() {
          $.getJSON(actionUrl2, { }, function(json){
           alert("total " + json.length.toString() + " records");
           for(var i=0;i<json.length;i++) {
            alert(json[i].PK + ", " + json[i].Title + ", " + json[i].OrderDate);
           }       
          });
        });
        $("#t1,#t2").change(function() {
          $.getJSON(actionUrl3, { "n1": $("#t1").val(),"n2": $("#t2").val() }, function(json){
           $("#t3").val(json.toString());
          });
        });    
      });
     </script>
     <h3>
      Ajax Page</h3>
     <ol>
      <li><a id="link1" href="#">Get Server Time</a></li>
      <li><a id="link2" href="#">Return Object</a></li>
      <li>
       <input type="text" name="t1" id="t1" maxlength="4" style=" 40px" />
       +
       <input type="text" name="t2" id="t2" maxlength="4" style=" 40px" />
       =
       <input type="text" name="t3" id="t3" maxlength="4" readonly="readonly" style=" 40px" />
      </li>  
     </ol>

  • 相关阅读:
    JMeter Gui – TestElement约定(转自约会言行的博客,链接:http://blog.csdn.net/yue530tomtom/article/details/77649872?locationNum=4&fps=1)
    Maven的下载和安装
    开源蜘蛛集合(转自haizhiguang博客,链接:http://blog.csdn.net/haizhiguang/article/details/20209573)
    HtmlCleaner CleanerProperties 参数配置(转自macken博客,链接:http://macken.iteye.com/blog/1579809)
    java解析xml汇总(转自倾城幻影-Java解析xml汇总,链接:http://www.cnblogs.com/jiugehuanying/archive/2012/01/12/2320058.html)
    [20191005机房测试] Reverse
    【HAOI2010】软件安装
    [20191004机房测试] ZGY的早餐
    [20191004机房测试] C++锦标赛
    [20191004机房测试] 三角
  • 原文地址:https://www.cnblogs.com/luluping/p/1435500.html
Copyright © 2011-2022 走看看