ASP.NET on OpenShift Part 4: Starting an MVC

Previous posts in this series:

Part 4 – Views: Starting an MVC on OpenShift

MVC stands for Model-View-Controller. We already went over controllers in the first two parts, and putting your project on OpenShift in part 3. Now, let’s finish things up by taking a look at models and views, and learning about Microsoft’s Razor framework.

Adding MVC & Razor to a Project

Building off of the projects in previous parts of this blog series, in the project.json file…

Add the following code under dependencies:

"Microsoft.AspNetCore.Razor.Tools": {
"version": "1.0.0-preview2-final",
"type": "build"
},
"Microsoft.AspNetCore.StaticFiles": "1.0.0",
"Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0"

Add the following code under tools:

"BundlerMinifier.Core": "2.0.238",
"Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",

And add the following code under scripts:

"prepublish": [ "bower install", "dotnet bundle" ],

Save the file, and you should see the project’s reference list restoring as the new packages are added.

Alternatively, if you were creating a new project, you could just select the Web Application template instead of the WebAPI one and all of this (and more) would be done for you.

Views

Views are HTML files the controller returns. When a user goes to a route, instead of receiving some plain text data, the user will receive a HTML file just like other web sites.

Create a new folder in your project called Views.

You should store your views as: View\Controller-Name\View-Name

Adding Your First View

Create a folder under Views called Cat. Then in that folder, add an HTML file named All.cshtml (yes, .cshtml).


The cats are: <ul> <li>bill</li> <li>steve</li> </ul>

Then inside of your old CatController.cs file, add:

[HttpGet("cat/all")]
public IActionResult All()
{
return View();
}

If you’re wondering how this is going to work when the Cat method is already grabbing everything after /cat/, it’s because an exact match of all will take priority.

Now run the code and point your browser to .../cat/all and it should return the HTML page.

This is great if you want a static HTML page, but what if you want something more dynamic?

Razor

Razor is Microsoft’s way of letting you write C# within an HTML file.

Let’s start out by doing the same thing, but on Horde controller.

Open HordeController.cs and add the following methods:

[HttpGet("horde/all")]
public IActionResult All()
{
return View();
}

public static string[] Cats()
{
return _Cats.Keys.ToArray();
}

In practice, you probably don’t want to have a method like Cats() in a controller.

Create a folder under Views called Horde. Then in that folder, add an HTML file named All.cshtml.


The cats are: <ul> <ul>@foreach (var cat in HordeController.Cats())</ul> </ul>   <ul> <ul>{ <li>@cat</li> </ul> </ul> }

Razor allows you to add C# into an HTML file by just prefixing an @. Personally, this seems much cleaner than how things used to be with ASPX files.

Now that you can run your project, head back to the All page to see the cats. But wait, where are they?!

You need to add them to the horde again through Postman like we did in part 2. Just do push requests using a program like Postman to .../horde/cat_name with the sound in the content body. After you add some cats, reload the page and you should now see them on the HTML list.

Deployment

Now that you have something new to show off, let’s deploy our changes to OpenShift. This is done in a few easy steps.

First, commit your changes and push them to GitHub so they’re safe in your repository. If you setup the optional web hook step in Part 3, then that’s all you need to do. OpenShift will automatically get your new code, build it, and deploy it to the internet!

If you didn’t setup the web hook, then all you need to do is build it again under the Builds area.

If you need to refresh yourself on any of the steps, head back over the Part 3 of this tutorial series.

Conclusion

Now that you know how Views work, you can create web pages through ASP.NET. Views may be powerful, but they are still limiting when you need to work with a lot of data. In the next part, I’ll be telling you about the final part of MVC: Models.

Now that you see how to make web sites and services with ASP.NET MVC and OpenShift, I hope you’ll continue doing so.

Go make some web sites and services on OpenShift, and be sure to share what you made!

Let us know in the comments about what other subjects you’d like to see on this blog in the future.

Categories
.NET, OpenShift Container Platform, OpenShift Dedicated, OpenShift Ecosystem, OpenShift Online, OpenShift Origin, Products, Technologies
Tags
, , , ,