在單獨的js文件上調用Ajax

我可以在* .cshtml文件中使用ajax調用，如下所示。它工作正常。在單獨的js文件上調用Ajax

$.ajax({ 
    url: '@Url.Action("GetAllBooks", "Book")', 
    cache: false, 
    type: 'GET', 
    contentType: 'application/json; charset=utf-8', 
    data: {}, 
    success: function (data) { 
     self.Books(data); //Put the response in ObservableArray 
    } 
});

但我如何可以調用單獨的* .js文件相同的方法呢？當我在上面它不工作的代碼中使用？

來源

2013-08-17 Sampath

什麼錯誤會來嗎？ –

@PKKG沒有錯誤，但操作方法沒有解除。 – Sampath

HTML - 包含數據 - 屬性

<div id="ExampleDiv" 
    data-url = "@Url.Action("Action", "Controller", new { area = "AreaName" })"> 
</div>

HTML - 選項2

<div id="ExampleDiv" 
    url-Val = "@Url.Action("Action", "Controller", new { area = "AreaName" })"> 
</div>

JQuery的 - 數據 - 包含屬性

var Url_Value = $('#ExampleDiv').data('url');

JQuery的 - 選項2

var Url_Value = $('#ExampleDiv').attr('url-Val');

Ajax調用

$.ajax({ 
    url: Url_Value, 
    cache: false, 
    type: 'GET', 
    contentType: 'application/json; charset=utf-8', 
    data: {}, 
    success: function (data) { 
     self.Books(data); //Put the response in ObservableArray 
    } 
});

來源

2013-08-17 16:04:39

我會檢查並通知你。 – Sampath

你也可以使用HTML5的'data-'屬性。 – Meryovi

@Meryovi：非常好的一點。謝謝。我這樣做只是考慮舊的瀏覽器。再次感謝好的一點。 +1 –

對於這樣的解決方案，我建議你創建一個JavascriptController與上BookController的一個「JavascriptActionResult」或新「JavascriptActionResult」以及輸出所需javascript的視圖。這樣你就可以用剃鬚刀動態地編寫Javascript，並且保證你的MVC的路由模式行爲將被遵循。與所有的設置，頁面將是：

<script type="text/javascript" src="@Url.Action("GetAllBooksJS","Book")"></script>

PS：沒有在MVC本地JavascriptActionResult，但你可以擴展的ActionResult來執行或簡單的力量，在經典的ActionResult功能的內容類型。

貝婁是我在MVC3中製作的一個工作案例。

控制器：

public class BookController : Controller 
{ 
    // 
    // GET: /Book/ 

    public ActionResult Index() 
    { 
     return View(); 
    } 

    public JsonResult GetAllBooks() { 
     return Json(new[] { new { name = "Book1" }, new { name = "Book2" } }); 

    } 
    public ActionResult GetAllBooksJS() 
    { 
     Response.ContentType = "text/javascript"; 

     return View(); 
    } 
}

索引視圖：

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <title>Index</title> 
    <script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.7.1.min.js")">  </script> 
    <script type="text/javascript" src="@Url.Action("GetAllBooksJS","Book")"></script> 

</head> 
<body> 
    <div> 
     <button>Get books ajax</button>   
    </div> 
</body> 
</html>

GetAllBooksJS查看：

@{ 
    Layout = null; 
} 

$(document).ready(function(){ 
    $('button').on('click',function() { 
     GetBooksAjax(); 
    }); 
}); 

function GetBooksAjax() { 
    $.ajax({ 
     url: '@Url.Action("GetAllBooks","Book")', 
     type: 'POST', 
     dataType: 'json', 
     success: function(oJSON) { 
      $.each(oJSON,function(){ 
       alert(this.name); 
      }) 
     } 
    }) 
}

GetAllBooksJS查看V2，在第二個版本的JavaScript，只要它是裝由索引視圖，將參與阿賈克斯呼籲，我想你的情況：

@{ 
    Layout = null; 
} 

function GetBooksAjax() { 
    $.ajax({ 
     url: '@Url.Action("GetAllBooks","Book")', 
     type: 'POST', 
     dataType: 'json', 
     success: function(oJSON) { 
      $.each(oJSON,function(){ 
       alert(this.name); 
      }) 
     } 
    }) 
} 
GetBooksAjax();

來源

2013-08-17 17:41:10

我可以有任何示例代碼或這種實現有用的網址嗎？ – Sampath

是的，當然，我會在這裏做一個案例，並編輯我的帖子，樣本 –

+1。我從來沒有看到'src'屬性具有任何Controller動作的URL值。等待示例代碼。很高興知道這種新方法。謝謝:) –

CSHTML（我喜歡的標籤輸入）：

@* without the attribute 'name' *@ 
<input type="hidden" value="@Url.Action("GetAllBooks", "Book")" id="UrlBookGetAllBooks" /> 

@* or *@ 

<div style="display:none;" data-url="@Url.Action("GetAllBooks", "Book")" id="UrlBookGetAllBooks"></div>

JS：

var url = $('#UrlBookGetAllBooks').val(); 
//or for tag div 
var url = $('#UrlBookGetAllBooks').data('url'); 

$.ajax({ 
    url: url, 
    cache: false, 
    type: 'GET', 
    contentType: 'application/json; charset=utf-8', 
    data: {}, 
    success: function (data) { 
     self.Books(data); //Put the response in ObservableArray 
    } 
});

來源

2013-08-17 21:58:54

在單獨的js文件上調用Ajax

回答

相關問題