Asp.NetMVC 3実現JSONP
14627 ワード
JSONPは、ドメイン間アクセスの問題を解決します.JSONP is JSON With Padding. ここではその原理を説明しません.ASP.で見てみましょうNET MVC 3はどのように実現しますか.まずJsonpResultを定義する必要がありますコードはこのようにJsonResultから直接継承され、overrideはExecuteResultメソッドを継承します.
Controllerで使用すると、私たちのControllerはApiControllerと呼ばれ、その中のAction:
上記の方法ではstringのパラメータを受信し、前に接頭辞文字列を追加し、最後にJsonp Resultを返します.値を渡すModel:
WebSiteの実行、アクセス
http://localhost:50211/Api/GetInformation?callback=myfunction&key=haha
このような結果を見ることができます.
ここで使用するJQueryのAjaxはそれを呼び出して、JQueryのを熟知して理解することができるべきで、結果はbuttonの下でdivは文字列を表示します:You provided key:some data key、this parameter is optional
ここでは、getJSONの方法を用いてもよい.はい、簡単です.Web開発に役立つことを期待しています.興味のある記事を参照してください.
Asp.NetMVC 3におけるUnobtrusive javascriptとAjax
HTML 5におけるcustom data-*の特性とasp.Netmvc 3フォーム検証
作者:Petter Liu出典:http://www.cnblogs.com/wintersun/本文の著作権は作者とブログ園に共有され、転載を歓迎するが、著者の同意を得ずにこの声明を保留し、文章のページの明らかな位置で原文の接続を与えなければならない.そうしないと、法律責任を追及する権利を保留する.この記事は、私の独立したブログにも掲載されています.Petter Liu Blog.
public class JsonpResult : JsonResult
{
private static readonly string JsonpCallbackName = "callback";
private static readonly string CallbackApplicationType = "application/json";
/// <summary>
/// Enables processing of the result of an action method by a custom type that inherits from the <see cref="T:System.Web.Mvc.ActionResult"/> class.
/// </summary>
/// <param name="context">The context within which the result is executed.</param>
/// <exception cref="T:System.ArgumentNullException">The <paramref name="context"/> parameter is null.</exception>
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);
}
}
}
:
public static class ContollerExtensions
{
/// <summary>
/// Extension methods for the controller to allow jsonp.
/// </summary>
/// <param name="controller">The controller.</param>
/// <param name="data">The data.</param>
/// <returns></returns>
public static JsonpResult Jsonp(this Controller controller, object data)
{
JsonpResult result = new JsonpResult()
{
Data = data,
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
return result;
}
}
Controllerで使用すると、私たちのControllerはApiControllerと呼ばれ、その中のAction:
/// <summary>
/// Get some basic information with a JSONP GET request.
/// </summary>
/// <remarks>
/// Sample url:
/// http://localhost:50211/Api/GetInformation?key=test&callback=json123123
/// </remarks>
/// <param name="key">key</param>
/// <returns>JsonpResult</returns>
public JsonpResult GetInformation(string key)
{
var resp = new Models.CustomObject();
if (ValidateKey(key))
{
resp.Data = "You provided key: " + key;
resp.Success = true;
}
else
{
resp.Message = "unauthorized";
}
return this.Jsonp(resp);
}
private bool ValidateKey(string key)
{
if (!string.IsNullOrEmpty(key))
return true;
return false;
}
上記の方法ではstringのパラメータを受信し、前に接頭辞文字列を追加し、最後にJsonp Resultを返します.値を渡すModel:
public class CustomObject
{
public bool Success { get; set; }
public object Data { get; set; }
public string Message { get; set; }
}
WebSiteの実行、アクセス
http://localhost:50211/Api/GetInformation?callback=myfunction&key=haha
このような結果を見ることができます.
myfunction({"Success":true,"Data":"You provided key: haha","Message":null})
, :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.result').hide();
$('#test').click(function () {
$('.result').fadeOut('fast');
$('.result').html('');
$.ajax({
url: 'http://localhost:50211/Api/GetInformation',
data: { key: $('input[name=key]').val() },
type: "GET",
dataType: "jsonp",
jsonpCallback: "localJsonpCallback"
});
});
});
function localJsonpCallback(json) {
//do stuff...
if (json.Success) {
$('.result').html(json.Data);
}
else {
$('.result').html(json.Message);
}
$('.result').fadeIn('fast');
}
</script>
</head>
<body>
<div>
Enter key: <input type="text" name="key" value="some data key, this parameter is optional" />
<br /><input type="button" value="Test JSONP" id="test" />
<div class="result">
</div>
</div>
</body>
</html>
ここで使用するJQueryのAjaxはそれを呼び出して、JQueryのを熟知して理解することができるべきで、結果はbuttonの下でdivは文字列を表示します:You provided key:some data key、this parameter is optional
ここでは、getJSONの方法を用いてもよい.はい、簡単です.Web開発に役立つことを期待しています.興味のある記事を参照してください.
Asp.NetMVC 3におけるUnobtrusive javascriptとAjax
HTML 5におけるcustom data-*の特性とasp.Netmvc 3フォーム検証
作者:Petter Liu出典:http://www.cnblogs.com/wintersun/本文の著作権は作者とブログ園に共有され、転載を歓迎するが、著者の同意を得ずにこの声明を保留し、文章のページの明らかな位置で原文の接続を与えなければならない.そうしないと、法律責任を追及する権利を保留する.この記事は、私の独立したブログにも掲載されています.Petter Liu Blog.