ABP(ASP.NET core +Multi PageWeb Application) 根据官网给的例子做的简单的页面

根据官网给的https://aspnetboilerplate.com/Pages/Articles/Introduction-With-AspNet-Core-And-Entity-Framework-Core-Part-1/index.html和https://aspnetboilerplate.com/Pages/Articles/Introduction-With-AspNet-Core-And-Entity-Framework-Core-Part-2/index.html写的demo

第一步在 MyABP.Core的Authorization文件夹下面创建一个文件夹Tasks，并新增两个类

using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using Abp.Domain.Entities;
using Abp.Domain.Entities.Auditing;
using Abp.Timing;

namespace MyABP.Authorization.Tasks
{
    [Table("AppTasks")]
    public class Task : Entity, IHasCreationTime
    {
        public const int MaxTitleLength = 256;
        public const int MaxDescriptionLength = 64 * 1024; //64KB

        [ForeignKey(nameof(AssignedPersonId))]
        public Person AssignedPerson { get; set; }
        public Guid? AssignedPersonId { get; set; }

        [Required]
        [StringLength(MaxTitleLength)]
        public string Title { get; set; }

        [StringLength(MaxDescriptionLength)]
        public string Description { get; set; }

        public DateTime CreationTime { get; set; }

        public TaskState State { get; set; }

        public Task()
        {
            CreationTime = Clock.Now;
            State = TaskState.Open;
        }

        public Task(string title, string description = null, Guid? assignedPersonId = null)
            : this()
        {
            Title = title;
            Description = description;
            AssignedPersonId = assignedPersonId;
        }
    }

    public enum TaskState : byte
    {
        Open = 0,
        Completed = 1
    }
}
using Abp.Domain.Entities.Auditing;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Text;

namespace MyABP.Authorization.Tasks
{
    [Table("AppPersons")]
    public class Person : AuditedEntity<Guid>
    {
        public const int MaxNameLength = 32;

        [Required]
        [StringLength(MaxNameLength)]
        public string Name { get; set; }

        public Person()
        {

        }

        public Person(string name)
        {
            Name = name;
        }
    }
}

第二步  新增好类之后，在MyABP.EntityFrameworkCore项目的MyABPDbContext中，新增代码

 public DbSet<Task> Tasks { get; set; }
 public DbSet<Person> People { get; set; }

将MyABP.EntityFrameworkCore作为启动项目，在管理器控制台中输入Add-Migration "Initial"回车 （注意这里的Initial的命名每次都应该是不同的）更新需要迁移的，更新完成之后，继续输入update-database回车，这样就将数据表更新到数据中

第三步 在MyABP.Application层新增一个文件夹Tasks，接着新增一个接口服务ITaskAppService.cs

using MyABP.Tasks.DTO;
using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;

namespace MyABP.Application.Tasks
{
    public interface ITaskAppService : IApplicationService
    {
        Task<ListResultDto<TaskListDto>> GetAll(GetAllTasksInput input);//用于查询任务列表
        Task Create(CreateTaskInput input);//创建任务
    }
}

这是我们需要创建三个类TaskListDto、GetAllTasksInput和CreateTaskInput，则我们在Tasks文件夹下面新增一个文件夹DTO用于管理这些类

using Abp.Application.Services.Dto;
using Abp.AutoMapper;
using Abp.Domain.Entities.Auditing;
using MyABP.Authorization.Tasks;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Text;

namespace MyABP.Tasks.DTO
{
    public class GetAllTasksInput
    {
        public TaskState? State { get; set; }
    }

    [AutoMapFrom(typeof(Task))]
    public class TaskListDto : EntityDto, IHasCreationTime
    {
        public string Title { get; set; }

        public string Description { get; set; }

        public DateTime CreationTime { get; set; }

        public TaskState State { get; set; }
        public Guid? AssignedPersonId { get; set; }

        public string AssignedPersonName { get; set; }
    }
    [AutoMapTo(typeof(Task))]
    public class CreateTaskInput
    {
        [Required]
        [StringLength(Task.MaxTitleLength)]
        public string Title { get; set; }

        [StringLength(Task.MaxDescriptionLength)]
        public string Description { get; set; }

        public Guid? AssignedPersonId { get; set; }
    }
}

接着在Tasks文件夹中创建TaskAppService.cs类来实现ITaskAppService的接口方法

 using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Abp.Application.Services.Dto;
using Abp.Domain.Repositories;
using Abp.Linq.Extensions;
using Castle.Core.Logging;
using Microsoft.EntityFrameworkCore;
using MyABP.Tasks.DTO;

namespace MyABP.Application.Tasks
{
    public class TaskAppService : MyABPAppServiceBase, ITaskAppService
    {
        private readonly IRepository<Authorization.Tasks.Task> _taskRepository;
         public TaskAppService(IRepository<Authorization.Tasks.Task> taskRepository)
        {
            _taskRepository = taskRepository;
        }

        public async Task<ListResultDto<TaskListDto>> GetAll(GetAllTasksInput input)
        {
            var tasks = await _taskRepository
                .GetAll()
                .Include(t => t.AssignedPerson)
                .WhereIf(input.State.HasValue, t => t.State == input.State.Value)
                .OrderByDescending(t => t.CreationTime)
                .ToListAsync();

            return new ListResultDto<TaskListDto>(
                ObjectMapper.Map<List<TaskListDto>>(tasks)
            );
        }

        public async Task Create(CreateTaskInput input)
        {
            var task = ObjectMapper.Map<Authorization.Tasks. Task>(input);
            await _taskRepository.InsertAsync(task);
        }

    }
}

由于在官方文档的pass II部分创建了任务，还将任务指派给其他人，所以还需要做一个下拉框来装AppPersons表的查询出来的人员列表，则我们在Tasks文件夹中还需要定义一个ILookupAppService.cs接口

using Abp.Application.Services;
using Abp.Application.Services.Dto;
using System.Threading.Tasks;

namespace MyABP.Application.Tasks
{
    public interface ILookupAppService : IApplicationService

    {
        Task<ListResultDto<ComboboxItemDto>> GetPeopleComboboxItems();
    }
}

创建LookupAppService.cs来实现ILookupAppService的接口方法

using Abp.Application.Services.Dto;
using Abp.Domain.Repositories;
using MyABP.Authorization.Tasks;
using System;
using System.Linq;
using System.Threading.Tasks;

namespace MyABP.Application.Tasks
{
    public class LookupAppService : MyABPAppServiceBase, ILookupAppService
    {
        private readonly IRepository<Person, Guid> _personRepository;

        public LookupAppService(IRepository<Person, Guid> personRepository)
        {
            _personRepository = personRepository;
        }

        public async Task<ListResultDto<ComboboxItemDto>> GetPeopleComboboxItems()
        {
            var people = await _personRepository.GetAllListAsync();
            return new ListResultDto<ComboboxItemDto>(
                people.Select(p => new ComboboxItemDto(p.Id.ToString("D"), p.Name)).ToList()
            );
        }

    }
}

第四步 在MyABP.Web.Mvc项目的Controllers控制器文件夹中新增一个TasksController.cs控制室

using System.Linq;
using System.Threading.Tasks;
using Abp.Application.Services.Dto;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using MyABP.Application.Tasks;
using MyABP.Controllers;
using MyABP.Tasks.DTO;
using MyABP.Web.Models.Tasks;

namespace MyABP.Web.Controllers
{
    public class TasksController : MyABPControllerBase
    {
        private readonly ITaskAppService _taskAppService;
        private readonly ILookupAppService _lookupAppService;

        public TasksController(ITaskAppService taskAppService,
            ILookupAppService lookupAppService)
        {
            _taskAppService = taskAppService;
            _lookupAppService = lookupAppService;
        }

        public async Task<ActionResult> Index(GetAllTasksInput input)
        {
            var output = await _taskAppService.GetAll(input);
            var model = new IndexViewModel(output.Items)
            {
                SelectedTaskState = input.State
            };
            return View(model);
        }
        public async Task<ActionResult> Create()
        {
            var peopleSelectListItems = (await _lookupAppService.GetPeopleComboboxItems()).Items
                .Select(p => p.ToSelectListItem())
                .ToList();

            peopleSelectListItems.Insert(0, new SelectListItem { Value = string.Empty, Text = L("Unassigned"), Selected = true });

            return View(new CreateTaskViewModel(peopleSelectListItems));
        }
    }
}

这是我们需要在Models文件夹中新增类IndexViewModel和CreateTaskViewModel，则我们在Models文件夹下面新增一个文件夹Tasks用于管理这些类

using Abp.Localization;
using Microsoft.AspNetCore.Mvc.Rendering;
using MyABP.Authorization.Tasks;
using MyABP.Tasks.DTO;
using System;
using System.Collections.Generic;
using System.Linq; 

namespace MyABP.Web.Models.Tasks
{
    public class IndexViewModel
    {
        public IReadOnlyList<TaskListDto> Tasks { get; }

        public IndexViewModel(IReadOnlyList<TaskListDto> tasks)
        {
            Tasks = tasks;
        }

        public string GetTaskLabel(TaskListDto task)
        {
            switch (task.State)
            {
                case TaskState.Open:
                    return "label-success";
                default:
                    return "label-default";
            }
        }

        public TaskState? SelectedTaskState { get; set; }

        public List<SelectListItem> GetTasksStateSelectListItems(ILocalizationManager localizationManager)
        {
            var list = new List<SelectListItem>
        {
            new SelectListItem
            {
                Text = localizationManager.GetString( MyABPConsts.LocalizationSourceName, "AllTasks"),
                Value = "",
                Selected = SelectedTaskState == null
            }
        };

            list.AddRange(Enum.GetValues(typeof(TaskState))
                    .Cast<TaskState>()
                    .Select(state =>
                        new SelectListItem
                        {
                            Text = localizationManager.GetString(MyABPConsts.LocalizationSourceName, $"TaskState_{state}"),
                            Value = state.ToString(),
                            Selected = state == SelectedTaskState
                        })
            );

            return list;
        }
    }
}

using Microsoft.AspNetCore.Mvc.Rendering;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace MyABP.Web.Models.Tasks
{
    public class CreateTaskViewModel
    {
        public List<SelectListItem> People { get; set; }

        public CreateTaskViewModel(List<SelectListItem> people)
        {
            People = people;
        }
    }
}

转回到Tasks控制器中，我们需要在Index方法里面右击鼠标，添加视图Index，接着我们进入Index.cshtml编写代码如下

@model MyABP.Web.Models.Tasks.IndexViewModel

@{
    ViewBag.Title = L("TaskList");
    ViewBag.ActiveMenu = "TaskList"; //Matches with the menu name in SimpleTaskAppNavigationProvider to highlight the menu item
}

    <h2>
        @L("TaskList")
        <span class="pull-right">
            @Html.DropDownListFor(
               model => model.SelectedTaskState,
               Model.GetTasksStateSelectListItems(LocalizationManager),
               new
               {
                   @class = "form-control",
                   id = "TaskStateCombobox"
               })
        </span>
    </h2>
    <a class="btn btn-primary btn-sm" asp-action="Create">@L("AddNew")</a>
<div class="row">
    <div>
        <ul class="list-group" id="TaskList">
            @foreach (var task in Model.Tasks)
            {
                <li class="list-group-item">
                    <span class="pull-right label @Model.GetTaskLabel(task)">@L($"TaskState_{task.State}")</span>
                    <h4 class="list-group-item-heading">@task.Title</h4>
                    <div class="list-group-item-text">
                        @task.CreationTime.ToString("yyyy-MM-dd HH:mm:ss")
                    </div>
                </li>
            }
        </ul>
    </div>
</div>

在Create方法里面右击鼠标，添加视图Create，接着我们进入Create.cshtml编写代码如下

@model MyABP.Web.Models.Tasks.CreateTaskViewModel

@section scripts
{
    <environment names="Development">
        <script src="~/view-resources/Views/Tasks/create.js"></script>
    </environment>

    <environment names="Staging,Production">
        <script src="~/view-resources/Views/Tasks/create.min.js"></script>
    </environment>
}

<h2>
    @L("NewTask")
</h2>

<form id="TaskCreationForm">

    <div class="form-group">
        <label for="Title">@L("Title")</label>
        <input type="text" name="Title" class="form-control" placeholder="@L("Title")" required maxlength="@MyABP.Authorization.Tasks.Task.MaxTitleLength">
    </div>

    <div class="form-group">
        <label for="Description">@L("Description")</label>
        <input type="text" name="Description" class="form-control" placeholder="@L("Description")" maxlength="@MyABP.Authorization.Tasks.Task.MaxDescriptionLength">
    </div>

    <div class="form-group">
        @Html.Label(L("AssignedPerson"))
        @Html.DropDownList(
            "AssignedPersonId",
            Model.People,
            new
            {
                @class = "form-control",
                id = "AssignedPersonCombobox"
            })
    </div>

    <button type="submit" class="btn btn-default">@L("Save")</button>

</form>

这里我们需要创建一个js，在wwwroot文件夹的view-resources的Views中新增一个Tasks文件夹 ，创建create.js  代码如下

(function ($) {
    $(function () {

        var _$form = $(‘#TaskCreationForm‘);

        _$form.find(‘input:first‘).focus();

        _$form.validate();

        _$form.find(‘button[type=submit]‘)
            .click(function (e) {
                e.preventDefault();

                if (!_$form.valid()) {
                    return;
                }

                var input = _$form.serializeFormToObject();
                abp.services.app.task.create(input)
                    .done(function () {
                        location.href = ‘/Tasks‘;
                    });
            });
    });
})(jQuery);

第五步 在MyABP.Web.Mvc项目的Startup文件夹的MyABPNavigationProvider.cs中的SetNavigation方法中插入代码

.AddItem(
                new MenuItemDefinition(
                    "TaskList",
                    L("TaskList"),
                    url: "Tasks",
                    icon: "info"//图标
// requiredPermissionName: PermissionNames.Pages_Roles权限
                    )
            )

最后，在AppPersons中新增两个人名，这样下拉框就有数据了，运行代码则可以看到

点击Add New

保存之后，js代码中写了自动返回Tasks页面

原文地址：https://www.cnblogs.com/XiaoLiangSummary/p/12190990.html

时间： 2024-11-16 09:03:12

ABP(ASP.NET core +Multi PageWeb Application) 根据官网给的例子做的简单的页面的相关文章

ASP.NET Core应用针对静态文件请求的处理[5]: DefaultFilesMiddleware中间件如何显示默认页面

DefaultFilesMiddleware中间件的目的在于将目标目录下的默认文件作为响应内容.我们知道,如果直接请求的就是这个默认文件,那么前面介绍的StaticFileMiddleware中间件会将这个文件响应给客户端.如果我们能够将针对目录的请求重定向到这个默认文件上,一切就迎刃而解了.实际上DefaultFilesMiddleware中间件的实现逻辑很简单,它采用URL重写的形式修改了当前请求的地址,即将针对目录的URL修改成针对默认文件的URL.[本文已经同步到<ASP.NET Cor

asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程

原文:asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 最近在学习张善友老师的NanoFabric 框架的时了解到Exceptionless : https://exceptionless.com/ !因此学习了一下这个开源框架!下面对Exceptionless的学习做下笔记! Exceptionless是什么?能做什么呢? “Exceptionless”这个词的定义是:没有异常.Exceptionless可以为您的ASP.NET.We

.NET最流行的Web应用框架ABP ASP.NET CORE

介绍 .NET 下有很多优秀的web开发框架,热度最高的应该还是ASP.NET Boilerplate - Web Application Framewor 因为ABP是一个通用的开发框架,可以用来开发各种场景的web应用程序,开发的精力只要放在业务上就可以了,而且前端的技术也是流行的框架,还有ABP的生态目前还是不错的,有公司在维护,还有很多开发者也在维护中,上面提到的ASP.NET Boilerplate 同时支持.NET Framework和.NET Core,目前已经非常的成熟了,应用在

ASP.NET Core应用的错误处理[3]：ExceptionHandlerMiddleware中间件如何呈现&ldquo;定制化错误页面&rdquo;

DeveloperExceptionPageMiddleware中间件利用呈现出来的错误页面实现抛出异常和当前请求的详细信息以辅助开发人员更好地进行纠错诊断工作,而ExceptionHandlerMiddleware中间件则是面向最终用户的,我们可以利用它来显示一个友好的定制化的错误页面.按照惯例,我们还是先来看看ExceptionHandlerMiddleware的类型定义. [本文已经同步到<ASP.NET Core框架揭秘>之中] 1: public class ExceptionHan

ASP.NET Core搭建多层网站架构【3-使用xUnit编写单元测试之简单方法测试】

2020/01/28, ASP.NET Core 3.1, VS2019, xUnit 摘要:基于ASP.NET Core 3.1 WebApi搭建后端多层网站架构[3-使用xUnit编写单元测试之简单方法测试] 文章目录 此分支项目代码 上一章节已经建立了Common公共类库,本章节介绍编写简单的单元测试,对上一章节的公共类库中EnumExtension方法编写单元测试,同时也是介绍上一章节中公共类库EnumExtension的使用方法 新建测试项目 在tests解决方案文件夹下,新建xUni

Core J2EE Patterns - Service Locator--oracle官网

原文地址:http://www.oracle.com/technetwork/java/servicelocator-137181.html Context Service lookup and creation involves complex interfaces and network operations. Problem J2EE clients interact with service components, such as Enterprise JavaBeans (EJB) a

ASP.NET Core教程：ASP.NET Core 程序部署到Windows系统

一.创建项目 本篇文章介绍如何将一个ASP.NET Core Web程序部署到Windows系统上.这里以ASP.NET Core WebApi为例进行讲解.首先创建一个ASP.NET Core WebApi项目,使用默认的Values控制器,这里使用Visual Studio 2019创建一个ASP.NET Core 3.1d的WebApi项目. 创建新项目的时候选项ASP.NET Core Web应用程序,如下图所示: 配置新项目界面界面设置项目名称和位置,如下图所示: 选择.Net Cor

ASP.NET Core读取AppSettings

http://www.tuicool.com/articles/rQruMzV 今天在把之前一个ASP.NET MVC5的Demo项目重写成ASP.NET Core,发现原先我们一直用的ConfigurationManager.AppSettings[]读取Web.config中的AppSettings节点的方法没用了..NET Core有许多新的做法,我挑了一个最合适我自己项目的来分享一下我的实现方式. 首先,原来的代码: web.config ... <appSettings> ... &

ASP.NET Core + Angular 2 Template for Visual Studio

多个月以来,我和多个Github上的社区贡献者一起建立支持库.包,我们最终的目的是希望完成这样一个作为起点的模板,也就是基于把Typescript代码和Angular2宿主在ASP.NET Core项目中,这个模板包含一下这些方面: 服务端预加载(预渲染):这样你的UI可以快速的显示,甚至在浏览器下载Javascript之前. Webpack中间件集成:在开发期间,你不需要一直重新编译你的客户端项目,或者你可以用一个watcher工具在后台帮你做这些事. 模块热拔插:在开发期间,一旦你编辑了一个