ASP를 사용하여 JS 파일에서 jQuery에 대한 ajax URL 설정.NET MVC

ASP를 사용하여 JS 파일에서 jQuery에 대한 ajax URL 설정.NET MVC

현재 MVC 작업에 대한 Ajax 호출을 수행할 때 나는 자체 JS 파일이 아닌 View 내부에 내 자바스크립트를 가지고 있습니다.

그러면 이 작업을 매우 쉽게 수행할 수 있습니다.

var xhr = $.ajax({
     url: '<%= Url.Action("DisplayItem","Home") %>/' + el1.siblings("input:hidden").val(),
     data: { ajax: "Y" },
     cache: false,
     success: function(response) { displayMore(response, el1, xhr) }
});

...그런 다음 다음 다음을 사용하여 Ajax 호출에 URL을 포함합니다.Url.Action()JS 내부는 꽤 쉽습니다.URL을 하드 코딩하지 않고 어떻게 JS 파일을 직접 이동할 수 있습니까?

내가 하는 방법은 URL 서버 측을 생성하고 HTML5 데이터 속성을 사용하여 생성된 HTML에 저장하는 것입니다. 예: (레이저 구문)

<li class='customClass' data-url='@Url.Action("DisplayItems", "Home", new { id = Model.Id })'>...</li>

그런 다음 jQueryattr() 함수를 사용하여 URL을 선택할 수 있습니다. 예:

$(".customClass").click(function () {
    $.ajax({
        url: $(this).attr("data-url"),
        success: function (data) {
            // do stuff
        }
    });
});

AJAX 호출에 응답하여 HTML 클라이언트 측을 생성하는 경우 JSON 페이로드에 관련 URL을 포함하고 동일한 방식으로 데이터 속성을 채울 수 있습니다.

이 방법은 MVC 라우팅을 완전히 사용하므로 MVC 프레임워크를 완전히 활용할 수 있습니다.스터스미스의 대답에 영감을 받았습니다.

여기서 나는 액션이 있습니다.ApplicationController이 URL에 대한 동적 Javascript:

 /application/js

하나의 마스터 자바스크립트 파일만 다운받기를 원하기 때문에 정적 파일을 여기에 포함합니다.다음과 같은 경우 동적인 항목만 반환하도록 선택할 수 있습니다.

     /// <summary>
    /// Renders out javascript
    /// </summary>
    /// <returns></returns>
    [OutputCache(CacheProfile = "Script")]
    [ActionName("js")]
    public ContentResult RenderJavascript()
    {
        StringBuilder js = new StringBuilder();

        // load all my static javascript files                    
        js.AppendLine(IO.File.ReadAllText(Request.MapPath("~/Scripts/rr/cart.js")));
        js.AppendLine(";");

        // dynamic javascript for lookup tables
        js.AppendLine(GetLookupTables());
        js.AppendLine(";");

        return new ContentResult()
        {
            Content = js.ToString(),
            ContentType = "application/x-javascript"
        };
    }

이것은 우리의 룩업 테이블을 만드는 도우미 기능입니다.사용할 각 RouteUrl에 대한 줄을 추가하기만 하면 됩니다.

    [NonAction]
    private string GetLookupTables() 
    {
        StringBuilder js = new StringBuilder();

        // list of keys that correspond to route URLS
        var urls = new[] {
            new { key = "updateCart", url = Url.RouteUrl("cart-route", new { action = "updatecart" }) },
            new { key = "removeItem", url = Url.RouteUrl("cart-route", new { action = "removeitem" }) }
        };

        // lookup table function
        js.AppendLine("// URL Lookuptable");
        js.AppendLine("$.url=function(url) {");
        js.AppendLine("var lookupTable = " + new JavaScriptSerializer().Serialize(urls.ToDictionary(x=>x.key, x=>x.url)) + ";");
        js.AppendLine("return lookupTable[url];");
        js.AppendLine("}");

        return js.ToString();
    }

이것은 다음과 같은 동적 Javascript를 생성합니다. 기본적으로 임의 키에서 내 작업 방법에 필요한 URL로 검색 테이블일 뿐입니다.

// URL Lookuptable
$.url=function(url) {
var lookupTable = {"updateCart":"/rrmvc/store/cart/updatecart","removeItem":"/rrmvc/store/cart/removeitem"};
return lookupTable[url];
}

cart.js에서 나는 이런 기능을 가질 수 있습니다.url 매개 변수는 조회 테이블에서 가져옵니다.

 var RRStore = {};
 RRStore.updateCart = function(sku, qty) {

    $.ajax({

        type: "POST",
        url: $.url("updateCart"),
        data: "sku=" + sku + "&qty=" + qty,
        dataType: "json"

        // beforeSend: function (){},
        // success: function (){},
        // error: function (){},
        // complete: function (){},
    });

    return false;

};

어디서든 전화를 걸 수 있습니다.

 RRStore.updateCart(1001, 5);

이것이 제가 라우팅을 깨끗한 방법으로 사용할 수 있는 유일한 방법인 것 같습니다.Javascript에서 URL을 동적으로 생성하는 것은 까다롭고 테스트하기 어렵습니다.테스트 유형은 테스트를 용이하게 하기 위해 여기 어딘가에 레이어를 추가할 수 있습니다.

URL(및 기타 데이터)을 매개 변수로 사용하고 응답을 반환하는 함수로 AJAX 호출을 래핑합니다.그러면 AJAX 콜을 직접 호출하는 대신 함수를 호출하십시오.

function doAjax( url, data, elem, callback )
{
    return $.ajax({
        url: url,
        data: { ajax: data },
        cache: false,
        success: function(response) { callback(response, elem, xhr); }
    });
}

...

<input type='button' value='Go get it' onclick='doAjax( <%= Url.Action ...

저는 당신이 정확히 같은 패턴을 자주 사용하지 않는 한, JS 파일이 아닌 페이지에서 Ajax를 호출하는 것보다 이것이 더 나은지 확신할 수 없습니다.

모듈 패턴을 사용합니다.

// separate js file
var PAGE_MODULE = (function () {
  var url = {},
      init = function(url) { ... },
      load = function() {
      $.ajax({
           url: url,
           ...
           });
      }

      return { init: init };
})();

// calling init goes on the page itself
PAGE_MODULE.init(" %: Url.Action(...) %>");

일반적으로 인라인 온클릭 핸들러는 글로벌 기능을 사용하기 때문에 자바스크립트가 좋지 않습니다.

='doAjax( 클릭)

저는 모듈 패턴을 더 잘 이해하기 위해 http://jqfundamentals.com/book/index.html#N20D82 을 읽는 것을 추천합니다.

다른 방법이 있습니다.

마스터 페이지에 인라인 스크립트 영역을 포함합니다.

<head>
  ...
  <asp:ContentPlaceHolder runat="server" ID="_inlineScripts" />
  ...
</head>

그런 다음 Page_Load에서 유틸리티 함수를 만듭니다.

protected void Page_Load( object sender, EventArgs e )
{
  AddInlineScript( string.Format( "$.url=function(url){{return '{0}'+url;}}", GetBaseUri() ) );
  ...
}

private Uri GetBaseUri()
{
  var requestUrl = Request.Url.AbsoluteUri;
  var i = requestUrl.IndexOf( request.Path );

  return new Uri( requestUrl.Substring( 0, i ) );
}

private void AddInlineScript( string content )
{
  var script = new HtmlGenericControl( "script" );

  script.Attributes.Add( "type", "text/javascript" );
  script.InnerHtml = content;

  _inlineScripts.Controls.Add( script );
}

이제 Ajax에서 이 기능을 사용할 수 있습니다.

$.ajax({
  url: $.url('path/to/my-handler'),
  ...
});

언급URL : https://stackoverflow.com/questions/376644/setting-ajax-url-for-jquery-in-js-file-using-asp-net-mvc