abp/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml

@page
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
@model DynamicFormsModel

@{
     ViewData["Title"] = "Forms";
}

<h2>Dynamic Forms</h2>

<h4># Dynamic Form Example</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-dynamic-form abp-model="@Model.PersonInput"/>
        <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>
&lt;abp-dynamic-form abp-model=&quot;Model.PersonInput&quot; asp-antiforgery=&quot;true&quot;/&gt;
</pre>
    </div>
</div>

<h4># Override an input Example</h4>

<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>
&lt;abp-dynamic-form abp-model=&quot;Model.PersonInput&quot;&gt;
    &lt;abp-input asp-for=&quot;Model.PersonInput.Phone.Number&quot; label=&quot;Phone Number&quot; /&gt;
&lt;/abp-dynamic-form&gt;
</pre>
    </div>
</div>

<h4># Form with Button Example</h4>

<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 class="code-area">
        <pre>
&lt;abp-dynamic-form abp-model=&quot;Model.PersonInput&quot; submit-button=&quot;true&quot;/&gt;
</pre>
    </div>
</div>

<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 class="code-area">
        <pre>
&lt;form method=&quot;post&quot;&gt;
    &lt;abp-input asp-for=&quot;Model.PersonInput.Name&quot;/&gt;
    &lt;abp-input asp-for=&quot;Model.PersonInput.Country&quot; label=&quot;Where Do you live?&quot;/&gt;
    &lt;abp-input asp-for=&quot;Model.PersonInput.Phone.Number&quot;/&gt;
&lt;/form&gt;
</pre>
    </div>
</div>