jQueryとASP.NET MVCを使用して埋め込みウィジェット

Question

私は私のサイトのユーザーが自分のサイト上で当社のコンテンツを表示するために使用することができることを、埋め込みウィジェットを開発する上での使用に最適なアプローチのためにいくつかのアドバイスを必要とします。

レッツは、私たちがレンダリングされるように、A jQueryののプラグインを使用して、いくつかのコンテンツを持っていると言う、と私たちお客様に自分のウェブサイトに埋め込むための簡単な方法を提供したい。

1つのオプションは、iFrameを使用するかもしれないが、我々は、これは非常に侵襲的であり、いくつかの問題を抱えている知っています。私も、その上のあなたの意見を知りたいのです。

別のアプローチは、項目＃23を表示するには、このようなコードを与えることができます：

<DIV id="mysitewidget23"><script src="http://example.com/scripts/wdg.js?id=23" /></DIV>

何とか（ヘルプは...ここで必要）DIV内部に注入コンテンツ、jQueryの、必要なプラグイン、にwdg.jsサーバー側のスクリプトを作成します。

ユーザーがある程度DIVのスタイルをカスタマイズすることができ、そして何IFRAMEを必要としないため、

このルックスは、より有望。しかし、これは、ASP.NET MVCでこれを行うための最善かつより効率的な方法は何ですか？

私たちが必要なものを達成するために、もちろん、多くの他のアプローチであります。

Answer 1

JSONP にこれを行うための一つの方法です。カスタムのActionResult のことを書くことによって開始しますあなたは、クロスドメインアヤックス制限

public class JsonpResult : JsonResult
{
    public override void ExecuteResult(ControllerContext context)
    {
        var response = context.HttpContext.Response;

        if (!string.IsNullOrEmpty(ContentType))
        {
            response.ContentType = ContentType;
        }
        else
        {
            response.ContentType = "application/json";
        }

        if (ContentEncoding != null)
        {
            response.ContentEncoding = ContentEncoding;
        }

        if (Data != null)
        {
            var request = context.HttpContext.Request;
            var serializer = new JavaScriptSerializer();
            if (null != request.Params["jsoncallback"])
            {
                response.Write(string.Format("{0}({1})",
                    request.Params["jsoncallback"],
                    serializer.Serialize(Data)));
            }
            else
            {
                response.Write(serializer.Serialize(Data));
            }
        }
    }
}

そして、あなたがJSONPを返すコントローラのアクション書くことができます：

を

public ActionResult SomeAction()
{
    return new JsonpResult
    {
        Data = new { Widget = "some partial html for the widget" }
    };
}

そして最後に、人々はjQueryのを使用して自分のサイトでこのアクションを呼び出すことができます：

$.getJSON('http://www.yoursite.com/controller/someaction?jsoncallback=?',
    function(json)
    {
        $('#someContainer').html(json.Widget);
    }
);

ユーザーが自分のサイト上でのjQueryを含めたくない場合は、

あなたは、人々が唯一のように、サイトからの単一のJavaScriptファイルをインクルードする必要がありますように、jQueryのを含めると、前のgetJSON呼び出しを実行しますあなたのサイト上でJavaScriptコードを書くかもしれませんあなたの例でます。

<時間>

UPDATE：

としては、ここでは、スクリプトから動的にjQueryをロードする方法を示す例ですコメント欄に尋ねました。ちょうどあなたのJavaScriptファイルに以下を入れます：

var jQueryScriptOutputted = false;
function initJQuery() {
    if (typeof(jQuery) == 'undefined') {
        if (!jQueryScriptOutputted) {
            jQueryScriptOutputted = true;
            document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\"></scr" + "ipt>");
        }
        setTimeout("initJQuery()", 50);
    } else {
        $(function() {
            $.getJSON('http://www.yoursite.com/controller/someaction?jsoncallback=?',
                function(json) {
                    // Of course someContainer might not exist
                    // so you should create it before trying to set
                    // its content
                    $('#someContainer').html(json.Widget);
                }
            );
        });
    }
}
initJQuery();