asp.net core mvc (6)ViewModel視圖模型對象的使用

如果頁面需要展示多種信息類型,則通過poco的movie類無法完成這樣的信息。此時需要定義一個viewmodel對象,來進行數據模型的使用。這個viewmodel裏面包含相對複雜一些的數據結構,比如,包含一個列表和一個類集合等。
ViewModel表示一個概念,並不是具體的某個類。

假設,要在頁面上添加一個搜索,搜索下拉框中可以選擇movie的Genre類型,輸入框中搜索movie的Title。

MovieGenreViewModel

在models目錄下,新建添加一個MovieGenreViewModel

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace MvcMovie.Models
{
    public class MovieGenreViewModel
    {
        public List<Movie> Movies { get; set; }
        public SelectList Genres { get; set; }
        public string MovieGenre { get; set; }
        public string SearchString { get; set; }
    }
}

其中包括:

  • 一個movies的集合。
  • 一個SelectList對象,該對象可以方便用於cshtml中的selector綁定數據。
  • 一個MovieGenre,表示要搜索的類別。
  • 一個SearchString,表示Title中要包含的關鍵字。

控制器中使用ViewModel類型

MoviesController.cs中的index方法代碼改爲如下

// GET: Movies
public async Task<IActionResult> Index(string movieGenre, string searchString)
{
    //使用LINQ表達式,LINQ表達式不是立即執行的,而是在使用的時候纔會執行,這裏是在最後ToListAsync()方法調用的時候纔會執行。
    IQueryable<string> genreQuery = from m in _context.Movie
                                    orderby m.Genre
                                    select m.Genre;

    var movies = from m in _context.Movie
                 select m;

    if (!string.IsNullOrEmpty(searchString))
    {
        //Lambda+LINQ結合使用,找出符合條件的結果。
        movies = movies.Where(s => s.Title.Contains(searchString));
    }

    if (!string.IsNullOrEmpty(movieGenre))
    {   //Lambda+LINQ結合使用,找出符合Genre的結果。
        movies = movies.Where(x => x.Genre == movieGenre);
    }

    var movieGenreVM = new MovieGenreViewModel
    {
        Genres = new SelectList(await genreQuery.Distinct().ToListAsync()),
        Movies = await movies.ToListAsync()
    }; //創建新的ViewModel類型對象

    return View(movieGenreVM);
}

View中使用Viewmodel

在Views/Movies/Index.cshtml中,代碼如下

@model MvcMovie.Models.MovieGenreViewModel

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>
<form asp-controller="Movies" asp-action="Index" method="get">
    <p>

        <select asp-for="MovieGenre" asp-items="Model.Genres">
            <option value="">All</option>
        </select>

        Title: <input type="text" asp-for="SearchString" />
        <input type="submit" value="Filter" />
    </p>
</form>

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Movies[0].Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movies[0].ReleaseDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movies[0].Genre)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movies[0].Price)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Movies)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ReleaseDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Genre)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                    <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                    <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

第一行@model MvcMovie.Models.MovieGenreViewModel 表示需要接收該類型的數據對象。
<select asp-for="MovieGenre" asp-items="Model.Genres"> 這行代碼是一個select標籤,使用的是數據模型的Genres屬性,這個屬性在之前定義過,是一個SelectList類型。

執行項目,可以看到看看效果。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章