主页 / coding / 问题 / 78607749
Accepted
3ddark
Asked: 2024-06-11 21:11:31 +0800 CST

ABP 框架在 Mvc Razor 上定制 Crud UI

  • 772

我是 Abp Framework 的新用户。Abp 自动执行许多操作。这很棒，对于大多数事务，您无需执行任何操作。

但是，如何才能实现如下所示的结构，而不破坏 UI 部分现有的规则、本地化和安全控制？

订单（客户、订单日期、货币、汇率、交货日期、备注...）、订单详情（库存代码、说明、价格、数量、折扣率...多行输入）

我设计一个复杂的 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 的示例设计？

user-interface

1 个回答

  1. Best Answer

    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>
    • 0

相关问题