Display view result in a div in ASP.NET MVC

Question

I have this :

     <div>@Html.ActionLink("MyLink", "Index", "Home")</div>

     <div id="ToDisplayResult></div>

Is it possible to display the View or PartialView returned by the controller in a specific div ?

Thanks,

Answer 1

If you add this:

<div id="ToDisplayResult>@Html.Action("MyActionThatReturnsPartial", "Home")</div>

It will display the partial view result where you desire. Make sure that your controller returns a partial view result, of course.

Answer 2

the most basic way of updating a div would be using jQuery .load

$('#ToDisplayResult').load('/SomeController/Action');

see this question for more details: How can I reload a div with a PartialView in ASP.NET MVC using jQuery?

Answer 3

<div>@Html.ActionLink("MyLink", "Index", "Home", null, new { id = "mylink" })</div>
<div id="ToDisplayResult></div>

and in a separate javascript file AJAXify:

$(function() {
    $('#mylink').click(function() {
        $('#ToDisplayResult').load(this.href);
        return false;
    });
});

And for completeness of my answer (not that this is something I would recommend) you could use the Ajax helpers:

<div>
    @Ajax.ActionLink(
        "MyLink", 
        "Index", 
        "Home", 
        new AjaxOptions { UpdateTargetId = "ToDisplayResult" }
    )
</div>
<div id="ToDisplayResult></div>

Just make sure you have included the proper unobtrusive script to your page in this case:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>