03. Asp.Net Core 3.x 筆記 View相關

Layout

Shared/_Layout.cshtml

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <environment include="Development">
        <link rel="stylesheet" asp-href-include="css/*" asp-href-exclude="css/all.min.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" asp-href-include="all.min.css" />
    </environment>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <img asp-append-version="true" alt="Logo" src="images/index.png" style="height:60px;" />
            </div>
            <div class="col-md-10">
                <span class="h2">@ViewBag.Title</span>
            </div>

        </div>
        <div class="row">
            <div class="col-md-12">
                @RenderBody()
            </div>
        </div>
    </div>
</body>
</html>

_ViewStart.cshtml

@{
    Layout = "_Layout";
}

TagHelper

_ViewImports.cshtml

@addTagHelper "*,Microsoft.AspNetCore.Mvc.TagHelpers"

使用:Index.cshtml


      <a asp-action="Add">Add</a>
      ...
          <a asp-controller="Employee" asp-action="Index" asp-route-departmentId="@Model.Id">
                Employees
           </a>

DisplayTemplates

  • Views/Empployee/DisplayTemplates/Index.cshtml
@using Three.Models
@model IEnumerable<Employee>
<div class="row">
    <div class="col-md-10 offset-md-2">
        <table class="table">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Gender</th>
                <th>IsFire</th>
                <th>操作</th>
            </tr>
            <!--使用DisplayTemplates-->
            @Html.DisplayForModel()
        </table>
    </div>
</div>
<div class="row">
    <div class="col-md-4 offset-md-2">
        <a asp-action="Add" asp-route-departmentId="@ViewBag.DepartmentId" >Add</a>

    </div>
</div>
  • Views/Empployee/DisplayTemplates/Employee.cshtml
@using Three.Models
@model Employee
<form asp-action="Add">
    <input type="hidden" asp-for="DepartmentId"/>
    <div class="row form-group">
        <div class="col-md-2 offset-md-2">
            <label asp-for="FirstName"></label>
        </div>
        <div class="col-md-6">
            <input class="form-control" asp-for="FirstName" />
        </div>
    </div>
    <div class="row form-group">
        <div class="col-md-2 offset-md-2">
            <label asp-for="LastName"></label>
        </div>
        <div class="col-md-6">
            <input class="form-control" asp-for="LastName" />
        </div>
    </div>
    <div class="row form-group">
        <div class="col-md-2 offset-md-2">
            <label asp-for="Gender"></label>
        </div>
        <div class="col-md-6">
          @*  <input class="form-control" asp-for="Gender" />*@
            <select class="form-control" asp-for="Gender"
                    asp-items="Html.GetEnumSelectList<Gender>()">

            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 offset-md-2">
            <button type="submit" class="btn btn-primary">Add</button>
        </div>
    </div>
</form>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章