|
|
|
@ -8,13 +8,11 @@ |
|
|
|
|
|
|
|
<h2>Dynamic Forms</h2> |
|
|
|
|
|
|
|
<h4># Example</h4> |
|
|
|
<h4># Dynamic Form Example</h4> |
|
|
|
|
|
|
|
<div class="demo-with-code"> |
|
|
|
<div class="demo-area"> |
|
|
|
@*<abp-dynamic-form abp-model="@Model.PersonInput" asp-antiforgery="true" asp-controller="Demo" asp-action="Register"> |
|
|
|
<abp-input asp-for="@Model.PersonInput.Phone.Number" label="Phone Number" /> |
|
|
|
</abp-dynamic-form> |
|
|
|
<abp-dynamic-form abp-model="@Model.PersonInput"/> |
|
|
|
<hr /> |
|
|
|
<h5>Posted Values:</h5> |
|
|
|
<div> |
|
|
|
@ -25,119 +23,93 @@ |
|
|
|
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"> |
|
|
|
<pre> |
|
|
|
<abp-dynamic-form abp-model="Model.PersonInput" asp-antiforgery="true"/> |
|
|
|
</pre> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h4># Override an input Example</h4> |
|
|
|
|
|
|
|
<form asp-antiforgery="true" asp-controller="Demo" asp-action="Register"> |
|
|
|
<abp-input asp-for="@Model.PersonInput.Phone.Number" label="Phone Number NO ABP-DYNAMİC-FORM" /> |
|
|
|
<abp-input asp-for="@Model.PersonInput.Name" label="Name NO ABP-DYNAMİC-FORM" /> |
|
|
|
</form> |
|
|
|
<div class="demo-with-code"> |
|
|
|
<div class="demo-area"> |
|
|
|
<abp-dynamic-form abp-model="@Model.PersonInput"> |
|
|
|
<abp-input asp-for="@Model.PersonInput.Phone.Number" label="Phone Number" /> |
|
|
|
</abp-dynamic-form> |
|
|
|
<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 class="code-area"> |
|
|
|
<pre> |
|
|
|
<abp-dynamic-form asp-model="Model.PersonInput" > |
|
|
|
<abp-dynamic-form abp-model="Model.PersonInput"> |
|
|
|
<abp-input asp-for="Model.PersonInput.Phone.Number" label="Phone Number" /> |
|
|
|
</abp-dynamic-form> |
|
|
|
</pre> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h4># Form with Button Example</h4> |
|
|
|
|
|
|
|
@*<h4># Input Group Example</h4> |
|
|
|
|
|
|
|
<div class="demo-with-code"> |
|
|
|
<div class="demo-area"> |
|
|
|
<form method="post" action="#"> |
|
|
|
<abp-input asp-for="@Model.Name" /> |
|
|
|
<abp-input asp-for="@Model.Password" label="Password" /> |
|
|
|
<abp-input asp-for="@Model.IsActive" /> |
|
|
|
<abp-input asp-for="@Model.PhoneNumber" /> |
|
|
|
<abp-input asp-for="@Model.EmailAddress" /> |
|
|
|
<abp-input asp-for="@Model.Count" /> |
|
|
|
<abp-input asp-for="@Model.Day" /> |
|
|
|
<abp-select asp-for="@Model.Country" asp-items="@Model.Countries" label="Country"></abp-select> |
|
|
|
<abp-select asp-for="@Model.City" asp-items="@Html.GetEnumSelectList(typeof(Cities))"></abp-select> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
<div class="code-area"> |
|
|
|
<pre> |
|
|
|
<form method="post" action="#"> |
|
|
|
<abp-input asp-for="Model.Name"/> |
|
|
|
<abp-input asp-for="Model.Password" label="Password"/> |
|
|
|
<abp-input asp-for="Model.IsActive" /> |
|
|
|
<abp-input asp-for="Model.PhoneNumber" /> |
|
|
|
<abp-input asp-for="Model.EmailAddress" /> |
|
|
|
<abp-input asp-for="Model.Count" /> |
|
|
|
<abp-input asp-for="Model.Day" /> |
|
|
|
<abp-select asp-for="Model.Country" asp-items="Model.Countries" label="Country"></abp-select> |
|
|
|
<abp-select asp-for="Model.City" asp-items="Html.GetEnumSelectList(typeof(Cities))"></abp-select> |
|
|
|
</form> |
|
|
|
</pre> |
|
|
|
<div class="demo-with-code"> |
|
|
|
<div class="demo-area"> |
|
|
|
<abp-dynamic-form abp-model="@Model.PersonInput" 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"> |
|
|
|
<pre> |
|
|
|
<abp-dynamic-form abp-model="Model.PersonInput" submit-button="true"/> |
|
|
|
</pre> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@*<div class="demo-with-code"> |
|
|
|
<div class="demo-area"> |
|
|
|
<form method="post" action="#"> |
|
|
|
<abp-form-group> |
|
|
|
<abp-select asp-for="@Model.Country" asp-items="@Model.Countries"></abp-select> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-select asp-for="@Model.City" asp-items="@Html.GetEnumSelectList(typeof(Cities))"></abp-select> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.Name" /> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.Password" /> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.PhoneNumber" /> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.EmailAddress" /> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.Count" /> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.Day" /> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.IsActive" /> |
|
|
|
</abp-form-group> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
<div class="code-area"> |
|
|
|
<pre> |
|
|
|
<form method="post" action="#"> |
|
|
|
<abp-form-group> |
|
|
|
<abp-select asp-for="@Model.Country" asp-items="@Model.Countries"></abp-select> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-select asp-for="@Model.City" asp-items="@Html.GetEnumSelectList(typeof(Cities))"></abp-select> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.Name" /> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.Password" /> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.PhoneNumber" /> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.EmailAddress" /> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.Count" /> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.Day" /> |
|
|
|
</abp-form-group> |
|
|
|
<abp-form-group> |
|
|
|
<abp-input asp-for="@Model.IsActive" /> |
|
|
|
</abp-form-group> |
|
|
|
</form> |
|
|
|
</pre> |
|
|
|
<h4># Non-dynamic Form </h4> |
|
|
|
|
|
|
|
<div class="demo-with-code"> |
|
|
|
<div class="demo-area"> |
|
|
|
<form method="post"> |
|
|
|
<abp-input asp-for="@Model.PersonInput.Name"/> |
|
|
|
<abp-select asp-for="@Model.PersonInput.Country" label="Where Do you live?"/> |
|
|
|
<abp-input asp-for="@Model.PersonInput.Phone.Number"/> |
|
|
|
</form> |
|
|
|
<hr /> |
|
|
|
<h5>Posted Values:</h5> |
|
|
|
<div> |
|
|
|
Name: @Model.PersonInput.Name <br /> |
|
|
|
Country: @Model.PersonInput.Country <br /> |
|
|
|
Phone.Number: @Model.PersonInput.Phone.Number <br /> |
|
|
|
</div> |
|
|
|
</div>*@ |
|
|
|
</div> |
|
|
|
<div class="code-area"> |
|
|
|
<pre> |
|
|
|
<form method="post"> |
|
|
|
<abp-input asp-for="Model.PersonInput.Name"/> |
|
|
|
<abp-input asp-for="Model.PersonInput.Country" label="Where Do you live?"/> |
|
|
|
<abp-input asp-for="Model.PersonInput.Phone.Number"/> |
|
|
|
</form> |
|
|
|
</pre> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|