Create an ASP.NET MVC Data-based Web App Pt 1 - Project Overview

15 April 2018 khambley ASP.NET MVC

I set out to create an ASP.NET MVC web application that allowed me to upload a photo and other details of my various fabrics to help organize them and track how much of it I have remaining in my stock. I figured I have all this computing power and tools at my disposal, why not use it to make my life easier. Isn't that why computers were invented? Or were they invented just to play games with? hehe, maybe. But, I digress...

I'm just kind of working through it myself to a) learn how to develop software, specifically with the .NET MVC framework and b) to actually build a real world application that makes my real world easier (and maybe someone else's too). Here is a basic features list. These are the necessary features I figured I would need to make the app functional:

  • A Home Page - of course, duh. Just a basic home page.
  • A Fabric Listing page - this is really the main guts of the app where the fabrics are displayed in a list.
    If you are logged in, you will see a link at the top "Create New" and links next to each listing, "Edit", "Delete" and "Detail. This will also display fabrics by category, such as "Sports / Baseball / Chicago Cubs" etc.
    A Search Fabrics text box will be on this page as well. With an AJAX backed HTML helper for search autocomplete and asynchronous searches.
  • A Fabric Detail View page - This will display a detailed view of a single fabric. If you are logged in, you will see an "Edit" link here as well.

Step 1: Create models (entities) in Models folder...

  • Right-click Models folder > Add > Class...

 

  • I added two Models: Fabric.cs and Purchase.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MyFabricStashApp.Models
{
    public class Fabric
    {
        public int FabricId { get; set; }
        public string MainCategory { get; set; }
        public string SubCategory1 { get; set; }
        public string SubCategory2 { get; set; }
        public string Name { get; set; }
        public string ImagePath { get; set; }
        public string Location { get; set; }
        public string Type { get; set; }
        public string Weight { get; set; }
        public string Content { get; set; }
        public string Design { get; set; }
        public int CurrentAmount { get; set; }
        public string Source { get; set; }
        public string Notes { get; set; }
        public List<string> Tags { get; set; }
        public ICollection<Purchase> Purchases { get; set; }

    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MyFabricStashApp.Models
{
    public class Purchase
    {
        public int PurchaseId { get; set; }
        public int FabricId { get; set; }
        public DateTime PurchaseDate { get; set; }
        public int PurchaseAmount { get; set; }
        public double PurchasePrice { get; set; }
    }
}

Step 2: Add a class to retrieve and manipulate the data, example, MyFabricStashDb.cs. This class derives from DbContext, so you will need a using statement in your code, "using System.Data.Entity". Then, add properties DbSet for each entity in your database. See code below for an example.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;

namespace MyFabricStashApp.Models
{
    public class MyFabricStashDb : DbContext
    {
        public DbSet<Fabric> Fabrics { get; set; }
        public DbSet<Purchase> Purchases { get; set; }

    }
}

Step 3: Build and Run the app. (Ctrl + F5). You won't see anything in the browser yet because we haven't "seeded" the database with data.

Step 4: To Display a list of Fabrics in the database, open "HomeController.cs" in the Controllers folder...

  • Instantiate the database. Add the following line of code right above the Index() action in the Home controller:
MyFabricStashDb _db = new MyFabricStashDb();
  • Then, add the following inside the Index() action of the Home controller:
var model = _db.Fabrics.ToList();
return View(model);
  • Since the database is a disposable resource, we need to add an override of the Dispose method to clean up any unmanaged resources. For more information on disposing, see the Microsoft article here. Go to the bottom of the Home controller and start typing "override Dispose" and a selection context list should pop up allowing you to select "Dispose(bool displosing)". Select that and VS will create the method stub for you. Type in the following lines of code inside the Dispose method:

protected override void Dispose(bool disposing)
        {
            if(_db != null)
            {
                _db.Dispose();
            }
            base.Dispose(disposing);
        }

Your entire HomeController.cs code should look like this:

using MyFabricStashApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyFabricStashApp.Controllers
{
    public class HomeController : Controller
    {
        MyFabricStashDb _db = new MyFabricStashDb();

        public ActionResult Index()
        {
            var model = _db.Fabrics.ToList();

            return View(model);
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
        protected override void Dispose(bool disposing)
        {
            if(_db != null)
            {
                _db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}
  • Now we need to add code to the View so it will display the list of Fabrics...
  • In the Views folder > Home > Index.cshtml file add the following at the very top of the file:
@model IEnumerable<MyFabricStashApp.Models.Fabric>
  • Replace "AppName.Models.ModelName" with your app and model names, respectively.
  • Then, add a foreach loop with html markup and razor code to display each item in the list. See the example below, I used the Media Object component in Bootstrap 3.3.7 to display a thumbnail image placeholder, the item Name, CurrentAmount, and Location from the model.
@foreach (var item in Model)
{
    <div class="media">
        <div class="media-left">
            <a href="#">
                <img class="media-object" 
                     src="https://placeholdit.co//i/150x150?&bg=ccc&fc=000&text=ImageThumbnail" alt="" />
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">@item.MainCategory / @item.SubCategory1 / @item.SubCategory2</h4>
            @item.Name<br />
            @item.CurrentAmount<br />
            @item.Location
        </div>
        <hr />
    </div>
}
  • Build and Run the App. Nothing shows up again in the browser because we need to set up localdb and add data to the database.

Step 5: Add Data Connection to the app. In VS 2017, click View > Server Explorer. Right-click on Data Connections > Add Connection > Select Microsoft SQL Server > Click Continue...

  • Type in Server Name text area: (localdb)\MSSQLLocalDB. Then, Select or enter a database name: Select "MyFabricStashApp.Models.MyFabricStashDb" or whatever your app and model names are. This is the database that the Entity Framework (EF) created for me automatically. I can tell that because it has the same name as my DbContext class, MyFabricStashDb.
  • Then, click "Test Connection". You should see a dialog box "Test connection succeeded"

  • Now that I am connected to the MyFabricStashDb database. I can examine what the Entity Framework automatically set up for me. In the Server Explorer, you will find your Data Connection, expand that and expand your Tables folder and note the columns that were created based on your Models. In my case, two tables were created called Fabrics and Purchases with the same column names as properties in my Model. Also, notice the Entity Framework was smart enough to determine the primary key and foreign keys.

 Now on to Part 2 where we will finish the Data Connection and enable Migrations,  Next->

Tags :

Add comment

Loading