MVC3 - Показать частичное представление на той же странице

Question

У меня есть левое меню навигации на моей странице ... с использованием url.action, как показано ниже ... Я пытаюсь отобразить вид, непосредственно примыкающий (правая часть меню), на основании того, по какой ссылке щелкнули. в div рядом с меню навигации .. но не знаю, как отобразить соответствующее содержимое в этом div ...

<table>

<tr><td><a href='@Url.Action("ActionName1", "ControllerName")'>
<img src='@Url.Content("~/Content/themes/base/images/image1.png")'/></a></td></tr>

<tr><td><a href='@Url.Action("ActionName2", "ControllerName")'>
<img src='@Url.Content("~/Content/themes/base/images/image2.png")'/></a></td></tr> 


</table>
<div id="DISPLAYVIEWHERE">DISPLAY VIEW HERE based on link that is clicked</div>

В контроллере, код ActionName1 у меня есть это ...

 public ActionResult ActionName1()
    {
        var model = new ViewModel();
        return PartialView("PartialView1", model);       
    }

Когда я запускаю это, частьview1 открывается на новой странице. Как я могу открыть этот частичный вид на той же странице, что и меню навигации, сразу справа от меню ... так, в зависимости от того, какая ссылка нажата, частичное представление1 или частичное представление2 отображается рядом с меню навигации ... спасибо за ваше помощь.

Answer 1

в этом случае вы должны использовать ajax. Вы можете добавить некоторый класс к своим тегам привязки, например

<a class='handle' href='@Url.Action("ActionName1", "ControllerName")'>
<img src='@Url.Content("~/Content/themes/base/images/image1.png")'/></a>
<a class='handle' href='@Url.Action("ActionName2", "ControllerName")'>
<img src='@Url.Content("~/Content/themes/base/images/image2.png")'/></a>

и затем вы можете подключить событие click этих ссылок, используя jquery, и отправить вызов ajax, как

    $('.handle').live('click', function(){
        $.ajax({
            url:this.href,
            type='post',
            success:function(data)
            {
               //data contains the result returned by server you can put it in div here
               $('#DISPLAYVIEWHERE').html(data);
            }
            });
//here you have to return false to prevent anchor from taking you to other page
return false;
    });