ABP进阶教程3 - 优化编辑

时间：2019-10-14 12:46:39 阅读：96 评论：0 收藏：0 [点我收藏+]

我们尝试在新增/编辑界面增加一个下拉框用来代替输入框编辑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.Application)的Course\Dto\GetAllCoursesInput.cs文件 //用以存放Course传输参数

添加一行代码

public StatusCode? Status { get; set; }

更新模型

更新查询视图模型

打开展示层(即JD.CRS.Web.Mvc)的Models/Course/CourseListViewModel.cs //Course查询视图模型

新增GetStatusList方法 //获取状态列表

 1 public StatusCode? Status { get; set; }
 2 
 3 public List<SelectListItem> GetStatusList(ILocalizationManager localizationManager)
 4 {
 5     var list = new List<SelectListItem>
 6     {
 7         new SelectListItem
 8         {
 9             Text = localizationManager.GetString(CRSConsts.LocalizationSourceName, "PleaseSelect"),
10             Value = "",
11             Selected = Status == null
12         }
13     };
14 
15     list.AddRange(Enum.GetValues(typeof(StatusCode))
16         .Cast<StatusCode>()
17         .Select(status =>
18             new SelectListItem
19             {
20                 Text = localizationManager.GetString(CRSConsts.LocalizationSourceName, $"StatusCode_{status}"),
21                 Value = status.ToString(),
22                 Selected = status == Status
23             })
24     );
25 
26     return list;
27 }

View Code

更新编辑视图模型

打开展示层(即JD.CRS.Web.Mvc)的Models/Course/EditCourseModalViewModel.cs //Course编辑视图模型

新增GetStatusList方法 //获取状态列表

 1 public List<SelectListItem> GetStatusList(ILocalizationManager localizationManager)
 2 {
 3     var list = new List<SelectListItem>
 4     {
 5     };
 6 
 7     list.AddRange(Enum.GetValues(typeof(StatusCode))
 8         .Cast<StatusCode>()
 9         .Select(status =>
10             new SelectListItem
11             {
12                 Text = localizationManager.GetString(CRSConsts.LocalizationSourceName, $"StatusCode_{status}"),
13                 Value = status.ToString(),
14                 Selected = status == Status
15             })
16     );
17 
18     return list;
19 }

View Code

更新控制器

打开展示层(即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
});

预览效果

创建课程

技术分享图片

编辑课程

技术分享图片

ABP进阶教程3 - 优化编辑

原文：https://www.cnblogs.com/IT-Evan/p/ABP19.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)