@ -12,166 +12,444 @@
</abp-style-bundle> </abp-style-bundle>
}}
@section scripts {
<abp-script-bundle>
@*<abp-script src="/libs/highlight.js/lib/highlight.js" />
<abp-script src="/Pages/Components/highlightCode.js" />*@
</abp-script-bundle>
}
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<h2>Dynamic Forms</h2><h2>Dynamic Forms</h2>
<h4># Dynamic Form Example</h4><h4>Dynamic Form Example</h4>
<div class="demo-with-code"><div class="demo-with-code">
<div class="demo-area"> <div class="demo-area">
<abp-dynamic-form abp-model="@Model.PersonInput" /> <abp-dynamic-form abp-model="@Model.MyDetailedModel" submit-button="true" />
<hr />
<h5>Posted Values:</h5>
<div>
Name: @Model.PersonInput.Name <br />
City: @Model.PersonInput.City <br />
Phone.Name: @Model.PersonInput.Phone.Name <br />
Phone.Number: @Model.PersonInput.Phone.Number <br />
Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd") <br />
Country: @Model.PersonInput.Country <br />
IsActive: @Model.PersonInput.IsActive <br />
</div>
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <abp-tabs>
<abp-dynamic-form abp-model="Model.PersonInput"/> <abp-tab title="Model Class">
</pre> <pre><code>
</div>public class DynamicFormsModel : PageModel
</div> {
[BindProperty]
public DetailedModel MyDetailedModel { get; set; }
<h4># Override an input Example</h4> 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"}
};
<div class="demo-with-code"> public void OnGet()
<div class="demo-area"> {
<abp-dynamic-form abp-model="@Model.PersonInput"> MyDetailedModel = new DetailedModel
<abp-input asp-for="@Model.PersonInput.Name" label="Overrided name" /> {
<abp-input asp-for="@Model.PersonInput.Phone.Number" label="Overrided number" /> Name = "John Surname",
<abp-button button-type="Primary" type="submit" text="submit" /> Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
</abp-dynamic-form> IsActive = true,
<hr /> Age = 65,
<h5>Posted Values:</h5> Day = DateTime.Now,
<div> MyCarType = CarType.Coupe,
Name: @Model.PersonInput.Name <br /> YourCarType = CarType.Sedan,
Surname: @Model.PersonInput.Surname <br /> Country = "RU",
City: @Model.PersonInput.City <br /> NeighborCountries = new List<string>() { "UK", "CA" }
Phone.Name: @Model.PersonInput.Phone.Name <br /> };
Phone.Number: @Model.PersonInput.Phone.Number <br /> }
Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd") <br />
Country: @Model.PersonInput.Country <br /> public class DetailedModel
IsActive: @Model.PersonInput.IsActive <br /> {
</div> [Required]
</div> [Display(Name = "Name")]
<div class="code-area"> public string Name { get; set; }
<pre>
<abp-dynamic-form abp-model="Model.PersonInput"> [TextArea(Rows = 4)]
<abp-input asp-for="Model.PersonInput.Name" label="Overrided name" /> [Display(Name = "Description")]
<abp-input asp-for="Model.PersonInput.Phone.Number" label="Overrided number" /> public string Description { get; set; }
<abp-button button-type="Primary" type="submit" text="submit" />
</abp-dynamic-form> [Required]
</pre> [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
}
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
<abp-dynamic-form abp-model="@Model.MyDetailedModel" submit-button="true" />
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
<form method="post" novalidate="novalidate">
<div class="form-group">
<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="John Surname" class="form-control ">
<span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Name" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<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="form-group">
<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="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="form-group">
<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="form-group">
<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-radio 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-radio 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-radio 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-radio 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="form-group">
<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="form-group">
<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="form-group">
<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>
</code></pre>
</abp-tab>
</abp-tabs>
</div> </div>
</div></div>
<h4># Form with Button Example</h4><h4>Order Attribute Example</h4>
<div class="demo-with-code"><div class="demo-with-code">
<div class="demo-area"> <div class="demo-area">
<abp-dynamic-form abp-model="@Model.PersonInput.Phone" submit-button="true" /> <abp-dynamic-form abp-model="@Model.MyOrderExampleModel"/>
<hr />
<h5>Posted Values:</h5>
<div>
Name: @Model.PersonInput.Name <br />
Surname: @Model.PersonInput.Surname <br />
City: @Model.PersonInput.City <br />
Phone.Name: @Model.PersonInput.Phone.Name <br />
Phone.Number: @Model.PersonInput.Phone.Number <br />
Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd") <br />
Country: @Model.PersonInput.Country <br />
IsActive: @Model.PersonInput.IsActive <br />
</div>
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <abp-tabs>
<abp-dynamic-form abp-model="Model.PersonInput" submit-button="true"/> <abp-tab title="Model Class" active="true">
</pre> <pre><code>
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; }
}
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper">
<pre><code>
<abp-dynamic-form abp-model="Model.MyOrderExampleModel"/>
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
<form method="post">
<div class="form-group">
<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="form-group">
<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="form-group">
<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="form-group">
<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>
</code></pre>
</abp-tab>
</abp-tabs>
</div> </div>
</div></div>
<h4># Non-dynamic Form </h4><h4>Attribute Examples </h4>
<div class="demo-with-code"><div class="demo-with-code">
<div class="demo-area"> <div class="demo-area">
<form method="post"> <abp-dynamic-form abp-model="@Model.MyAttributeExamplesModel"/>
<abp-input asp-for="@Model.PersonInput.Name" />
<abp-input asp-for="@Model.PersonInput.Surname" />
<abp-input asp-for="@Model.PersonInput.Age" />
<abp-input asp-for="@Model.PersonInput.IsActive" />
<abp-input asp-for="@Model.PersonInput.Day" />
<abp-select asp-for="@Model.PersonInput.City" />
<abp-radio asp-for="@Model.PersonInput.Country" />
<abp-input asp-for="@Model.PersonInput.Phone.Number" />
<abp-input asp-for="@Model.PersonInput.Phone.Name" />
<abp-button type="submit" button-type="Primary" text="Submit" />
</form>
<hr />
<h5>Posted Values:</h5>
<div>
Name: @Model.PersonInput.Name <br />
Surname: @Model.PersonInput.Surname <br />
Age: @Model.PersonInput.Age <br />
Is Active: @Model.PersonInput.IsActive <br />
Day: @Model.PersonInput.Day <br />
City: @Model.PersonInput.City <br />
Country: @Model.PersonInput.Country <br />
Phone.Number: @Model.PersonInput.Phone.Number <br />
Phone.Name: @Model.PersonInput.Phone.Name <br />
</div>
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <abp-tabs>
<abp-tab title="Model Class" active="true">
<pre><code>
public class DynamicFormsModel : PageModel
{
public AttributeExamplesModel MyAttributeExamplesModel { get; set; }
public void OnGet()
{
MyAttributeExamplesModel = new AttributeExamplesModel();
MyAttributeExamplesModel.DisabledInput = "Disabled Input";
MyAttributeExamplesModel.ReadonlyInput = "Readonly Input";
MyAttributeExamplesModel.ReadonlyPlainTextInput = "Readonly Plain Text 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; }
[ReadOnlyInput(PlainText = true)]
public string ReadonlyPlainTextInput { get; set; }
[FormControlSize(AbpFormControlSize.Large)]
public string LargeInput { get; set; }
[FormControlSize(AbpFormControlSize.Small)]
public string SmallInput { get; set; }
}
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper">
<pre><code>
<abp-dynamic-form abp-model="Model.MyAttributeExamplesModel"/>
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
<form method="post"><form method="post">
<abp-input asp-for="Model.PersonInput.Name" /> <div class="form-group">
<abp-input asp-for="Model.PersonInput.Surname" /><input type="hidden" id="MyAttributeExamplesModel_HiddenInput" name="MyAttributeExamplesModel.HiddenInput" value="" class="form-control ">
<abp-input asp-for="Model.PersonInput.Age" /> </div>
<abp-input asp-for="Model.PersonInput.IsActive" /> <div class="form-group">
<abp-input asp-for="Model.PersonInput.Day" /><label for="MyAttributeExamplesModel_DisabledInput">DisabledInput</label>
<abp-select asp-for="Model.PersonInput.City" /><input type="text" id="MyAttributeExamplesModel_DisabledInput" name="MyAttributeExamplesModel.DisabledInput" value="Disabled Input" disabled="" class="form-control ">
<abp-select asp-for="Model.PersonInput.Country" /><span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.DisabledInput" data-valmsg-replace="true"></span>
<abp-input asp-for="Model.PersonInput.Phone.Number" /> </div>
<abp-input asp-for="Model.PersonInput.Phone.Name" /> <div class="form-group">
<abp-button type="submit" button-type="Primary" text="Submit" /><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="form-group">
<label for="MyAttributeExamplesModel_ReadonlyPlainTextInput">ReadonlyPlainTextInput</label>
<input type="text" id="MyAttributeExamplesModel_ReadonlyPlainTextInput" name="MyAttributeExamplesModel.ReadonlyPlainTextInput" value="Readonly Plain Text Input" class="form-control-plaintext " readonly="">
<span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.ReadonlyPlainTextInput" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<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="form-group">
<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>
</pre></code></pre>
</abp-tab>
</abp-tabs>
</div> </div>
</div></div>
<h4># Form Content Placement </h4><h4>Form Content Placement</h4>
<div class="demo-with-code"><div class="demo-with-code">
<div class="demo-area"> <div class="demo-area">
<abp-dynamic-form abp-model="@Model.PersonInput"> <abp-dynamic-form abp-model="@Model.MyFormContentExampleModel">
<div>
First Div! <br />
---------
</div>
<abp-form-content /> <abp-form-content />
<abp-button button-type="Primary" type="submit" text="submit" />
<div>
--------- <br />
Second Div!
</div>
</abp-dynamic-form> </abp-dynamic-form>
<hr />
<h5>Posted Values:</h5>
<div>
Name: @Model.PersonInput.Name <br />
Name: @Model.PersonInput.Surname <br />
City: @Model.PersonInput.City <br />
Phone.Name: @Model.PersonInput.Phone.Name <br />
Phone.Number: @Model.PersonInput.Phone.Number <br />
Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd") <br />
Country: @Model.PersonInput.Country <br />
IsActive: @Model.PersonInput.IsActive <br />
</div>
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <abp-tabs>
<abp-dynamic-form abp-model="@Model.PersonInput"> <abp-tab title="Model Class">
<abp-form-content /> <pre><code>
<abp-button button-type="Primary" type="submit" text="submit" />public class DynamicFormsModel : PageModel
{
public FormContentExampleModel MyFormContentExampleModel { get; set; }
public void OnGet()
{
MyFormContentExampleModel = new FormContentExampleModel();
}
public class FormContentExampleModel
{
public string SampleInput { get; set; }
}
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
<abp-dynamic-form abp-model="@@Model.MyFormContentExampleModel">
<div>
First Div! <br />
---------
</div>
<abp-form-content />
<div>
--------- <br />
Second Div!
</div>
</abp-dynamic-form></abp-dynamic-form>
</pre></code></pre>
</div> </abp-tab>
</div> <abp-tab title="Rendered">
<pre><code>
<form method="post">
<div>
First Div! <br />
---------
</div>
<div>
<div class="form-group">
<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>
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
Yunus Emre Kalkan
8 years ago