Nested view in .net core Abp application

Bineesh Viswanath

I am looking for display a parent child view in boilerplate application. but not able to find solution. Click event not displaying the row below. 404 error is coming in console

here is the parent page looks like

my requirment is to show a row below to the clicked row. I am using javascript code to trigger click and show the page.

var currentOpenedDetailRow;

_$queuesTable.on('click', '.View_Invoice', function () {
var tr = $(this).closest('tr');
var row = dataTable.row(tr);
openDetailRow(this, abp.appPath+ "Shared/QueueTicketPartial/_QueueTicketsComponent" + row.data().queue.id);
});

I have created a Partial view page to display row below to the clicked row. And the partial view page cshtml page code is listed below

@page
@using Microsoft.AspNetCore.Authorization
@using QueuingSystem.Pages.Shared.QueueTicketPartial
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@using QueuingSystem.Permissions
@using QueuingSystem.Web.Pages.Tickets
@using QueuingSystem.Menus
@using Microsoft.AspNetCore.Mvc.Localization
@using QueuingSystem.Localization
@inject IHtmlLocalizer L
@inject IAuthorizationService Authorization
@model QueueTicketsViewComponent

@{
Layout = null;
}

	@L["Actions"]	@L["Invoice"]	@L["InvoiceNo"]	@L["ClearanceStatus"]	@L["ProcessTime"]	@L["Edition"]	@L["TotalWithoutTax"]	@L["TaxPerc"]	@L["TaxValue"]	@L["TotalAmount"]	@L["Status"]

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bineesh Viswanath2y ago
Dear Namish,

I have tried as per your suggestion. All code side seems ok. but not working as per requirement
+1
Naimish Makwana2y ago
It looks like you’re trying to display a child row below a clicked parent row in a DataTable, but you’re encountering a 404 error when trying to load the partial view. Here are a few steps to troubleshoot and resolve this issue:
1. Check the URL: Ensure that the URL you’re passing to the $.get function is correct. It should match the route defined in your ASP.NET Core application.
2. Verify the Partial View Path: Make sure the path to your partial view is correct. The URL should point to the correct location of the _QueueTicketsComponent partial view.
3. Inspect the Network Request: Use the browser’s developer tools to inspect the network request. Check the exact URL being requested and ensure it matches the expected path. Look for any typos or incorrect segments in the URL.
4. Check Server-Side Routing: Ensure that your server-side routing is correctly set up to handle the request for the partial view. Verify that the controller action or Razor Page exists and is correctly configured to return the partial view.
5. Error Handling: Add error handling to your JavaScript code to log any errors that occur during the $.get request. This can help you identify if there are any issues with the request itself.
Here’s an updated version of your JavaScript code with added error handling:
```
var currentOpenedDetailRow;

function openDetailRow(e, url) {
    var tr = $(e).closest('tr');
    var row = dataTable.row(tr);
    if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
        currentOpenedDetailRow = null;
    } else {
        if (currentOpenedDetailRow)
            currentOpenedDetailRow.child.hide();
        $.get(url).then((data) => {
            row.child(data).show();
            tr.addClass('shown');
            currentOpenedDetailRow = row;
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Error loading detail row:", textStatus, errorThrown);
        });
    }
}

_$queuesTable.on('click', '.View_Invoice', function () {
    var tr = $(this).closest('tr');
    var row = dataTable.row(tr);
    openDetailRow(this, abp.appPath + "Shared/QueueTicketPartial/_QueueTicketsComponent" + row.data().queue.id);
});
```
By adding the .fail method, you can log any errors that occur during the AJAX request, which can help you diagnose the issue.

Thanks
+1