Dynamic Forms

Dynamic Form Example

Describe Yourself

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, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                    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
        }
    }

<abp-dynamic-form abp-model="@Model.MyDetailedModel" submit-button="true" />

<form method="post" novalidate="novalidate">
    <div class="mb-3">
        <label for="MyDetailedModel_Name">Name</label>
        <input type="text" data-val="true" data-val-required="The Name field is required." id="MyDetailedModel_Name" name="MyDetailedModel.Name" value="" class="form-control " placeholder="Enter your name...">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Name" data-valmsg-replace="true"></span>
    </div>
    <div class="mb-3">
        <label for="MyDetailedModel_Description">Description</label>
        <textarea id="MyDetailedModel_Description" name="MyDetailedModel.Description" rows="4" class="form-control ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
        <span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Description" data-valmsg-replace="true"></span>
    </div>
    <div class="mb-3">
        <label for="MyDetailedModel_Password">Password</label>
        <input type="password" data-val="true" data-val-required="The Password field is required." id="MyDetailedModel_Password" name="MyDetailedModel.Password" class="form-control ">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Password" data-valmsg-replace="true"></span>
    </div>
    <div class="mb-3 form-check">
        <input type="checkbox" checked="checked" data-val="true" data-val-required="The Is Active field is required." id="MyDetailedModel_IsActive" name="MyDetailedModel.IsActive" value="true" class="form-check-input "><input name="MyDetailedModel.IsActive" type="hidden" value="false">
        <label class="form-check-label" for="MyDetailedModel_IsActive">Is Active</label>
    </div>
    <div class="mb-3">
        <label for="MyDetailedModel_Age">Age</label>
        <input type="number" data-val="true" data-val-required="The Age field is required." id="MyDetailedModel_Age" name="MyDetailedModel.Age" value="65" class="form-control ">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Age" data-valmsg-replace="true"></span>
    </div>
    <div class="mb-3">
        <label for="MyDetailedModel_MyCarType">My Car Type</label>
        <select data-val="true" data-val-required="The My Car Type field is required." id="MyDetailedModel_MyCarType" name="MyDetailedModel.MyCarType" class="form-control valid" aria-describedby="MyDetailedModel_MyCarType-error" aria-invalid="false">
            <option value="0">Sedan</option>
            <option value="1">Hatchback</option>
            <option value="2">StationWagon</option>
            <option selected="selected" value="3">Coupe</option>
        </select>
    </div>
    <div class="custom-control custom-control-inline">
        <input type="radio" id="MyDetailedModel.YourCarTypeRadio0" name="MyDetailedModel.YourCarType" value="0" checked="checked" class="custom-control-input">
        <label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio0">Sedan</label>
    </div>
    <div class="custom-control custom-control-inline">
        <input type="radio" id="MyDetailedModel.YourCarTypeRadio1" name="MyDetailedModel.YourCarType" value="1" class="custom-control-input">
        <label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio1">Hatchback</label>
    </div>
    <div class="custom-control custom-control-inline">
        <input type="radio" id="MyDetailedModel.YourCarTypeRadio2" name="MyDetailedModel.YourCarType" value="2" class="custom-control-input">
        <label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio2">StationWagon</label>
    </div>
    <div class="custom-control custom-control-inline">
        <input type="radio" id="MyDetailedModel.YourCarTypeRadio3" name="MyDetailedModel.YourCarType" value="3" class="custom-control-input">
        <label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio3">Coupe</label>
    </div>
    <div class="mb-3">
        <label for="MyDetailedModel_Day">Day</label>
        <input type="date" data-val="true" data-val-required="The Day field is required." id="MyDetailedModel_Day" name="MyDetailedModel.Day" value="2018-12-19" class="form-control ">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Day" data-valmsg-replace="true"></span>
    </div>
    <div class="mb-3">
        <label for="MyDetailedModel_Country">Country</label>
        <select id="MyDetailedModel_Country" name="MyDetailedModel.Country" class="form-control">
            <option value="CA">Canada</option>
            <option value="US">USA</option>
            <option value="UK">United Kingdom</option>
            <option selected="selected" value="RU">Russia</option>
        </select>
    </div>
    <div class="mb-3">
        <label for="MyDetailedModel_NeighborCountries">Neighbor Countries</label>
        <select id="MyDetailedModel_NeighborCountries" multiple="multiple" name="MyDetailedModel.NeighborCountries" class="form-control">
            <option selected="selected" value="CA">Canada</option>
            <option value="US">USA</option>
            <option selected="selected" value="UK">United Kingdom</option>
            <option value="RU">Russia</option>
        </select>
    </div>
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kbwu8pRBWJCh6KUtTDoAuTDS8evmWgc2dNZYWkzjZ1xFcA9ptyCgQBCTgA9NMoh_FXGRBDVunA7fx0TF1df1_OxaxerJvuWRCwFBhy8KbPcgXrVtmtSp6Z28gpFpO0Z1TSO1pdgdTwEXj43DBWq0Hc">
    <button type="submit" class="btn btn-primary" data-busy-text="Processing..."><span>Submit</span></button>
</form>

Order Attribute Example


public class DynamicFormsModel : PageModel
    {
        public OrderExampleModel MyOrderExampleModel { get; set; }

        public void OnGet()
        {
            MyOrderExampleModel = new OrderExampleModel();
        }

        public class OrderExampleModel
        {
            [DisplayOrder(10005)]
            public string Surname{ get; set; }

            //Default 10000
            public string EmailAddress { get; set; }

            [DisplayOrder(10003)]
            public string Name { get; set; }

            [DisplayOrder(9999)]
            public string City { get; set; }
        }
    }

    <abp-dynamic-form abp-model="Model.MyOrderExampleModel"/>

<form method="post">
    <div class="mb-3">
        <label for="MyOrderExampleModel_City">City</label>
        <input type="text" id="MyOrderExampleModel_City" name="MyOrderExampleModel.City" value="" class="form-control ">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyOrderExampleModel.City" data-valmsg-replace="true"></span>
    </div>
    <div class="mb-3">
        <label for="MyOrderExampleModel_EmailAddress">EmailAddress</label>
        <input type="text" id="MyOrderExampleModel_EmailAddress" name="MyOrderExampleModel.EmailAddress" value="" class="form-control ">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyOrderExampleModel.EmailAddress" data-valmsg-replace="true"></span>
    </div>
    <div class="mb-3">
        <label for="MyOrderExampleModel_Name">Name</label>
        <input type="text" id="MyOrderExampleModel_Name" name="MyOrderExampleModel.Name" value="" class="form-control ">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyOrderExampleModel.Name" data-valmsg-replace="true"></span>
    </div>
    <div class="mb-3">
        <label for="MyOrderExampleModel_Surname">Surname</label>
        <input type="text" id="MyOrderExampleModel_Surname" name="MyOrderExampleModel.Surname" value="" class="form-control ">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyOrderExampleModel.Surname" data-valmsg-replace="true"></span>
    </div>
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kbwu8pRBWJCh6KUtTDoAuQICDXiCEgWpOHc7uIzSQ2dKiezdDkWplt2D8XLsCX39Z8B_GnplHrAfZgZ5GkNZN-tkEgKlMtyjoWv9MADyYb2MmWw-LuW8wfUXI9YSza5lo_8P03Vff4NxmrV3boG0xQ">
</form>

Attribute Examples


public class DynamicFormsModel : PageModel
    {
        public AttributeExamplesModel MyAttributeExamplesModel { get; set; }

        public void OnGet()
        {
            MyAttributeExamplesModel = new AttributeExamplesModel();
            MyAttributeExamplesModel.DisabledInput = "Disabled Input";
            MyAttributeExamplesModel.ReadonlyInput = "Readonly Input";
            MyAttributeExamplesModel.LargeInput = "Large Input";
            MyAttributeExamplesModel.SmallInput = "Small Input";
        }

        public class AttributeExamplesModel
        {
            [HiddenInput]
            public string HiddenInput { get; set; }

            [DisabledInput]
            public string DisabledInput{ get; set; }

            [ReadOnlyInput]
            public string ReadonlyInput { get; set; }

            [FormControlSize(AbpFormControlSize.Large)]
            public string LargeInput { get; set; }

            [FormControlSize(AbpFormControlSize.Small)]
            public string SmallInput { get; set; }
        }
    }

    <abp-dynamic-form abp-model="Model.MyAttributeExamplesModel"/>

<form method="post">
    <div class="mb-3">
        <input type="hidden" id="MyAttributeExamplesModel_HiddenInput" name="MyAttributeExamplesModel.HiddenInput" value="" class="form-control ">
    </div>
    <div class="mb-3">
        <label for="MyAttributeExamplesModel_DisabledInput">DisabledInput</label>
        <input type="text" id="MyAttributeExamplesModel_DisabledInput" name="MyAttributeExamplesModel.DisabledInput" value="Disabled Input" disabled="" class="form-control ">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.DisabledInput" data-valmsg-replace="true"></span>
    </div>
    <div class="mb-3">
        <label for="MyAttributeExamplesModel_ReadonlyInput">ReadonlyInput</label>
        <input type="text" id="MyAttributeExamplesModel_ReadonlyInput" name="MyAttributeExamplesModel.ReadonlyInput" value="Readonly Input" class="form-control " readonly="">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.ReadonlyInput" data-valmsg-replace="true"></span>
    </div>
    <div class="mb-3">
        <label for="MyAttributeExamplesModel_LargeInput">LargeInput</label>
        <input type="text" id="MyAttributeExamplesModel_LargeInput" name="MyAttributeExamplesModel.LargeInput" value="Large Input" class="form-control form-control-lg">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.LargeInput" data-valmsg-replace="true"></span>
    </div>
    <div class="mb-3">
        <label for="MyAttributeExamplesModel_SmallInput">SmallInput</label>
        <input type="text" id="MyAttributeExamplesModel_SmallInput" name="MyAttributeExamplesModel.SmallInput" value="Small Input" class="form-control form-control-sm">
        <span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.SmallInput" data-valmsg-replace="true"></span>
    </div>
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kbwu8pRBWJCh6KUtTDoAuSUKLRRJ2JhujqxKEZfzYxIDYQtg1knqOh9zyG1DjaXRnoavm1876JtbePc4El_6aDqwMUKuXshQhXIunS_hrygXH5v-Tm6Qw_zL-JEJnSmd6Q4EwCtwDBwGX0in4-swG8">
</form>

Form Content Placement

First Div!
---------
---------
Second Div!

public class DynamicFormsModel : PageModel
    {
        public FormContentExampleModel MyFormContentExampleModel { get; set; }

        public void OnGet()
        {
            MyFormContentExampleModel = new FormContentExampleModel();
        }

        public class FormContentExampleModel
        {
            public string SampleInput { get; set; }
        }
    }

<abp-dynamic-form abp-model="@Model.MyFormContentExampleModel">
    <div>
        First Div!  <br />
        ---------
    </div>

    <abp-form-content />

    <div>
        ---------  <br />
        Second Div!
    </div>
</abp-dynamic-form>

<form method="post">
    <div>
        First Div!  <br />
        ---------
    </div>

    <div>
        <div class="mb-3">
            <label for="MyFormContentExampleModel_SampleInput">SampleInput</label>
            <input type="text" id="MyFormContentExampleModel_SampleInput" name="MyFormContentExampleModel.SampleInput" value="" class="form-control ">
            <span class="text-danger field-validation-valid" data-valmsg-for="MyFormContentExampleModel.SampleInput" data-valmsg-replace="true"></span>
        </div>
    </div>

    <div>
        ---------  <br />
        Second Div!
    </div>
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kbwu8pRBWJCh6KUtTDoAuS4l6PkkSnj6NFFQcJPBjnUn13wQKxp0lm1Dw84zvR-1QrE4byCemr2_qENxB-Ob_YEc6yw3bvQcqN6VQ0ZPN4Sv6DvX5okAWE52wRXmNcHlTliFOPdjLcKcv3qBFXXlVk">
</form>