Asp.net MVC 控制器扩展方法实现jsonp

项目需要，在使用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}", "100px" },
　　　　{ field: "UnitsInStock", title: "Units In Stock", "100px" },
　　　　{ field: "Discontinued", "100px" },
　　　　{ command: ["edit", "destroy"], title: "&nbsp;", "160px" }]
　　　　});
　　});
</script>
</div>

<style type="text/css">
.customer-photo {
display: inline-block;
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.结果如下