abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之增刪改視圖（八）

在這一篇文章(abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之列表視圖（七）)中我們創建一個使用Razor視圖引擎的視圖模板文件，Razor視圖模板文件的擴展名為.cshtml，並提供一種比較優雅的方式使用C＃來創建HTML輸出。Razor視圖模板減少了... ...

abp(net core)+easyui+efcore實現倉儲管理系統目錄

abp(net core)+easyui+efcore實現倉儲管理系統——ABP總體介紹(一）

abp(net core)+easyui+efcore實現倉儲管理系統——解決方案介紹(二)

abp(net core)+easyui+efcore實現倉儲管理系統——領域層創建實體(三)

abp(net core)+easyui+efcore實現倉儲管理系統——定義倉儲並實現 (四)

abp(net core)+easyui+efcore實現倉儲管理系統——創建應用服務（五）

abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之控制器（六）

abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之列表視圖（七）

在這一篇文章(abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之列表視圖（七）)中我們創建一個使用Razor視圖引擎的視圖模板文件，Razor視圖模板文件的擴展名為.cshtml，並提供一種比較優雅的方式使用C＃來創建HTML輸出。Razor視圖模板減少了編寫程式所需要輸入的字元數量和敲擊鍵盤的次數，並實現了快速、流暢的編碼工作。下麵添加更新視圖、刪除視圖、新增視圖的具體步驟：

三、創建更新視圖

在ASP.NET MVC的預設模板中，更新視圖是通過“Edit”標簽，使用“asp-route-id”屬性在瀏覽器中生成指向Views\Module\Edit.cshtml 視圖的鏈接。具體代碼如下。

  <a asp-action="Edit" class="waves-effect waves-block" asp-route-id="@item.Id"><i class="material-icons">edit</i>@L("Edit")</a>

1) 在Visual Studio 2017的解決方案資源管理器中，使用滑鼠右鍵單擊“Module”文件夾，然後選擇“添加” > “新建項…”。在“添加新項-ABP.TPLMS.Web.Mvc”對話框中，選擇“Razor視圖”，並將名稱命名為Edit.cshmtl。在此視圖中添加如下代碼。

@using ABP.TPLMS.Web.Startup
@model ABP.TPLMS.Web.Models.Module.EditModuleModalViewModel

@{

    ViewData["Title"] = "Edit";
} 

<h2>Edit</h2> 

<h4>模塊編輯</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="@Model.Module.Id" />
            <div class="form-group">
                <label asp-for="@Model.Module.Name" class="control-label"></label>
                <input asp-for="@Model.Module.Name" class="form-control" />
                <span asp-validation-for="@Model.Module.Name" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="@Model.Module.DisplayName" class="control-label"></label>
                <input asp-for="@Model.Module.DisplayName" class="form-control" />
                <span asp-validation-for="@Model.Module.DisplayName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="@Model.Module.Url" class="control-label"></label>
                <input asp-for="@Model.Module.Url" class="form-control" />

                <span asp-validation-for="@Model.Module.Url" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="@Model.Module.HotKey" class="control-label"></label>
                <input asp-for="@Model.Module.HotKey" class="form-control" />

                <span asp-validation-for="@Model.Module.HotKey" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="@Model.Module.IconName" class="control-label"></label>

                <input asp-for="@Model.Module.IconName" class="form-control" />
                <span asp-validation-for="@Model.Module.IconName" class="text-danger"></span>
            </div>
            <div class="form-group">

                <label asp-for="@Model.Module.RequiredPermissionName" class="control-label"></label>
                <input asp-for="@Model.Module.RequiredPermissionName" class="form-control" />
                <span asp-validation-for="@Model.Module.RequiredPermissionName" class="text-danger"></span>
            </div> 

            <div class="form-group">
                <label asp-for="@Model.Module.RequiresAuthentication" class="control-label"></label>
                <input asp-for="@Model.Module.RequiresAuthentication" type="checkbox" />               

            </div>

            <div class="form-group">
                <label asp-for="@Model.Module.ParentName" class="control-label"></label>
                <input asp-for="@Model.Module.ParentName" class="form-control" value="根目錄"/>
                <span asp-validation-for="@Model.Module.ParentName" class="text-danger"></span>
            </div>

            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-default" />

            </div>
        </form>
    </div>
</div>
<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

四、創建刪除視圖

如果你使用過ASP.NET MVC的進行過應用開發，那麼你就知道刪除視圖是通過“Delete”標簽，使用“asp-route-id”屬性在瀏覽器中生成指向Views\Module\Delete.cshtml 視圖的鏈接。具體代碼如下。

 <a asp-action="Delete" class="waves-effect waves-block" asp-route-id="@item.Id"><i class="material-icons">delete_sweep</i>@L("Delete")</a>

1) 在Visual Studio 2017的解決方案資源管理器中，使用滑鼠右鍵單擊“Module”文件夾，然後選擇“添加” > “新建項…”。在“添加新項-ABP.TPLMS.Web.Mvc”對話框中，選擇“Razor視圖”，並將名稱命名為Delete.cshmtl。在刪除視圖文件中添加如下代碼。

@using ABP.TPLMS.Web.Startup
@model ABP.TPLMS.Web.Models.Module.EditModuleModalViewModel

@{

    ViewData["Title"] = PageNames.Module;

}

<h2>刪除模塊</h2>
<h3>Are you sure you want to delete this?</h3>

<div>
    <h4>Cargo</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Module.Name)

        </dt>
        <dd>
            @Html.DisplayFor(model => model.Module.Name)

        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Module.DisplayName)

        </dt>
        <dd>
            @Html.DisplayFor(model => model.Module.DisplayName)

        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Module.Status)

        </dt>
        <dd>
            @Html.DisplayFor(model => model.Module.Status)

        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Module.RequiredPermissionName)

        </dt>
        <dd>
            @Html.DisplayFor(model => model.Module.RequiredPermissionName)

        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Module.IconName)

        </dt>
        <dd>
            @Html.DisplayFor(model => model.Module.IconName)

        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Module.ParentName)

        </dt>
        <dd>
            @Html.DisplayFor(model => model.Module.ParentName)

        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Module.RequiresAuthentication)

        </dt>
        <dd>
            @Html.DisplayFor(model => model.Module.RequiresAuthentication)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Module.Url)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Module.Url)

        </dd>
    </dl> 

    <form asp-action="Delete">
        <input type="hidden" asp-for="@Model.Module.Id" />

        <input type="submit" value="Delete" class="btn btn-default" /> |

        <a asp-action="Index">Back to List</a>
    </form>
</div>

五、創建新增視圖

在ASP.NET MVC的預設模板中，新增視圖是通過“Create”標簽，使用asp-action="Create"屬性在瀏覽器中生成指向Views\Module\Create.cshtml 視圖的鏈接。具體代碼如下。

  <a asp-action="Create" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right"> <i class="material-icons">add</i></a>

1) 在Visual Studio 2017的解決方案資源管理器中，使用滑鼠右鍵單擊“Module”文件夾，然後選擇“添加” > “新建項…”。在“添加新項-ABP.TPLMS.Web.Mvc”對話框中，選擇“Razor視圖”，並將名稱命名為Create.cshmtl，代碼如下。

@using ABP.TPLMS.Web.Startup
@model ABP.TPLMS.Web.Models.Module.EditModuleModalViewModel

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

<h4>創建模塊</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="@Model.Module.Name" class="control-label"></label>
                <input asp-for="@Model.Module.Name" class="form-control" />
                <span asp-validation-for="@Model.Module.Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="@Model.Module.DisplayName" class="control-label"></label>

                <input asp-for="@Model.Module.DisplayName" class="form-control" />
                <span asp-validation-for="@Model.Module.DisplayName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="@Model.Module.Url" class="control-label"></label>
                <input asp-for="@Model.Module.Url" class="form-control" />

                <span asp-validation-for="@Model.Module.Url" class="text-danger"></span>

            </div>
            <div class="form-group">
                <label asp-for="@Model.Module.HotKey" class="control-label"></label>
                <input asp-for="@Model.Module.HotKey" class="form-control" />

                <span asp-validation-for="@Model.Module.HotKey" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="@Model.Module.IconName" class="control-label"></label>
                <input asp-for="@Model.Module.IconName" class="form-control" />
                <span asp-validation-for="@Model.Module.IconName" class="text-danger"></span>

            </div>
            <div class="form-group">
                <label asp-for="@Model.Module.RequiredPermissionName" class="control-label"></label>
                <input asp-for="@Model.Module.RequiredPermissionName" class="form-control" />
                <span asp-validation-for="@Model.Module.RequiredPermissionName" class="text-danger"></span>

            </div>

            <div class="row clearfix">
                <div class="form-group">
                    <div class="checkbox">
                        <label asp-for="@Model.Module.RequiresAuthentication"></label>
                        <input asp-for="@Model.Module.RequiresAuthentication" type="checkbox" class="filled-in" checked />
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label asp-for="@Model.Module.ParentName" class="control-label"></label>
                <input asp-for="@Model.Module.ParentName" class="form-control" value="根目錄" />
                <span asp-validation-for="@Model.Module.ParentName" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="@Model.Module.Status" class="control-label"></label>

                <input asp-for="@Model.Module.Status" class="form-control" />
                <span asp-validation-for="@Model.Module.Status" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="@Model.Module.SortNo" class="control-label"></label>
                <input asp-for="@Model.Module.SortNo" class="form-control" />
                <span asp-validation-for="@Model.Module.SortNo" class="text-danger"></span>

            </div>

            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div> 

<div>
    <a asp-action="Index">Back to List</a>

</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

}