如何用另一個替換局部視圖？

我想顯示「最新消息」文章列表，並點擊「閱讀更多」鏈接，以顯示點擊文章的完整內容。爲此，我在我的Index.cshtml視圖中使用了部分視圖。首次顯示索引視圖時，部分視圖將填充文章列表。我想要的是：重複使用相同的局部視圖來顯示整篇文章，點擊。如何用另一個替換局部視圖？

出於某種原因，我無法做到這一點，我不明白爲什麼。使用調試器和Firebug，我可以捕獲任何錯誤。此外，應用程序遍歷所有步驟，甚至顯示_Details局部視圖，但實際上，屏幕上仍然是列表。

謝謝你指出我的錯誤。

編輯：

我在_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和jquery.unobtrusive-ajax.js，也是我有「UnobtrusiveJavaScriptEnabled」= 「真」在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> 
}

視圖模型

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; 
    } 
}

控制器

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()); 
    }

來源

2012-10-04 Furnica

如果你在你的控制器中放置了一個斷點，被調用的細節動作definitley？ –

在你Index.cshtml觀點：

<div class="active_part">

應該是：

<div id="active_part">

當您在AjaxOptions中指定UpdateTargetId = "active_part"時，它正在查找DOM元素wi id="active_part"，而不是class="active_part"。

來源

2012-10-04 16:12:00

哦哇很好，趕上！ –

謝謝Darrin，你說得對。哇，真是個混蛋！我一定比我想象的要累。 – Furnica

確保您輸入正確的.js腳本在你的頁面。

我有很多更多的運氣與jQuery腳本，而不是微軟的Ajax腳本：

<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>

來源

2012-10-04 16:06:55

對不起，在發佈這個文件的同時你更新了你的編輯:) –

謝謝你的建議，的確我在同一時間進行了編輯，因爲我剛剛意識到jquery腳本將是所有願意幫助的人的第一個想法。事實上，我還有其他幾個觀點，其中有部分觀點，但這是唯一沒有表現的觀點。這讓我瘋狂。 – Furnica

如何用另一個替換局部視圖？

回答

相關問題