jQuery와 ASP.NET MVC를 사용하여 삽입 가능한 위젯

내 사이트 사용자가 자신의 사이트에 우리의 콘텐츠를 표시하는 데 사용할 수있는 내장 가능 위젯을 개발할 때 최상의 접근 방법에 대한 조언이 필요합니다.jQuery와 ASP.NET MVC를 사용하여 삽입 가능한 위젯

jQuery 플러그인을 사용하여 콘텐츠를 렌더링한다고 가정 해 보겠습니다. 고객에게 웹 사이트에 쉽게 삽입 할 수있는 방법을 제공하고자합니다.

하나의 옵션은 IFrame을 사용할 수 있지만 매우 침략적이며 몇 가지 문제가 있습니다. 나는 너의 의견을 알고 싶다. 콘텐츠를 주입하는 wdg.js 서버 측 스크립트를 작성 (... 도움이 여기에 필요) 어떻게 든

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

그리고 :

는 또 다른 방법은 항목 번호 23를 보여주기 위해이 같은 코드를 제공 할 수 jQuery, DIV 안에 플러그인 필요.

사용자가 DIV의 스타일을 어느 정도 사용자 정의 할 수 있고 IFRAME이 필요하지 않으므로 더 유망 해 보입니다. 그러나 ASP.NET MVC에서이 작업을 수행하는 가장 효율적인 방법은 무엇입니까?

물론 우리가 필요로하는 것을 달성하기위한 많은 다른 접근법이 있습니다.

출처

2010-02-21 marco

JSONP이 방법 중 하나입니다.

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

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를 반환하는 컨트롤러 액션을 쓸 수있다 : 당신은 당신이 도메인 간 주위 Ajax 제한을 작업 할 수 있습니다 대신 JSON의 JSONP를 반환하는 사용자 정의 ActionResult를 작성하여 시작

그리고 마지막으로 사람들이 사용하여 자신의 사이트에이 작업을 호출 할 수 있습니다 jQuery를 :

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

하는 사용자가 t를하지 않으려면 o 자신의 사이트에 jQuery를 포함 시키면 jQuery를 포함하고 이전의 getJSON 호출을 수행하는 JavaScript 코드를 사이트에 작성하여 사람들이 예제와 같이 사이트의 단일 JavaScript 파일 만 포함하면됩니다.

UPDATE : 코멘트 섹션에서 질문으로

여기에 스크립트에서 동적으로 jQuery를로드하는 방법을 설명하는 예입니다. 자바 스크립트 파일에 다음을 입력하십시오.

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();

출처

2010-02-21 14:27:08

이것은 대단한 영리한 해결책 인 것 같습니다. 필자는이를 구현했으며 jquery와 "고객"페이지에 필요한 플러그인을 명시 적으로 포함하면 잘 작동합니다. 마지막 단락에서 짐작했듯이, 내 서버에 하나의

jQuery와 ASP.NET MVC를 사용하여 삽입 가능한 위젯

답변

관련 문제