Base solution for your next web application
Open Closed

Changing the CreateEdit Form to a non-modal form #6051

User avatar
0
jtallon created

Hi there,

I am using ASP.NETCORE and Augular.

When generating CreateEdit forms, how can I change a Create/Edit form to be normal form, not a model? Or even after it has been generated.

There may be al ot of fields, tables, tabs on a form, so Modal would not work all the time.

Regards

Go to accepted answer
6 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @jtallon

    I think you are talking about generating this form using RAD Tool. If so, RAD Tool doesn't support generating inline forms like you want.

    You can create a seperate component like list page component of your entity and move html and typescript code to this new page.

  • User Avatar
    0
    jtallon created

    Thanks.

    Is there plans to add that ability to the RAD tool, so that the developer can specify if the Create/Edit Form should be modal or inline?

    Regards John

  • User Avatar
    0
    exlnt created

    @jtallon - I have done this quite a lot in my AspNetZero app. I usually just take the Index.cshtml page and copy it and then replace all of the "content" section below the page heading and page heading info.

  • User Avatar
    0
    jtallon created

    Hi exlnt,

    For Angular, is there a page that you would recommend to copy from?

    Regards John

  • User Avatar
    0
    exlnt created

    @jtallon - I dont know Angular sorry. I only work on MVC JQuery project. However, I would assume it should be faily simple. Here is example cshtml markup from one of my "Edit" pages. Hope this helps?

    <div class="m-subheader" id="IndexView">
    <div class="row align-items-center">
        <div class="mr-auto col-sm-12 col-md-6">
            <h3 class="m-subheader__title m-subheader__title--separator">
                <span>@L("YourPageHeading")</span>
            </h3>
            <span class="m-section__sub">
                @L("YourPageHeaderInfo")
            </span>
        </div>
    </div>
</div>

<div class="m-content">
    <div class="m-portlet m-portlet--tabs m-portlet--primary m-portlet--head-solid-bg m-portlet--head-sm">
        <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <h3 class="m-portlet__head-text">
                        @Model.NameProperty
                    </h3>
                </div>
            </div>
            <div class="m-portlet__head-tools">
                <ul class="nav nav-tabs m-tabs m-tabs-line  m-tabs-line--right" role="tablist">
                    <li class="nav-item m-tabs__item">
                        <a class="nav-link m-tabs__link active show" data-toggle="tab" href="#tabDetails" role="tab" aria-selected="true">
                            Tab1
                        </a>
                    </li>
                    <li class="nav-item m-tabs__item">
                        <a class="nav-link m-tabs__link" data-toggle="tab" href="#tabAddress" role="tab" aria-selected="false">
                         Tab2
                        </a>
                    </li>
                    <li class="nav-item m-tabs__item">
                        <a class="nav-link m-tabs__link" data-toggle="tab" href="#tabContact" role="tab" aria-selected="false">
                         Tab3
                        </a>
                    </li>
                    <li class="nav-item m-tabs__item">
                        <a class="nav-link m-tabs__link" data-toggle="tab" href="#tabNotes" role="tab" aria-selected="false">
                         Tab4
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="m-portlet__body">
            <div class="tab-content">
                <div class="tab-pane active show" id="tabDetails" role="tabpanel">
			Tab1 content
                </div>
                <div class="tab-pane" id="tabAddress" role="tabpanel">
			Tab2 content
                </div>
                <div class="tab-pane" id="tabContact" role="tabpanel">
			Tab3 content
                </div>
                <div class="tab-pane" id="tabNotes" role="tabpanel">
			Tab4 content
                </div>
            </div>
        </div>
        <div class="m-portlet__foot">
            <div class="m-stack m-stack--ver m-stack--general">
                <div class="m-stack__item m-stack__item--center">
                    <a class="btn btn-outline-metal m-btn m-btn--icon m-btn--pill m-btn--air" href="@Url.Action("Index", "YourControllerName")">
                        <span>
                            <i class="fa fa-backward"></i>
                            <span>@L("GoBack")</span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
  • User Avatar
    0
    jtallon created

    @exlnt, thank you.

    I am new to Angular myself, so maybe if i knew more, it would be straight-foward for me. Thanks for the response.

Assignee
No one
Labels
Non yet