I have an application with raw Javascript on the front-end built into an ASP.NET MVC application. I have decided to make it into a Single-Page Application, with the content being loaded using ASP.NET’s View Components. In order to achieve this, whenever the user requests the content I am making a Fetch call to the server side Home Controller’s method, which renders and returns the relevant View Component’s HTML. I am then simply parsing that HTML into a div container on the page, like in the example below:

        var viewComponent = await fetch(url, {
            credentials: 'include'
        });

        var viewComponentHtml = await viewComponent.text();
        $('#containerId').html(viewComponentHtml);

The HTML that is being rendered and returned from API calls is independent of any user input.

When I want to unload the view component and load another one, I simply drop the HTML in the div, like in the example below:

$('#containerId').html("");

I have done this to simplify object lifetime and binding/unbinding events to controls. I have quite a few different forms in the application with some complex events attached to controls.

I am wondering simply if this is an ok thing to do? I am worried if there are any implications of this that I haven’t considered as this seems to not be a standard practice. Does anyone know if this would cause any issues with performance/security?

I have considered the implications on security with a possible XSS vulnerability, but I really can’t see how this would be worse than simply loading the scripts on page load. Using developer tools on any page out there shows me that there is a network call being made to retrieve the static files on page load, which seems to be the same as what I am doing here, except I am doing it on demand via a fetch call.