项目需要,在使用KendoUI,又涉及到jsonp数据格式的处理,网上看到这样一种实现方法,在此小记一下(其实是因为公司里只能上博客园等少数网站,怕自己忘了,好查看一下,哈哈哈)

1. 新建控制器扩展类 ContollerExtensions.cs

public static class ContollerExtensions
{
  public static JsonpResult Jsonp(this Controller controller, object data)
  {
    JsonpResult result = new JsonpResult()
    {
      Data = data,
      JsonRequestBehavior = JsonRequestBehavior.AllowGet
    };
    return result;
  }

}

2.新建JsonpResult类,并继承JsonResult

public class JsonpResult : JsonResult
{
  private static readonly string JsonpCallbackName = "callback";
  private static readonly string CallbackApplicationType = "application/json";

  public override void ExecuteResult(ControllerContext context)
  {
    if (context == null)
    {
      throw new ArgumentNullException("context");
    }
    if ((JsonRequestBehavior == JsonRequestBehavior.DenyGet) &&
    String.Equals(context.HttpContext.Request.HttpMethod, "GET"))
    {
      throw new InvalidOperationException();
    }
    var response = context.HttpContext.Response;
    if (!String.IsNullOrEmpty(ContentType))
      response.ContentType = ContentType;
    else
      response.ContentType = CallbackApplicationType;
    if (ContentEncoding != null)
      response.ContentEncoding = this.ContentEncoding;
    if (Data != null)
    {
      String buffer;
      var request = context.HttpContext.Request;
      var serializer = new JavaScriptSerializer();
      if (request[JsonpCallbackName] != null)
        buffer = String.Format("{0}({1})", request[JsonpCallbackName], serializer.Serialize(Data));
      else
        buffer = serializer.Serialize(Data);
      response.Write(buffer);
    }
  }
}

3.在控制器中使用

public class ProductsController : Controller
{
  private static List<Product> products = new List<Product>()
  {
    new Product(){ProductID=10,ProductName="testPro1",UnitPrice=12,UnitsInStock=12,Discontinued=false},
    new Product(){ProductID=11,ProductName="testPro2",UnitPrice=1,UnitsInStock=12,Discontinued=false},
    new Product(){ProductID=12,ProductName="testPro3",UnitPrice=17,UnitsInStock=12,Discontinued=true},
    new Product(){ProductID=13,ProductName="testPro4",UnitPrice=22,UnitsInStock=12,Discontinued=false}
  };

  public ActionResult Index()
  {
    return View();
  }

  public JsonResult List()
  {
    return this.Jsonp(products);
  }
}

4.对应的视图,这里用了kendui的grid接收数据

@{
ViewBag.Title = "Grid Demo1";
}
<link href="~/Content/kendoui/examples-offline.css" rel="stylesheet" />
<link href="~/Content/kendoui/styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendoui/kendo.rtl.min.css" rel="stylesheet" />
<link href="~/Content/kendoui/styles/kendo.default.min.css" rel="stylesheet" />

<script src="~/Content/kendoui/js/jquery.min.js"></script>
<script src="~/Content/kendoui/js/kendo.view.min.js"></script>
<script src="~/Content/kendoui/console.js"></script>
<script src="~/Content/kendoui/js/kendo.all.min.js"></script>

<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
  dataSource: {
  type: "jsonp",
  transport: {
    read: "/Products/List"
  },
  pageSize: 20,
  schema: {
    model: {
    id: "ProductID",
    fields: {
      ProductID: { editable: false, nullable: true },
      ProductName: { validation: { required: true } },
      UnitPrice: { type: "number", validation: { required: true, min: 1 } },
      Discontinued: { type: "boolean" },
      UnitsInStock: { type: "number", validation: { min: 0, required: true } }
      }
    }
  }
  },
  height: 550,
  groupable: true,
  sortable: true,
  pageable: {
    refresh: true,
    pageSizes: true,
    buttonCount: 5
  },
  columns: [
    { field: "ProductName", title: "Product Name" },
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
    { field: "UnitsInStock", title: "Units In Stock", width: "100px" },
    { field: "Discontinued", width: "100px" },
    { command: ["edit", "destroy"], title: "&nbsp;", width: "160px" }]
    });
  });
</script>
</div>

<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}

.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>

5.结果如下

最新文章

  1. webapp应用---cordova.js 3.7.0插件安装总结
  2. .NET中的垃圾回收
  3. Parallel Computing–Cannon算法 (MPI 实现)
  4. jsp通过s:hidden传值给后台,后台数据出现了若干逗号问题
  5. C++中的虚函数(表)实现机制以及用C语言对其进行的模拟实现
  6. spring mvc+mybatis+多数据源切换
  7. 指令重排序及Happens-before法则随笔
  8. 元素ID命名规范
  9. cf437B The Child and Set
  10. Android studio听云接入另外一种方式
  11. zoj 1184
  12. oracle10g安装图解(win7)
  13. HTML学习笔记(七)
  14. 自定义TextView跑马灯
  15. 题解 P3246 【[HNOI2016]序列】
  16. 实验一《Java开发环境的熟悉》实验报告
  17. React事件绑定几种方法测试
  18. 【原创】新说Mysql事务隔离级别
  19. jmetter 安装 建测试计划详细步骤
  20. DAY3(PYTHON)

热门文章

  1. 【原】spring redis 缓存注解使用
  2. SSM(Spring+SpringMVC+Mybstis)搭建,写给新手
  3. java工具类-交易码
  4. Springmvc中的HandlerAdaptor执行流程
  5. 通过编写聊天程序来熟悉python中多线程及socket的用法
  6. linq中如何实现多个条件的联合查询
  7. JavaWeb学习总结(七):通过Servlet生成验证码及其应用 (BufferedImage类)
  8. python之定义函数
  9. LeetCode 527---Word Abbreviation
  10. 如何将钉钉集成到FineReport插件中