Search code examples
javascriptasp.net-corerazorrazor-pagespartial-views

is it posible to use partialview with modal inside of another partialview and display the modal on the main page?


I am using a Partialview for displaying a table with data inside a normal razor page. I want to edit and first off all display a specific row of data with another partial view (Modal) When i am debuging my code, the Pagehandler is never called. site

Table partialview inside my razorpage:

     <div class="col-8 border-start border-bottom border-dark border-end pt-2">
        <div id="MyPartialView">
            @{
                await Html.RenderPartialAsync("_ArticlePositonsPartial", Model.TempPositionsView, ViewData);
             }
        </div>
    </div>

Table looks like this: enter image description here

Call of partialview inside the table partialview:

                     <td style="width:60px">
                        <div class="btn-group-vertical">
                            <button class="btn btn-outline-primary btn-sm" data-toggle="ajax-modal" data-url="@Url.Page("NewInvoice", "EditPositionPartial", @Model.TempPositions[i])"> <i class="fa-solid fa-pen-to-square"></i></button>
                            @Html.AntiForgeryToken()
                            <button class="btn btn-outline-danger btn-sm" onclick="GetPartialView(2,@Model.TempPositions[i].Id)"> <i class="fa-solid fa-trash-can"></i></button>
                        </div>
                    </td>

Pagehandler

      public async Task<PartialViewResult> OnPostEditPositionPartial(FaktTempPositionen f)
        {
            FaktTempPositionen faktTempPosition = await _TempArticlePositionRepository.GetPositionBySessionKeyAndId(f.SessionKey, f.Id);

            return new PartialViewResult
            {
                ViewName = "_EditPositionPartial",
                ViewData = new ViewDataDictionary<FaktTempPositionen>(ViewData, faktTempPosition),
            };
        }

Partialview i want to display

   @model Rechnungen.Models.Views.TempPositonsView
    <div class="modal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                   <h6>test</h6>
                </div>**
            <div class="modal-body">
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Schließen</button>
                <button type="button" class="btn btn-primary" data-save="modal">Speichern</button>
            </div>
        </div>
    </div>
</div>

JS vor modal:

enter image description here


Solution

  • Since you are using $.get,you should call a get handler:

     public async Task<PartialViewResult> OnGetEditPositionPartial(FaktTempPositionen f)
            {
                FaktTempPositionen faktTempPosition = await _TempArticlePositionRepository.GetPositionBySessionKeyAndId(f.SessionKey, f.Id);
    
                return new PartialViewResult
                {
                    ViewName = "_EditPositionPartial",
                    ViewData = new ViewDataDictionary<FaktTempPositionen>(ViewData, faktTempPosition),
                };
            }