MVC 4 - How can I load a View using JavaScript

Question

I am pretty new to MVC and JavaScript. I have a dropdown ('ProcessGroupRevisions') on a View and when the user selects a certain item in the drop down, I want to execute an action in a controller that will render a new view. I have the following code which is sort of stubbed out. But I know it's not right (because it doesn't work), but I'm not sure what I need to do to make it work.

        // This handles the onchange for the Revisions dropdown.
        $("#ProcessGroupRevisions").change(function () {
            if ($("#ProcessGroupRevisions").prop("value") == "-1") {
                '@Url.Action("AddNewRevision", "SetpointManagement", new RouteValueDictionary { { "processGroupId", ViewBag.ProcessGroupId } })';
            }
        });

If you put the code snippet above in a *.cshtml file, it will work, right? — Hanno
– Hanno, Commented Apr 5, 2013 at 13:35
if you are new to javascript, then you should NOT be using frameworks/libraries before you have learned the language. — tereško
– tereško, Commented Apr 5, 2013 at 22:07

Knut Marius · Accepted Answer · 2013-04-05 13:32:42Z

6

You can try to use the jquery load method:

$('#yourContainer').load('/ControllerName/ActionName');

"yourContainer" must in this case be the ID of the HTML element which you want to use as a container for your view. You may also want to have some extra logic to avoid having that hard-coded URL to the controller there. In that case you can do something like this:

var baseUrl = '@Url.Content("~")'

$("#yourContainer").load(baseUrl + "ControllerName/ActionName");

Note that the baseUrl variable must be defined in your CSHTML file and not in a separate js file, because it must be handled on the server-side.

edited Apr 5, 2013 at 13:32

answered Apr 5, 2013 at 13:20

Knut Marius

1,6681 gold badge21 silver badges40 bronze badges

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

4 Comments

Hosea146 Over a year ago

Thank you. What does '#yourContainer' represent?

Nick Albrecht Over a year ago

The element you want the results of your Action to go into. You'll need an empty <div> on your page somewhere waiting to accept this content when your dropdown changes.

Hosea146 Over a year ago

Ok, but I wanted to load a completely new View, replacing the current View in the browser.

Knut Marius Over a year ago

If you want to "replace the current view", it sounds like you actually want to navigate to a new page. In that case you can just do this instead: window.location.href = baseUrl + "ControllerName/ActionName"; ,where baseUrl is what I described in the original post. This would be the equivalent of clicking on a link pointing at your new view.

Nick Albrecht · Accepted Answer · 2013-04-05 13:33:44Z

Sorry posted accidentally before I was finished the first time.

<script>
    $(function(){
        $("#ProcessGroupRevisions").change(function () {
            if ($("#ProcessGroupRevisions :selected").val() == "-1") {
                var url = '@Url.Action("AddNewRevision", "SetpointManagement")';
                //To load the view via AJAX
                $("#GroupRevisionDetails").load(url, new {processGroupId: $("#ProcessGroupRevisions :selected").val()});
                //To load the view and replace the current page
                window.location.href = url + "?processGroupId=" + $("#ProcessGroupRevisions :selected").val();
            }
        });
    });
</script>

<select id="ProcessGroupRevisions">
    <option value="-1">-- Pick One --<option>
    <option value="1">Group Revision 1<option>
    <option value="2">Group Revision 2<option>
    <option value="3">Group Revision 3<option>
    <option value="4">Group Revision 4<option>
</select>

<div id="GroupRevisionDetails"></div>

Ali Shah Ahmed · Accepted Answer · 2013-04-05 13:28:33Z

3

You can try using window.location
For eg.

window.location = "/ControllerName/ActionName";

answered Apr 5, 2013 at 13:28

Ali Shah Ahmed

3,3533 gold badges26 silver badges22 bronze badges

3 Comments

Hosea146 Over a year ago

Thank you. Can you show me exactly how that would look included in the code I originally included?

Ali Shah Ahmed Over a year ago

you would need to replace your line "URL.Action..." with the one I provided. For adding any parameters you can use the query string method i.e. adding parameters after adding a question mark.

Ali Shah Ahmed Over a year ago

window.location = "/ControllerName/ActionName?processGroupId=" + "@ViewBag.ProcessGroupId"; Let me know if it works.

Collectives™ on Stack Overflow

MVC 4 - How can I load a View using JavaScript

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related