Anirudh Agarwal
Anirudh Agarwal

Reputation: 697

How to show a partial view on click of actionlink in mvc

I have the following two action links on a page:

@Html.ActionLink("User List","list");
@Html.ActionLink("Admin List","admin");

On their click I want to show/hide a partial view using jQuery. Help me with solution for this.

Upvotes: 0

Views: 3600

Answers (2)

karaxuna
karaxuna

Reputation: 26940

<div id="test"></div>

@Ajax.ActionLink("User List","list", new AjaxOptions{ UpdateTargetId = "test" });
@Ajax.ActionLink("Admin List","admin", new AjaxOptions{ UpdateTargetId = "test" });

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038850

You could use the Ajax.ActionLink helper instead:

@Ajax.ActionLink("User List","list", new AjaxOptions { UpdateTargetId = "someDiv" });
@Ajax.ActionLink("Admin List","admin", new AjaxOptions { UpdateTargetId = "someDiv" });

This assumes that the list and admin actions return partial views:

public ActionResult List()
{
    return PartialView();
}

and the result of this partial view will be injected into a DOM element with id="someDiv". Also for this to work don't forget to include the jquery.unobtrusive-ajax.js script to your page

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

Upvotes: 4

Related Questions