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;/&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.Name" label="Overrided name" />
            <abp-input asp-for="@Model.PersonInput.Phone.Number" label="Overrided number" />
            <abp-button button-type="Primary" type="submit" text="submit" />
        </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.Name&quot; label=&quot;Overrided name&quot; /&gt;
    &lt;abp-input asp-for=&quot;Model.PersonInput.Phone.Number&quot; label=&quot;Overrided number&quot; /&gt;
    &lt;abp-button button-type=&quot;Primary&quot; type=&quot;submit&quot; text=&quot;submit&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.Phone" 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-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-select 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 />
            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 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.Age&quot; /&gt;
    &lt;abp-input asp-for=&quot;Model.PersonInput.IsActive&quot; /&gt;
    &lt;abp-input asp-for=&quot;Model.PersonInput.Day&quot; /&gt;
    &lt;abp-select asp-for=&quot;Model.PersonInput.City&quot; /&gt;
    &lt;abp-select asp-for=&quot;Model.PersonInput.Country&quot; /&gt;
    &lt;abp-input asp-for=&quot;Model.PersonInput.Phone.Number&quot; /&gt;
    &lt;abp-input asp-for=&quot;Model.PersonInput.Phone.Name&quot; /&gt;
    &lt;abp-button type=&quot;submit&quot; button-type=&quot;Primary&quot; text=&quot;Submit&quot; /&gt;
&lt;/form&gt;
</pre>
    </div>
</div>

<h4># Form Content Placement </h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-dynamic-form abp-model="@Model.PersonInput">
            <abp-form-content />
            <abp-button button-type="Primary" type="submit" text="submit" />
        </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-form-content /&gt;
     &lt;abp-button button-type=&quot;Primary&quot; type=&quot;submit&quot; text=&quot;submit&quot; /&gt;
&lt;/abp-dynamic-form&gt;
</pre>
    </div>
</div>