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

Question

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.

You'd better use ajax for this

karaxuna
– karaxuna

2012-10-08 06:25:43 +00:00
Commented Oct 8, 2012 at 6:25 — karaxuna
– karaxuna, Commented Oct 8, 2012 at 6:25

Darin Dimitrov · Accepted Answer · 2012-10-08 06:27:47Z

4

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>

answered Oct 8, 2012 at 6:27

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

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

4 Comments

Anirudh Agarwal Over a year ago

This is not working the div is not showing the patial view rather and also the UI is getting distorted after that.

Darin Dimitrov Over a year ago

Did you try debugging your controller code? Is the corresponding action being hit? Also you might use FireBug to analyze the AJAX request and the exact request/response sent over the wire as well as any possible errors.

Anirudh Agarwal Over a year ago

Thanks it worked. This is something nice and a good and shorter solution to0 the problem. Thanku

Anirudh Agarwal Over a year ago

If I redirect to some other page and then come back to the page where these two link buttons are then that links become disable and are not working. If I refresh the page then it is working. Why?

karaxuna · Accepted Answer · 2012-10-08 06:28:00Z

0

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

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

answered Oct 8, 2012 at 6:28

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related