ohno.morty ohno.morty - 8 months ago 46
ASP.NET (C#) Question

MVC for a single page?

I am not well-versed with MVC, although I have been reading up on plenty of its materials for the past days. Now, I need to make a web project that uses only one web page. The web page will display data from an existing database, as well as add and edit entries. I was told to use MVC. Although in my study, it appears to me that MVC is more appropriate for larger projects. How do I go about using MVC for my single-paged project? I was thinking something like dbcontext -> repository -> controllers -> models -> views. Would that be correct, or is there a more efficient way to do it?

If I were to not use MVC, what can I use?

EDIT: What would be the best approach in using MVC on a project with one page?

Answer Source

Yes You could. There are numerous approaches to this kind of task, I will name two of them.

MVC Approach

The MVC approach is as follows: You will have one controller that will contain all your input logic and action results.

For example:

 public class HomeController : Controller
 {
    public ActionResult index()
    {
       return view();
    }

    public ActionResult ContactUs()
    {
        return view();
    }

    public ActionResult About()
    {
        return view();
    }

}

Then you create a layout page and a view (or Partial view) For each action, then you route in the same controller, this way creating a single web page that is only changing content inside the layout.

The Pros:

  1. You contain all your logic inside one controller, thus create and easy to access code, as you know where all your input logic is.

  2. You can use razor to control your views through your models, allowing you to create custom controls designed for your needs and properties, making it easy to connect with your server for get/post requests.

The Cons

Your controller can grow bigger as the website grows, thus creating a code that is "hard-to-maintain". The more pages you add, the more logic will be added to the home controller making the code in the controller long, unreadable and very hard to maintain easily.

Angular Approach:

The angular approach states, that you will have one action in the controller for beginning - index (aka home page):

 public class HomeController : Controller
 {
    public ActionResult index()
    {
       return view();
    }
 }

You will then create a layout page and html pages to render inside it and then make your navigation with angular ui-router.

for example:

var myApp = angular.module('myApp', ["ngRoute"])
    .config(function ($routeProvider) {
        var baseUrl = $("base").first().attr("href");
        $routeProvider.when('/',
        {
            templateUrl: baseUrl + 'Html/Home.html',
            controller: 'myHomeCointroller'
        });
        $routeProvider.when('/About',
        {
            templateUrl: baseUrl + 'Html/About.html',
            controller: 'myAboutController'
        });

this way, you can make your navigation with angular 'location' dependency for example:

$location.path('/About');

Creating a layout page and a very easy to navigate system on this one layout page. The layout page will only change it's content according to each html content.

The Pros

You create a very flexible and easy to maintain application, that will not consume alot of input logic (controller code) and will be angular controller driven, thus creating a very easy way to fix your code in the future as well.

The Cons

You cannot use razor in html pages, thus will have to create alot of ajax calls to your server, which will probably require you to write a web api or WCF to connect with your server in order to get/post data.

Your logic will spread in numerous angular controllers instead of one place (for example, all logic in Home Controller), this might take time when dealing with little problems that need attention.

It is your choice to decide which approach to take regarding the MVC.

There are alot of ways to do this with other frameworks but then again, it will never end.

Focus on your task as they told you, learn the principle of each approach that I told you and good luck on your way.

Material to read about views:

Views and partial views in MVC

Material to read about angular ui-router:

Angular routing explanation

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download