Updating @RenderBody using jquery in mvc

Question

Coming from a webform background using ajax I am trying to create similar with mvc.

I have worked out what the controller, view and models do.

What i would like to do now is that when my user clicks a button an jquery call is made to update the view - hence not refreshing the entire page.

Much like a master/child design in webforms.

I have googled and I have tried a couple of things but I get a 404. I have checked and i am sure I am calling things correctly.

This is my jquery function:

$("#divProductsBanner").click(function () {
    var currentObject = $(this).text();
    $.get('@Url.Action("Lite", "Service")', { theName: currentObject });       
});

Where 'Lite' is my view and 'Service' is my controller.

my Service.cs controller looks like this:

public ActionResult Lite()
{
    return View();
}

and I have a view called 'Lite' under my 'Service' folder under the 'Views' folder.

when I click that button i get this error:

You aré not getting @UrlXX executed but as string that's why you get that url. This script is embedded in the view or a standalone js file? Please include relevant parts of view code — tede24, Feb 09 '16 at 18:55
@tede24 not sure what you mean. What other parts are relevant? — Andrew Simpson, Feb 09 '16 at 18:57
where are you using the jquery code? Inside js file or in View file? — Thangaraja, Feb 09 '16 at 18:58
Yes it is. You can not not use C# code there. Move the code to view file or change the URL to "Service/Lite" — Thangaraja, Feb 09 '16 at 18:59
I got that example from an accepted answer from Stack Overflow hence this question. OK, it is RAZOR then. What would be the JavaScript alternative pls? — Andrew Simpson, Feb 09 '16 at 19:02

score 2 · Accepted Answer · edited May 23 '17 at 10:30

2

You can not use C# code in JS file. You can render the URL in the hidden field and use it

Something like

@Html.Hidden("MyURL", @Url.Action("Lite", "Service"))

In js

$("#divProductsBanner").click(function () {
    var currentObject = $(this).text();
    $.get($("#MyURL").val(), { theName: currentObject });       
});

Refer the links and change your code accordingly.

Asp.Net Mvc Url.Action in external js file?

Use Seprate js File And use Url Helpers in it with ASP.NEt MVC 3 and Razor View Engine

edited May 23 '17 at 10:30

Community

1
1

answered Feb 09 '16 at 19:02

Thangaraja

926
6
20

nothing actually happens! The uri is :/service/Lite' ok but no navigation. – Andrew Simpson Feb 09 '16 at 19:15
the JS script is being called from within my shared layout if that makes a difference? – Andrew Simpson Feb 09 '16 at 19:16
Open the browser console and see if there is any call triggered to that URL – Thangaraja Feb 09 '16 at 19:19
yes, that is the 1st thing i did. I had to unaccept the answer because I cannot get it to work. I am sure the error is mine but I am trying to trace.. – Andrew Simpson Feb 09 '16 at 19:23
the status '200' but the page does not refresh – Andrew Simpson Feb 09 '16 at 19:24
No. There wont be a redirect. $.get will go and get the details – Thangaraja Feb 09 '16 at 19:25
Are you expecting a page redirect? Then you need to use window.location = URL; – Thangaraja Feb 09 '16 at 19:25
so, using Windows.location will that refresh the whole page or the @RenderBody contents? – Andrew Simpson Feb 09 '16 at 19:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/103025/discussion-between-thangaraja-and-andrew-simpson). – Thangaraja Feb 09 '16 at 19:27
i was tired yesterday. Not in right frame of mind. Your links about partial was spot on - thanks – Andrew Simpson Feb 10 '16 at 09:16

Updating @RenderBody using jquery in mvc

1 Answers1