3

我可以在 *.cshtml 文件上使用 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 文件上调用相同的方法？当我使用上面的代码时它不起作用？

4

3 回答 3

5

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-17T21:58:54.067 回答
4

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({
    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-17T16:04:39.853 回答
1

对于这样的解决方案，我建议您在 BookController 上创建一个带有“JavascriptActionResult”或新“JavascriptActionResult”的 JavascriptController，以及输出所需 javascript 的视图。这样，您可以使用 razor 动态编写 Javascript，并且还可以保证您的 MVC 的路由模式行为将被遵循。有了所有这些，页面将是：

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

PS：MVC 中没有原生的 JavascriptActionResult，但您可以扩展 ActionResult 以执行该操作，或者在经典的 ActionResult 函数中简单地强制 Content-Type。

Bellow 是我在 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 View v2，在第二个版本中，一旦索引视图加载了 Javascript，就会进行 Ajax 调用，我想这就是你的情况：

@{
    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-17T17:41:10.263 回答