Início / coding / Perguntas / 78607749
Accepted
3ddark
Asked: 2024-06-11 21:11:31 +0800 CST

ABP Framework Costumize Crud UI no Mvc Razor

  • 772

Sou um novo usuário do Abp Framework. Abp executa muitas operações automaticamente. Isso é ótimo, você não precisa fazer nada para a maioria das transações.

Mas como posso implementar uma estrutura como a abaixo sem quebrar as regras, localização e controles de segurança existentes na parte UI?

Pedido (Cliente, Data do Pedido, Moeda, Taxa de Câmbio, Data de Entrega, Notas...), Detalhes do Pedido (StockCode, Explicação, Preço, Quantidade, Taxa de Desconto,... entrada multilinha)

Eu projeto uma UI complexa e garanto sua validação e registro contínuos no lado do banco de dados.

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

A estrutura existente é intervencionada com o código acima. Mas como alterar os controles de tamanho e largura do formulário ou ajustar a localização?

Como posso criar um design de exemplo como Order OrderDetails em relação a isso?

user-interface

1 respostas

  1. Best Answer

    https://docs.abp.io/en/abp/latest/UI/AspNetCore/Tag-Helpers/Dynamic-Forms você pode personalizá-lo como aqui.

    Exemplo:

    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
    }
}

    Ou você pode moldá-lo como quiser, em vez de torná-lo dinâmico, usando o auxiliar de tag em https://docs.abp.io/en/abp/latest/UI/AspNetCore/Tag-Helpers/Form-elements .

    Exemplo:

    <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

relate perguntas