5

「最新ニュース」記事のリストを表示し、「続きを読む」リンクをクリックすると、クリックした記事の全内容を表示したいと考えています。そのために、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、およびweb.config に「UnobtrusiveJavaScriptEnabled」="true"があります。

インデックス.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());
    }
4

2 に答える 2

9

あなたのIndex.cshtml見解では：

<div class="active_part">

次のようにする必要があります。

<div id="active_part">

UpdateTargetId = "active_part"AjaxOptions で指定するとid="active_part"、 ではなくを含む DOM 要素が検索されますclass="active_part"。

于 2012-10-04T16:12:00.750 に答える
1

ページに適切な .js スクリプトをインポートしていることを確認してください。

Microsoft Ajax スクリプトとは対照的に、jquery スクリプトの方がずっとうまくいきました。

<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-04T16:06:55.990 に答える