Converting Create/Edit Modal to Page

In this document we will explain how to convert BookStore's Books create & edit modals to regular razor pages.





Index page

Repalce abp-button(NewBookButton) buttom with <a class="btn btn-primary" href="/Books/CreateModal"><i class="fa fa-plus"></i> @L["NewBook"].Value</a>.

Index js file

Remove the related codes of createModal and editModal.

Change the Edit row action with location.href = "/Books/EditModal?id=" +;

Create/Edit Book page

Remove Layout = null; and add some custom style and javascript code to CreateModal.cshtml & EditModal.cshtml.

@section styles {
        .abp-view-modal .modal {
                position: static;
                display: block;
                opacity: inherit !important;
        .abp-view-modal .modal.fade .modal-dialog {
            transition: inherit !important;
            transform: inherit !important;;
        .abp-view-modal .modal-header .btn-close {
            display: none;
@section scripts {
        $(".abp-view-modal form").abpAjaxForm().on('abp-ajax-success', function () {
            location.href = "/Books";

Add a div element with abp-view-modal class to wrap the abp-dynamic-form, Set size of abp-modal to ExtraLarge and remove the AbpModalButtons.Cancel button from abp-modal-footer.


<div class="abp-view-modal">
    <abp-dynamic-form abp-model="Book" asp-page="/Books/CreateModal">
        <abp-modal static="true" size="ExtraLarge">
            <abp-modal-header title="@L["NewBook"].Value"></abp-modal-header>
                <abp-form-content />
            <abp-modal-footer buttons="@(AbpModalButtons.Save)"></abp-modal-footer>


<div class="abp-view-modal">
    <abp-dynamic-form abp-model="Book" asp-page="/Books/EditModal">
        <abp-modal size="ExtraLarge">
            <abp-modal-header title="@L["Update"].Value"></abp-modal-header>
                <abp-form-content />
            <abp-modal-footer buttons="@(AbpModalButtons.Save)"></abp-modal-footer>

You can check this Git commit for details.

Engincan VESKE 7 weeks ago

Great article !

Berkan Sasmaz 7 weeks ago

Great article!

Buckoge 7 weeks ago

Great article. Thanks :)

[email protected] 6 weeks ago

That was exactly the question I asked myself today! It would be great to have an example for Angular too.

Best! Alex

Alper Ebicoglu 6 weeks ago

thank you

abpVAndy 5 weeks ago

Please add example for Angular!

kevin.kuo 5 weeks ago

Great article! this is very useful.

Onur Pıçakcı 4 weeks ago

Great article!

Enis Necipoğlu 2 hours ago