在单独的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

回答

相关问题