Asp Net, MVC design patterns

Question

Good afternoon,

I'm currently developing in ASP.NET using the MVC 5 framework, and I have SPA applications.

I want to migrate or unify my SPA applications into a single project. The project will have charts, reports, forms, and approximately 20 pages. I'd like to integrate a design pattern, but I don't know which one to use or what you recommend for a large application.

I'd appreciate any comments or examples that might help me with what I want to do.

Note:

I use jQuery and JS for my apps. I don't use React or Angular.

Answer 1

To build a SPA you need a couple technologies.

• A routing component, so your SPA app can navigate between pages. You will need to pick a jquery routing component. jquery is not as popular as it once was for SPA, so many of the components are old. You might do better googling for a vanilla js library.
• a template engine to be able to dynamically display your html. There are a lot of these.
• a build tool chain that supports js modules. You will need to build your 20 pages into one via bundling. Webpack is the classic, but rollup or parcel may be a good choice.

note: I use react and parcel, so can not recommend a jquery only solution. As a first step you might pick a build chain and convert all your JavaScript code to modules. This will make sharing easier.

Answer 2

Hi @intel intel,

I suggest you could consider using the MVVM/MVP pattern, you could design your client project, you could build a model(data), views(UI) and some logic to build your client projects.

var ReportViewer = (function () {
    // Model (data)
    var reportData = [];

    // View (DOM manipulation)
    function render() {
        $("#reportContainer").html(/* generate HTML from reportData */);
    }

    // Logic to get the data
    function fetchData() {
        $.get("/api/reports", function (data) {
            reportData = data;
            render();
        });
    }

    return {
        init: fetchData
    };
})();

// Initialize module on page load
$(document).ready(ReportViewer.init);

Also you could use the some plugins to show the data and validate the input data, like chat.js and Jquery validation.