الحاجيات القابلة للتضمين باستخدام jQuery و ASP.NET MVC

Question

أحتاج إلى بعض النصائح للحصول على أفضل طريقة لاستخدامها في تطوير أجهزة تشغيل قابلة للتضمين التي يمكن لمستخدمي موقعي استخدامها لإظهار المحتوى الخاص بنا على موقعهم.

لنفترض أن لدينا بعض المحتوى الذي يستخدم jQuery يتم تقديم البرنامج المساعد ، ونريد أن نمنح عملائنا طريقة سهلة لتضمينه في مواقع الويب الخاصة بهم.

يمكن أن يكون أحد الخيارات هو استخدام IFRAME ، ولكن كما نعلم أن هذا غازي للغاية ولديه بعض المشكلات. أود أن أعرف رأيك في ذلك أيضًا.

نهج آخر يمكن أن يعطي رمزًا كهذا ، لإظهار البند رقم 23:

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

وبطريقة ما (المساعدة المطلوبة هنا ...) إنشاء البرنامج النصي من جانب خادم WDG.JS لحقن المحتوى ، jQuery ، الإضافات اللازمة ، داخل DIV.

هذا يبدو أكثر واعدة ، حيث يمكن للمستخدم التخصيص إلى حد ما نمط Div ، وليس هناك حاجة إلى Iframe. ولكن ما هي أفضل طريقة وأكثر كفاءة للقيام بذلك في ASP.NET MVC؟

هناك بالطبع العديد من الأساليب الأخرى لتحقيق ما نحتاجه.

Answer 1

JSONP هي طريقة واحدة للقيام بذلك. تبدأ بكتابة العرف ActionResult سيؤدي ذلك إلى إرجاع JSONP بدلاً من JSON الذي سيسمح لك بالتشغيل حول المجال المتقاطع أياكس القيد:

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 واحد من الموقع كما في المثال الخاص بك .

---

تحديث:

كما طلب في قسم التعليقات ، إليك مثال يوضح كيفية تحميل 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();