How to replace a partial view with another?

Question

I want to show the list of articles "Latest News" and by clicking on the link "Read more" to show the full content of the clicked article. For this, I use a partial view in my index.cshtml view. The first time the Index view is displayed, a partial view is populated with a list of articles. I want: partial reuse to show full article by clicking.

For some reason I cannot do this, and I do not understand why. Using a debugger and Firebug, I cannot avoid errors. In addition, the application goes through all the stages and even seems to display a partial view of _Details, but in fact there is still a list on the screen.

Thanks for pointing out the error.

Edit:

I have all the necessary scripts specified in _Layout.cshtml: jquery-1.8.2.min.js, jquery-ui-1.8.24.custom.min.js, jquery.ui.core.min.js, jquery.validate .min.js, jquery.validate.unobtrusive.min.js and jquery.unobtrusive-ajax.js, and also I have "UnobtrusiveJavaScriptEnabled" = "true" in web.config.

Index.cshtml

@model MyApp.ViewModels.NewsViewModel <div id="content" class="content_style"> <text>Some static content</text> <div class="active_part"> @Html.Partial("_List", Model.NewsList) </div><!-- end active_part --> </div><!-- end content --> 

_List.cshtml

 @model IEnumerable<MyApp.Models.News> @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "active_part", InsertionMode = InsertionMode.Replace })) { foreach (var item in Model) { <h2 class='title"> @Ajax.ActionLink(item.Title, "Details", "News", new { id = item.News_ID }, new AjaxOptions { UpdateTargetId = "active_part" }, null) </h2> <div class="body"> @Html.Raw(item.Body) @Ajax.ActionLink("Read more", "Details", "News", new { id = item.News_ID }, new AjaxOptions { UpdateTargetId = "active_part" }, null) </div> } } 

_Details.cshtml

 @model MyApp.Models.News @using (Ajax.BeginForm(new AjaxOptions{ UpdateTargetId = "active_part", InsertionMode = InsertionMode.Replace })) { <div class="single"> <h2 class="title">@Model.Title</h2> <div class="entry-content"> @Html.Raw(Model.Body) </div> <div class="clear"></div> </div> } 

ViewModel

 public class NewsViewModel { // Properties public News CurrentNews { get; set; } public List<News > NewsList {get; set;} // Constructor public NewsViewModel() { } public NewsViewModel(News pCurrentNews , List<News> pNewsList) { CurrentNews = pCurrentNews ; NewsList = pNewsList; } } 

controller

  public ViewResult Index() { return View( new NewsViewModel(null, repository.FindAllNews())); } public ActionResult Details(long id) { News article = repository.FindAnArticleByID(id); return PartialView("_Details", article); } public ActionResult ListNews() { return PartialView("_List", repository.FindAllNews()); } 

Answer 1

In the view of Index.cshtml :

 <div class="active_part"> 

it should be:

 <div id="active_part"> 

When you specify UpdateTargetId = "active_part" in your AjaxOptions, it searches for the DOM element with id="active_part" , not class="active_part" .

Answer 2

Make sure you import the correct .js scripts on your page.

I'm more fortunate with jquery scripts as opposed to Microsoft Ajax scripts:

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