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

DotNet菜園發表於2019-07-09
UI

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

}

 

相關文章