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

時間 2019-11-05

標籤 abp core easyui+efcore easyui efcore 實現倉儲管理系統展示增刪視圖欄目快樂工作简体版

原文原文鏈接

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

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

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

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

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

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

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

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

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

3、建立更新視圖orm

在ASP.NET MVC的默認模板中，更新視圖是經過「Edit」標籤，使用「asp-route-id」屬性在瀏覽器中生成指向Views\Module\Edit.cshtml 視圖的連接。具體代碼以下。htm

  <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");}
}

4、建立刪除視圖

若是你使用過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>

5、建立新增視圖

在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");}

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。