.net core mvc初級教程(六)

1、建立movie的視圖
2、對cinema、movie視圖添加‘添加信息’的操做html

1、建立movie的視圖

在views文件夾下添加Movie文件夾,在這個文件夾下添加Index.cshtml視圖,爲何添加Index.cshtml這個名字的視圖,能夠看看咱們寫的MovieController控制器git

@using DemoCoreStudy.Models
@model IEnumerable<Movie>

<div class="container">
    <div class="row">
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Staring</th>
                    <th scope="col">ReleseDate</th>
                     <th></th>
                </tr>
            </thead>
            <tbody>
                @Html.DisplayForModel()
            </tbody>
        </table>
    </div>
</div>

而後再Movie文件夾下添加DispalyTemplates文件夾,其中添加Movie.cshtml視圖github

@model DemoCoreStudy.Models.Movie

<tr>
    <th scope="col">@Model.Id</th>
    <td>@Model.Name</td>
    <td>@Model.Starring</td>
    <td>@Model.ReleseDate</td>
    <td asp-action="Edit" asp-route-movieId="@Model.Id">編輯</td>
</tr>

接下來回到MovieController控制器添加Edit方法web

public IActionResult Edit(int movieId)
        {
            return RedirectToAction("Index");
        }
``
`而後咱們回到Cinema.cshtml,寫下一個跳轉連接,點一下電影名能夠跳轉到對應的的電影界面

@model DemoCoreStudy.Models.Cinemabootstrap

@Model.Id @Model.Name @Model.Location @Model.Capacity 編輯 ``` 就插了一行,如今運行,能夠完美運行

QWQ
開心svg

2、對cinema、movie視圖添加‘添加信息’的操做

接下來就是對信息添加功能的操做了
先對cinema進行添加操做spa

咱們須要有個添加的按鈕
打開cinema視圖的index添加,.net

@model IEnumerable<DemoCoreStudy.Models.Cinema>

<div class="container">
    <div class="row">
        <table class="table">
            <thead class="thead-dark">
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Name</th>
                <th scope="col">Location</th>
                <th scope="col">Capacity</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            @Html.DisplayForModel()
            </tbody>
        </table>
        <a asp-action="Add">添加</a>
    </div>
</div>

接下來創建Add.cshtml
打開bootstrap官網,左邊菜單 Components->Formscode

在這裏插入圖片描述
下面是官方本來的代碼orm

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

根據官方給出的文檔修改下,再Home文件夾下創建Add.cshtml
Add.cshtml

@model DemoCoreStudy.Models.Cinema

<div class="container">
    <form asp-action="Add">
        <div class="form-group row">
            <label asp-for="Name" class="col-sm-2 col-form-label">電影名稱</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" asp-for="Name" />
            </div>
        </div>
        <div class="form-group row">
            <label asp-for="Location" class="col-sm-2 col-form-label">地點</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" asp-for="Location" />
            </div>
        </div>
        <div class="form-group row">
            <label asp-for="Capacity" class="col-sm-2 col-form-label">容納多少觀衆</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" asp-for="Capacity" />
            </div>
        </div>
        
        <div class="form-group row">
            <div class="col-sm-10 offset-sm-2">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>
</div>

來運行下吧
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

啊哈哈哈!搞定了,對於movie的添加原理相同,不一樣的是你要添加到那個電影院的Id名頭下

在movie文件夾下的Index添加按鈕

@using DemoCoreStudy.Models
@model IEnumerable<Movie>

<div class="container">
    <div class="row">
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Staring</th>
                    <th scope="col">ReleseDate</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @Html.DisplayForModel()
            </tbody>
        </table>
        <a asp-action="Add" asp-route-cinemaId="@ViewBag.cinemaId">添加</a>
    </div>
</div>

asp-route-cinemaId="@ViewBag.cinemaId"這句話意思爲要返回一個對應cinemaId的值,將電影數據加入對應的電影院之下
在movie文件夾下添加Add.cshtml視圖

@model DemoCoreStudy.Models.Movie

<div class="container">
    <form asp-action="Add">
        <input type="hidden" asp-for="CinemaId" /><!--隱藏返回的Id屬性-->
        <div class="form-group row">
            <label asp-for="Name" class="col-sm-2 col-form-label">電影名稱</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" asp-for="Name" />
            </div>
        </div>
        <div class="form-group row">
            <label asp-for="Starring" class="col-sm-2 col-form-label">主演</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" asp-for="Starring" />
            </div>
        </div>
        <div class="form-group row">
            <label asp-for="ReleseDate" class="col-sm-2 col-form-label">上映時間</label>
            <div class="col-sm-10">
                <input type="date" class="form-control" asp-for="ReleseDate" />
            </div>
        </div>
        
        <div class="form-group row">
            <div class="col-sm-10 offset-sm-2">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>
</div>

在這裏插入圖片描述
在這裏插入圖片描述
這兩個地方出現了問題,改下
第一張圖的問題就不解釋了
第二張圖
在這裏插入圖片描述
咱們的Add.cshtml中須要獲得cinemaId,因此要添加ViewBag.CinemaId = cinemaId;
告訴它應該放入那個電影院中
在這裏插入圖片描述

已經能夠了

github源碼:https://github.com/1045683477/.net-Core-MVC-

相關文章
相關標籤/搜索