jquery load call to controller and populate div element

Question

I have a div element in my index.cshtml with id #myresults and i am trying to load data through jquery.load method by calling a mvc controller method. But i am not able to get the right syntax.

I am passing a custom object as a parameter as well.

var mycustomObject = {
    obj1:value1,
    obj2:value2,
    ..
}

The following does not work...(an i have tried other combinations as well..i get server not found error)

$("#myresults").load ('@Url.Action("MyActionMethod","Home")',mycustomObject);

while the following works

$("#myresults").load('/Home/MyActionMethod', mycustomObject);

While the last statement works, it works only on localhost.

Whats the right syntax to use for jquery load with Url.Action ?

Is the script in an external file? (razor code is not parsed in external files) — user3559349
– user3559349, Commented Oct 20, 2016 at 20:15
@StephenMuecke really? that could be it..the script is indeed in an external file — cableload
– cableload, Commented Oct 20, 2016 at 21:36
That was it..Thanks @StephenMuecke I should have thought about it..If you could post it as an answer i can accept it as an answer — cableload
– cableload, Commented Oct 20, 2016 at 21:42

user3559349 · Accepted Answer · 2016-10-21 07:11:53Z

3

@Url.Action() will always generate the correct url, so if your getting a 404, it means this code is in an external script file. Razor code is not executed in external scripts so your url would literally be the text "@Url.Action("MyActionMethod","Home")".

Options to solve this include

moving the code into the view or its layout
declaring a global variable in the view - var url = '@Url.Action("MyActionMethod","Home")'; an in the external file use $("#myresults").load(url, mycustomObject);
assign the url to an element as a data-* attribute, for example <button type="button" id="loadSomething" data-url="@Url.Action("MyActionMethod","Home")">...</button>,and in the external file
```
$('#loadSomething').click(function() {
    var url = $(this).data('url');
    $("#myresults").load(url, mycustomObject);
});
```

answered Oct 21, 2016 at 7:11

user3559349

Sign up to request clarification or add additional context in comments.

2 Comments

cableload Over a year ago

Thanks for the other two options that would work with the external file.

Raj Over a year ago

@stephenMuecke, It really helped me. Thank you.

Sparrow · Accepted Answer · 2016-10-20 17:09:53Z

Define the div element as:

<div id="myresults" onload="loadMyData();"></div>

And make the ajax call in your method:

<script type="text/javascript">
    function loadMyData() {
            $.ajax({
                cache: false,
                url: '@Html.Raw(Url.Action(MyActionMethod","Home"))',
                data: { obj1:value1, obj2:value2 },
                dataType: "json",
                type: 'post',
                success: function (result) {
                    if (result.success) {
                        $('#myresults').html(result.data);
                    }
                    else {
                        alert("Failed to load data!");
                    }
                }
            });
        }
</script>

Collectives™ on Stack Overflow

jquery load call to controller and populate div element

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related