ABP進階教程3 - 優化編輯

點這里進入ABP進階教程目錄 

我們嘗試在新增/編輯界面增加一個下拉框用來代替輸入框編輯Status
  

添加實體

打開領域層(即JD.CRS.Core)的Entitys目錄 //用以存放實體對象
添加一個類StatusCode.cs //狀態信息

using System;
using System.Collections.Generic;
using System.Text;

namespace JD.CRS.Entitys
{
    public enum StatusCode : byte
    {
        Enabled = 0,
        Disabled = 1
    }
}

更新模型

更新查詢視圖模型

打開展示層(即JD.CRS.Web.Mvc)的Models/Course/CourseListViewModel.cs //Course查詢視圖模型

新增GetStatusList方法 //獲取狀態列表

public StatusCode? Status { get; set; }

public List<SelectListItem> GetStatusList(ILocalizationManager localizationManager)
{
    var list = new List<SelectListItem>
    {
        new SelectListItem
        {
            Text = localizationManager.GetString(CRSConsts.LocalizationSourceName, "PleaseSelect"),
            Value = "",
            Selected = Status == null
        }
    };

    list.AddRange(Enum.GetValues(typeof(StatusCode))
        .Cast<StatusCode>()
        .Select(status =>
            new SelectListItem
            {
                Text = localizationManager.GetString(CRSConsts.LocalizationSourceName, $"StatusCode_{status}"),
                Value = status.ToString(),
                Selected = status == Status
            })
    );

    return list;
}

更新編輯視圖模型

打開展示層(即JD.CRS.Web.Mvc)的Models/Course/EditCourseModalViewModel.cs //Course編輯視圖模型

新增GetStatusList方法 //獲取狀態列表

public List<SelectListItem> GetStatusList(ILocalizationManager localizationManager)
{
    var list = new List<SelectListItem>
    {
    };

    list.AddRange(Enum.GetValues(typeof(StatusCode))
        .Cast<StatusCode>()
        .Select(status =>
            new SelectListItem
            {
                Text = localizationManager.GetString(CRSConsts.LocalizationSourceName, $"StatusCode_{status}"),
                Value = status.ToString(),
                Selected = status == Status
            })
    );

    return list;
}

更新控制器

打開展示層(即JD.CRS.Web.Mvc)的Controllers/CourseController.cs //Course控制器

更新EditCourseModal方法 //向EditCourseModalViewModel傳參數Status

public async Task<ActionResult> EditCourseModal(int courseId)
{
    var course = await _courseAppService.Get(new EntityDto<int>(courseId));
    var model = new EditCourseModalViewModel
    {
        Course = course,
        Status = course.Status
    };
    return View("_EditCourseModal", model);
}

更新創建視圖

打開展示層(即JD.CRS.Web.Mvc)的Views/Course/Index.cshtml //Course查詢視圖

添加下拉框Status //以替代輸入框Status

<div class="row clearfix">
    <div class="col-sm-12">
        <div class="form-line">
            <label class="form-label">@L("Status")</label>
            @Html.DropDownListFor(
            model => model.Status,
            Model.GetStatusList(LocalizationManager),
            new
            {
                @class = "form-control",
                id = "Status"
            })
            @*<input name="Status" type="text" class="form-control" />*@
        </div>
    </div>
</div>

更新編輯視圖

打開展示層(即JD.CRS.Web.Mvc)的Views/Course/_EditCourseModal.cshtml //Course編輯視圖

添加下拉框Status //以替代輸入框Status

<div class="row clearfix">
    <div class="col-sm-12">
        <div class="form-line">
            <label class="form-label">@L("Status")</label>
            @Html.DropDownListFor(
            model => model.Status,
            Model.GetStatusList(LocalizationManager),
            new
            {
                @class = "form-control",
                id = "Status"
            })
            @*<input name="Status" type="text" value="@Model.Course.Status" class="form-control" />*@
        </div>
    </div>
</div>

更新腳本

打開展示層(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\_EditCourseModal.js //用以存放Course編輯相關腳本

在初始化Form時給下拉框傳值

//Initial form
_$modal.on('shown.bs.modal', function () {
    _$form.find('input[type=text]:first').focus();//focus first input
    _$status.val() = status;//Status value
});

預覽效果

創建課程

 

編輯課程