Practical Tips for Learning ASP.NET Core MVC

You want to build applications using ASP.NET Core MVC

ASP.NET Core 2.0 has landed and every blog post, newsletter and Microsoft article seems to be talking about it.

Now seems like a good time to learn ASP.NET Core and you want/need to be able to build real business applications with it.

So you follow a few tutorials, spin up a new project and get coding, but then you grind to a halt.

Every time I jump out of the tutorials, I get stuck

The thing is, tutorials are great and really help to get you going with specific parts of ASP.NET Core, but when it comes to building real applications you find yourself having to piece together all those pesky moving parts and it’s difficult to even know where to begin.

Here then, is some practical advice on how to get up to speed and learn ASP.NET Core MVC; build lots of tiny features and learn as you go.

1. Make time to learn

It’s really difficult to try and learn an entirely new language/framework under pressure.

If you’re required to deliver working software for your day job, trying to learn ASP.NET Core at the same time might be heaping too much pressure on yourself.

There’s a lot to be gained from making time to focus purely on learning.

Pick a small pet project to go at and try to build it with the sole intention of learning as much as you can.

If you feel like you don’t have enough time to learn something new, take a look at your typical schedule for the week and work out what you could drop/sacrifice for a few weeks or so.

Identify one or two slots a week where you can commit at least 30 minutes to learning ASP.NET Core and you’ll be amazed how much you can learn, just spending an hour or two a week on it.

The trick is to set aside time, and stick to it.

2. Break your app down into small features

Whatever pet project you choose to build, make sure you keep those features small.

It pays to be specific.

Grandiose ideas for complex features with ill-defined requirements will likely result in you spending a lot of time on that one idea.

You’ll generally find you can learn a lot more by repeating the process and building a few different features from scratch.

3. Start with the user interface

The easiest place to start is displaying information on the screen so start with a feature that involves showing data then sketch out what that view looks like.

This sketch can be on a piece of paper, whiteboard or using something like Balsamiq Mockups, it doesn’t really matter…

However you do it and however tempting it is to skip this stage, have a visual for what you’re trying to build and you’ll find the next step much easier.

4. Keep it simple to start with

Do the least work necessary to get something on the screen, especially when you’re just starting a feature.

If it’s an hour or more since you hit CTRL+F5 to see how your app is shaping up then chances are you’ve missed a few opportunities to check your work, or you’ve gone “off on one” and built a load of architecture you don’t need yet (ask me how I know!)

Once you know what feature you’re building, create a controller that returns a View, create the View, add some text then run it to check everything works.

CustomerSummaryController.cs

public class CustomerSummaryController : Controller
{
    public IActionResult Get()
    {
        return View();
    }
}

Get.cshtml

@{
    ViewData["Title"] = "Create";
}

<h1>I should see this text</h2>

You can go a long way taking baby steps like this (and it means your assumptions never go unchallenged for very long).

5. Create view models that map directly to your views

View models are classes, which you populate with the data you want to display in your app (using views).

If you’ve sketched out a minimal UI for your tiny feature then your first ViewModel will be fairly minimal too.

public class CustomerSummary {
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
}

Stick to creating properties for the values you need to display on this specific page.

If you don’t need a property for the customer’s gender don’t be tempted to add it “just in case”; you can always add properties later.

Also, avoid any temptation to re-use these ViewModels elsewhere in your application.

Keep to one ViewModel per View and you’ll find it much easier to make changes that avoid breaking something else in a distant corner of your application.

6. Start off with hardcoded data

There’s plenty to learn about ASP.NET Core without throwing ORMs into the mix too.

That’s not to say you won’t need to learn about ORMs at some point (e.g. Entity Framework) or micro-ORMS (think Dapper) but they come with their own nuances and complexity which you can avoid whilst you’re picking up the ASP.NET Core fundamentals.

So, feel free to start simple and put something like this in your controller…

public class CustomerSummaryController : Controller {

    public IActionResult Get(){

        var summaryViewModel = new CustomerSummary {
            FirstName = "Jon",
            LastName = "Hilton",
            Age = 21 // what, what's funny? ;-)
        };

        return View(summaryViewModel);
    }

}

Yes we’re ignoring key software principles like separation of concerns and this won’t do for “real” applications, but it’s more than good enough to keep you focused on learning how ASP.NET MVC’s routing works, or how to use Tag Helpers in your views…

7. You can take the mystery out of routing by using attributes

You have two primary options for handling routing in your ASP.NET Core MVC apps.

You can define general rules which apply to all requests coming in to your app.

This is typically done in startup.cs and new apps tend to start with this default…

routes.MapRoute(
    name: "default",
    template: "{controller=Home}/{action=Index}/{id?}");

This is essentially <controller>/<action>/<id>.

So, if you wanted to call the ForCustomer action on a CustomerSummary controller, specifically for a customer with an id of 6, you could make this request…

However, if you want to see exactly which URLs will trigger your controller actions when you're looking at them, without diving off to **startup.cs**, you can opt to use attributes in your controllers instead.

csharp [Route(“customer”)] public class CustomerSummaryController : Controller { [Route(“summary/{id}”)] public IActionResult Get(int id) { var summaryViewModel = new CustomerSummary { FirstName = “Jon”, LastName = “Hilton”, Age = 21 // what, what’s funny? 😉 };

    return View(summaryViewModel);
}

}

Now our request for customer with id ```6``` would need to go to...

http:///customer/summary/6 “`

This is quite useful when you’re trying to learn ASP.NET Core MVC as you can easily fiddle with the URLs and see what you get in the browser.

8. Cheat if your front-end design skills are like mine

If you want to learn ASP.NET Core and front-end design is not your thing, don’t sweat it.

Before you lose hours trying to position your content exactly where you want it, just bring in a CSS framework like Bootstrap or (my personal favourite right now) Materialize and let it do the heavy lifting for you.

Alternatively don’t even bother with a framework (after all, they tend to come with their own learning curve) and just let the ugly UI live as it is.

Remember, your aim is to learn ASP.NET Core, not to make your web app look super sexy using fancy animations and responsive enough to run on every device known to man!

In Conclusion

You absolutely can learn ASP.NET Core MVC if you take the pressure off yourself and dedicate time to learning it.

Take small features and build them, using baby steps. Keep the complexity to a minimum; do the least work possible to get something on the screen and you’ll be amazed how quickly key concepts start to make sense.

Before you know it you’ll have built entire applications, one step at a time.