ABP框架在Mvc Razor上自定义Crud UI

Question

我是 Abp 框架的新用户。 Abp 自动执行许多操作。这太棒了，您不需要对大多数交易执行任何操作。

但是如何在不破坏 UI 部分现有规则、本地化和安全控制的情况下实现如下所示的结构呢？

Order (Customer, OrderDate, Currency, ExchangeRate, DeliveryDate, Notes...),

OrderDetails(StockCode, Explanation, Price, Quantity, DiscountRate,... multi-line entry)

我设计了一个复杂的 UI，并确保其在数据库端的无缝验证和注册。

<abp-dynamic-form abp-model="Bank" asp-page="/Banks/CreateModal">
    <abp-modal>
        <abp-modal-header title="@L["NewBank"].Value"></abp-modal-header>
        <abp-modal-body>
            <abp-form-content />
            <div class="row">
                <div class="col">
                    Hello Col1
                </div>
                <div class="col">
                    Hello Col2
                </div>
                <p>My Form Content</p>
            </div>
        </abp-modal-body>
        <abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
    </abp-modal>
</abp-dynamic-form>

上述代码对现有结构进行了干预。但如何更改表单大小和宽度控件或调整本地化？

我如何制作一个像 Order OrderDetails 这样的示例设计？

Answer 1

https://docs.abp.io/en/abp/latest/UI/AspNetCore/Tag-Helpers/Dynamic-Forms你可以像这里一样自定义它。

示例：

public class DynamicFormsModel : PageModel
{
    [BindProperty]
    public DetailedModel MyDetailedModel { get; set; }

    public List<SelectListItem> CountryList { get; set; } = new List<SelectListItem>
    {
        new SelectListItem { Value = "CA", Text = "Canada"},
        new SelectListItem { Value = "US", Text = "USA"},
        new SelectListItem { Value = "UK", Text = "United Kingdom"},
        new SelectListItem { Value = "RU", Text = "Russia"}
    };

    public void OnGet()
    {
            MyDetailedModel = new DetailedModel
            {
                Name = "",
                Description = "Lorem ipsum dolor sit amet.",
                IsActive = true,
                Age = 65,
                Day = DateTime.Now,
                MyCarType = CarType.Coupe,
                YourCarType = CarType.Sedan,
                Country = "RU",
                NeighborCountries = new List<string>() { "UK", "CA" }
            };
    }

    public class DetailedModel
    {
        [Required]
        [Placeholder("Enter your name...")]
        [Display(Name = "Name")]
        public string Name { get; set; }
        
        [TextArea(Rows = 4)]
        [Display(Name = "Description")]
        [InputInfoText("Describe Yourself")]
        public string Description { get; set; }

        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [Display(Name = "Is Active")]
        public bool IsActive { get; set; }

        [Required]
        [Display(Name = "Age")]
        public int Age { get; set; }

        [Required]
        [Display(Name = "My Car Type")]
        public CarType MyCarType { get; set; }

        [Required]
        [AbpRadioButton(Inline = true)]
        [Display(Name = "Your Car Type")]
        public CarType YourCarType { get; set; }

        [DataType(DataType.Date)]
        [Display(Name = "Day")]
        public DateTime Day { get; set; }
        
        [SelectItems(nameof(CountryList))]
        [Display(Name = "Country")]
        public string Country { get; set; }
        
        [SelectItems(nameof(CountryList))]
        [Display(Name = "Neighbor Countries")]
        public List<string> NeighborCountries { get; set; }
    }

    public enum CarType
    {
        Sedan,
        Hatchback,
        StationWagon,
        Coupe
    }
}

或者您可以根据需要塑造它，而不是使用标签助手使其动态化https://docs.abp.io/en/abp/latest/UI/AspNetCore/Tag-Helpers/Form-elements。

示例：

<form method='post' asp-page="/Banks/CreateModal">
    <abp-modal>
        <abp-modal-header title="@L["NewBank"].Value"></abp-modal-header>
        <abp-modal-body>
            <abp-input asp-for="@Model.Bank.Name"/>
<abp-input asp-for="@Model.Bank.Description"/>
<abp-input asp-for="@Model.Bank.Password"/>
<abp-input asp-for="@Model.Bank.IsActive"/>
            <div class="row">
                <div class="col">
                    Hello Col1
                </div>
                <div class="col">
                    Hello Col2
                </div>
                <p>My Form Content</p>
            </div>
        </abp-modal-body>
        <abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
    </abp-modal>
</form>