CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3asp.net-mvc-4
Sampath
Sampath

Reputation: 65870

Ajax call on separate js file

I can use ajax call on *.cshtml file as below.It's working properly.

$.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
    }
});

But How can I call same method on seperate *.js file ?When I used above code it's not working?

Upvotes: 3

Views: 4704

Answers (3)

Chamaququm
Chamaququm

Reputation: 6728

HTML - Contains data- attributes

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

HTML - Option 2

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

JQuery - Contains data- attributes

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

JQuery - Option 2

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

Ajax Call

$.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
    }
});

Upvotes: 4

andres descalzo
andres descalzo

Reputation: 14967

CSHTML (I prefer the tag input):

@* 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
    }
});

Upvotes: 5

Roger Barreto
Roger Barreto

Reputation: 2284

For such solution, I recommends you to create a JavascriptController with a "JavascriptActionResult" or a new "JavascriptActionResult" on the BookController along with the view that outputs the desired javascript. That way you can write Javascript dynamically with razor and also have garantee that the Route Pattern behavior of your MVC will be followed. With all that set, the page would be:

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

PS: There is not a native JavascriptActionResult in MVC, but you could extend the ActionResult to perform that or simple force a Content-Type in the classic ActionResult function.

Bellow is a working case that Ive made in MVC3.

Controller:

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();
    }
}

Index 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 View:

@{
    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, In this second version the Javascript, as soon as it is loaded by the Index view, will engage the Ajax Call, I guess thats your case:

@{
    Layout = null;
}

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

Upvotes: 1

Related Questions