在局部剃刀視圖中正確使用模型

Question

我有以下控制器：

public class WelcomeController
{
        private IWelcomeService _service;

        public WelcomeController(IWelcomeService service)
        {
            _service = service;
        }

        public override ActionResult Index()
        {
            WelcomeIndexViewModel viewModel = new WelcomeIndexViewModel();
            viewModel.LatestNewsArticles = _service.GetLatestNewsArticles();
            return View(viewModel);
        }
}

以下是視圖模型：

public class WelcomeIndexViewModel
{
    public IEnumerable<LatestNewsArticle> LatestNewsArticles { get; set; }
}

視圖模型由服務填充，該服務填充WelcomeIndexViewModel中的LatestNewsArticles屬性。

以下是該視圖的代碼：

@model WelcomeIndexViewModel
@{
    ViewBag.Title = "Welcome";
 }
 <main class="main" role="main">
     <div class="container">
         <div class="row">
             <div class=“news col-xs-6 col-sm-6 col-md-6 col-lg-6">
                @Html.Partial(“LatestNews", Model)
             </div>
         </div>
     </div>
 </main>

以下是LatestNews部分視圖：

@model LatestNewsViewModel
<div class="latest-news">
    @foreach (LatestNewsArticle n in Model.LatestNewsArticles)
    {
        <h3><a href="@n.NewsArticleUrl" title="@n.Title">@n.Title</a></h3>
        <span class="featured-image">
            <img src="@FeaturedImageUrl" alt="@FeaturedImageAltText">
        </span>
        <p>@n.Summary</p>
    }
</div>

@model LatestNewsViewModel破壞了視圖，因為傳遞給它的模型不是LatestNewsViewModel。

如果我刪除@model LatestNewsViewModel那么如果傳遞的模型不包含正確的屬性，則不會在構建時出現編譯錯誤。

WelcomeIndexViewModel實際上確實包含屬性LatestNewsArticles但是由於它的類型不正確，因此出現編譯錯誤。

我不確定將模型包含在另一個模型的屬性中是否是一個好習慣，但是我想這會起作用，但是我真的想知道在這種情況下正確的解決方案是什么？

Answer 1

你傳遞的typeof WelcomeIndexViewModel到局部，但指定部分接受的類型LatestNewsViewModel這會拋出異常。

然后，在部分操作中，您嘗試遍歷名為LatestNewsArticles的LatestNewsArticle屬性（我懷疑它不存在）。

最好的方法是對LatestNewsArticle使用DisplayTemplate 。

在/Views/Shared/DisplayTemplates/LatestNewsArticle.cshtml ：

@model yourAssembly.LatestNewsArticle

<h3>
    <a href="@Model.NewsArticleUrl" title="@Model.Title">@Model.Title</a>
</h3>
<span class="featured-image">
    <img src="@Model.FeaturedImageUrl" alt="@Model.FeaturedImageAltText">
</span>
<p>@Model.Summary</p>

然后在主視圖中：

@model WelcomeIndexViewModel

@Html.DisplayFor(m => m.LatestNewsArticles)

請注意， @Html.DisplayFor()接受單個對象T和IEnumerable<T> 。

您也可以放置在文件/Views/ControllerName/DisplayTemplates/LatestNewsArticle.cshtml ，如果你想為模板LatestNewsArticle具體到一個控制器。

Answer 2

嘗試像這樣更改您的局部：

@model WelcomeIndexViewModel
@{
    ViewBag.Title = "Welcome";
 }
 <main class="main" role="main">
     <div class="container">
         <div class="row">
             <div class="news col-xs-6 col-sm-6 col-md-6 col-lg-6">
                @Html.Partial("LatestNews", (object) Model.LatestNewsArticles)
             </div>
         </div>
     </div>
 </main>

接着...

@model IEnumerable<LatestNewsArticle>
<div class="latest-news">
    @foreach (LatestNewsArticle n in Model)
    {
        <h3><a href="@n.NewsArticleUrl" title="@n.Title">@n.Title</a></h3>
        <span class="featured-image">
            <img src="@n.FeaturedImageUrl" alt="@n.FeaturedImageAltText" />
        </span>
        <p>@n.Summary</p>
    }
</div>

使用顯示和編輯器模板也是一個好習慣

Answer 3

使用Model.LatestNewsArticles :)參見下面的粗體：

@model WelcomeIndexViewModel
@{
    ViewBag.Title = "Welcome";
 }
 <main class="main" role="main">
     <div class="container">
         <div class="row">
             <div class=“news col-xs-6 col-sm-6 col-md-6 col-lg-6">
                @Html.Partial(“LatestNews", Model**.LatestNewsArticles**)
             </div>
         </div>
     </div>
 </main>

哦，然后在局部視圖中使用IEnumerable：

@model IEnumerable<LatestNewsViewModel>
<div class="latest-news">
    @foreach (LatestNewsArticle n in Model)
    {
        <h3><a href="@n.NewsArticleUrl" title="@n.Title">@n.Title</a></h3>
        <span class="featured-image">
            <img src="@FeaturedImageUrl" alt="@FeaturedImageAltText">
        </span>
        <p>@n.Summary</p>
    }
</div>