View component in modal window #9072

geoteam created 4 years ago

Hello, I'm having trouble embedding a view component into a Modal Insert/Edit form. Is it possible that this does not work? I have tried to analyze the error, but the only thing that is displayed: POST http://localhost:62114/App/Addresses/CreateOrEditAddressModal 500 (Internal Server Error) in app-layout-libs.min.js:10320

_CreateOrEditAddressModal.cshtml:

@using Zero.Addresses
@using Zero.Web.Areas.App.Models.Common.Modals
@using Zero.Web.Areas.App.Views.Shared.Components.AppModalRegTable

@model Zero.Web.Areas.App.Models.Addresses.CreateOrEditAddressModalViewModel
@await Html.PartialAsync("\~/Areas/App/Views/Common/Modals/\_ModalHeader.cshtml", new ModalHeaderViewModel(Model.IsEditMode ? (L("EditAddress") + ": " + Model.AddressPersonCompany.PersonCompanyNameCompany) : L("CreateNewAddress")))

<div class="modal-body">
    <form role="form" novalidate class="form-validation kt-form">
        .
        .
        .
     </form>
    @await Html.PartialAsync("~/Areas/App/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")
</div>
<div class="modalForm__RegisterTablePartial">
    @await Component.InvokeAsync(typeof(AppModalRegisterTableViewComponent), new { registerTable = "Title" })
</div>

Default.cshtml (for testing) of Viewcomponent

@model TreasureMap.Web.Areas.App.Models.RegisterTable.RegisterTableViewModel
<div></div>

AppModalRegisterTableViewComponent:

public class AppModalRegisterTableViewComponent : ZeroMapViewComponent
    {      
        public AppModalRegisterTableViewComponent()
        {
            
        }

        public IViewComponentResult Invoke(string registerTable)
        {
            var regTableModel = new RegisterTableViewModel
            {
                DisplayName = string.Empty,
                TableName = string.Empty
            };

            return View(regTableModel);
        }        
    }

Comment out the line @await Component.Invoke... then modal window is shown. At another place (in the menu bar) I also have a ViewComponent. There it works.

2 Answer(s)