ASP.Net Core MVC - Validation Summary not working with bootstrap tabs and dynamically loaded content

SeeSharp2

How do you get dynamically loaded tabs to work in ASP.Net Core MVC? 1. I have a simple Index.cshtml that uses bootstrap tabs to create two tabs from the a tags on the page. (To test out options, I first copied from https://qawithexperts.com/article/asp.net/bootstrap-tabs-with-dynamic-content-loading-in-aspnet-mvc/176) 2. There is a click event on each tab that uses $.ajax() to call the controller and then set the html of the appropriate div. 3. I have a model with one field, a string that is required. 4. I have the create view that Visual Studio created. 5. When I run it and click the first tab, the controller returns PartialView("FirstTabCreate") and loads into the div and everything looks great. 6. The problem is when clicking the "Create" button. 7. The controller method checks if IsValid on the ModelState. If not, here is where I run into a problem. If I return the partial view and the model that was passed in I see my validation errors as expected but because I returned the partial view, I lose my tabs. If I return the main view (Index) then the javascript reloads my partial view and has lost the ModelState at that point. I am not sure what to return so that this works. I have seen lots of examples online that use dynamically loaded tabs but none of them have models or validation. Code below: Index Page

@model FirstTab

*           [Submission](#FirstTab)
    
*           [Search](#SecondTab)
    

$('#tabstrip a').click(function (e) {
    e.preventDefault();
    var tabID = $(this).attr("href").substr(1);
    $(".tab-pane").each(function () {
        console.log("clearing " + $(this).attr("id") + " tab");
        $(this).empty();
    });

    $.ajax({
        url: "/@ViewContext.RouteData.Values\["controller"\]/" + tabID,
        cache: false,
        type: "get",
        dataType: "html",
        success: function (result) {
            $("#" + tabID).html(result);
        }

    });
    $(this).tab('show');
});

$(document)</x-turndown>

Richard Deeming

The documentation suggests you need to parse the dynamic form to enable validation: Add Validation to Dynamic Forms | Model validation in ASP.NET Core MVC | Microsoft Docs[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

SeeSharp2

Thanks, this does work but it does not solve my issue. Doing this essentially causes the form validation to happen all client side and so my Controller method does not get called. One of the business requirements is to log validation errors in the database, which I was doing in the Controller method when ModelState was not valid. I'll look to see if there is a way to get all validation errors client side so that I can still log them in the db. It just seems like there should be an easier way to do tabs.

Richard Deeming

Client-side validation prevents a costly round-trip to the server, and reduces the number of times the server code has to run just to reject the request as invalid. If you log every single validation error, then unless you're very lucky with your users, I suspect you're going to end up with a "validation errors" database that grows by hundreds of gigabytes every day.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

SeeSharp2

Speed is an important part of this data entry app and so they want to know who keeps making the same mistakes over and over. For example, who keeps forgetting to fill in a phone number. This way they can train users to be more efficient. So, I get your point, but no, it won't be nearly that bad. We actually are replacing a Java based web app and the current table for validation errors is big, but not too big.