4. ASP.NET MVC inner workings

4.1 Principles

4.2 View

4.3 Bootstrap

4.4 Controller

Time to put in practice all of that stuff you just learned. And I bet your fingers are itching to code.

4.5 It’s your turn to code: do-it-yourself

Now is your turn to grab the keyboard and code away. Oh, just let me explain you how that works, in case you’re not familiar with my Learn Collection books.

About exercises in this book

All of the exercises are linked together: you’re going to build a small e-commerce application. You’ll allow users to browse through your products, add them to their basket, then you’ll create a full back-end where the site administrators will be able to list, create, modify, and delete products.

In case you get stuck

You should be able to solve each exercise all by yourself. If you get stuck or don’t have a computer at hand (or you don’t have the prerequisites for that book, which is fine with me!), no problem. I’ll provide the solution for all of the exercises in this book, right after each of them.

4.6 Exercise - Create the application

I know, it’s basic, but you need to learn some more things before you can do more.

4.7 Exercise solution

• Open Visual Studio.
• Click on the File / New / Project… menu entry.
• In the New Project dialog, select the Installed tab on the left. Select Templates / Visual C# / Web on the left. In the center, select ASP.NET Core Web Application (.NET Core). At the bottom, type MyShop next to the Name: label. Click the OK button.
• In the New ASP.NET Core Web Application dialog, select Web Application under the ASP.NET Core 1.1 templates drop-down list. Click the Change Authentication button.
• In the Change Authentication dialog, select Individual User Accounts. Click the OK button.
• Back in the New ASP.NET Core Web Application dialog, click the OK button.
• In the Solution Explorer (on the right-hand side), open the Views folder, then the Home folder located underneath.
• Double-click the Index.cshtml file.
• Locate the following code:

<div id="myCarousel" ...>
  ...
</div>

<div class="row">
    <div class="col-md-3">
      ...
    </div>
</div>

• Replace that code with the following one :

<div class="col-md-3">
  <h2>Welcome</h2>
  <p>
    Using ASP.NET Core, we created a wonderful
    application that allows buying your
    favorite products
  </p>
</div>
<div class="col-md-3">
  <h2>Startup</h2>
  <p>
    New to the store? Give yourself a treat
    through the shop!
  </p>
</div>

• Click the Build / Build Solution menu.
• Run the application: click the Debug / Start Debugging menu.