ABP Framework настраивает пользовательский интерфейс Crud на Mvc Razor

Я новый пользователь Abp Framework. Abp выполняет многие операции автоматически. Это здорово, для большинства транзакций вам не нужно ничего делать.

Но как я могу реализовать структуру, подобную приведенной ниже, не нарушая существующие правила, локализацию и средства контроля безопасности в части пользовательского интерфейса?

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

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

Я проектирую сложный пользовательский интерфейс и обеспечиваю его плавную проверку и регистрацию на стороне базы данных.

<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, относительно этого?

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Другие вопросы по теме