Ajax вызов в отдельном файле js

Я могу использовать ajax-вызов в файле * .cshtml, как показано ниже. Он работает правильно.Ajax вызов в отдельном файле js

$.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

Вы также можете использовать атрибуты 'data-' HTML5. – Meryovi

@Meryovi: Очень хорошая точка. Благодарю. Я сделал это, чтобы рассмотреть старые браузеры.Еще раз спасибо за хороший момент. +1 –

Для такого решения, я рекомендую вам создать JavascriptController с "JavascriptActionResult" или новым "JavascriptActionResult" на BookController наряду с представлением, которое выводит желаемый javascript. Таким образом, вы можете динамически писать Javascript с помощью бритвы, а также гарантировать, что поведение шаблона маршрута вашего MVC будет соблюдаться. При всем этом наборе, страница будет:

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

PS: Существует не родной JavascriptActionResult в MVC, но вы можете продлить ActionResult выполнять ту или простую овторн Content-Type в классической функции ActionResult.

Пыльник - это рабочий корпус, выполненный Ive в 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, как только он будет загружен по представлению Index, будет задействован Ajax Call, я предполагаю, что это ваш случай:

@{ 
    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

Могу ли я иметь какой-либо пример кода или полезный URL-адрес для такой реализации? – Sampath

Да, конечно, я сделаю здесь случай и отредактирую свое сообщение с образцом –

+1 для этого подхода. Я никогда не видел, что атрибут 'src' имеет значение 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

Ajax вызов в отдельном файле js

ответ

Смежные вопросы