ASP Dot Net Scaffold a Controller and Views for CRUD Operations

continue from https://hashnotes.hashnode.dev/asp-dot-net-with-entityframeworkcore

Scaffold a Controller and Views for CRUD Operations

Now that your SQLite database is created and working, it's time to build the user interface for managing blog posts.

We'll scaffold:

• A controller (BlogController)

• Razor views for:

  • Listing all blog posts

  • Creating new ones

  • Viewing details

  • Editing and deleting

Step 1: Create the BlogController

Add the following codes to Controller/BlogControllers.cs:

using Microsoft.AspNetCore.Mvc;
using MyMvcApp.Data;
using MyMvcApp.Models;

namespace MyMvcApp.Controllers
{
    public class BlogController : Controller
    {
        private readonly AppDbContext _context;

        public BlogController(AppDbContext context)
        {
            _context = context;
        }

        // GET: /Blog
        public IActionResult Index()
        {
            var posts = _context.BlogPosts.ToList();
            return View(posts);
        }

        // GET: /Blog/Details/5
        public IActionResult Details(int? id)
        {
            if (id == null)
                return NotFound();

            var post = _context.BlogPosts.Find(id);
            if (post == null)
                return NotFound();

            return View(post);
        }

        // GET: /Blog/Create
        public IActionResult Create()
        {
            return View();
        }

        // POST: /Blog/Create
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Create(BlogPost post)
        {
            if (ModelState.IsValid)
            {
                _context.BlogPosts.Add(post);
                _context.SaveChanges();
                return RedirectToAction(nameof(Index));
            }
            return View(post);
        }

        // GET: /Blog/Edit/5
        public IActionResult Edit(int? id)
        {
            if (id == null)
                return NotFound();

            var post = _context.BlogPosts.Find(id);
            if (post == null)
                return NotFound();

            return View(post);
        }

        // POST: /Blog/Edit/5
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Edit(int id, BlogPost post)
        {
            if (id != post.Id)
                return NotFound();

            if (ModelState.IsValid)
            {
                _context.BlogPosts.Update(post);
                _context.SaveChanges();
                return RedirectToAction(nameof(Index));
            }
            return View(post);
        }

        // GET: /Blog/Delete/5
        public IActionResult Delete(int? id)
        {
            if (id == null)
                return NotFound();

            var post = _context.BlogPosts.Find(id);
            if (post == null)
                return NotFound();

            return View(post);
        }

        // POST: /Blog/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public IActionResult DeleteConfirmed(int id)
        {
            var post = _context.BlogPosts.Find(id);
            if (post != null)
            {
                _context.BlogPosts.Remove(post);
                _context.SaveChanges();
            }
            return RedirectToAction(nameof(Index));
        }
    }
}

Step 2: Create the Views Folder

mkdir -p Views/Blog

Step 3: Add Razor Views

Views/Blog/Index.cshtml

@model IEnumerable<MyMvcApp.Models.BlogPost>

@{
    ViewData["Title"] = "Blog Posts";
}

<h2>Blog Posts</h2>

<p>
    <a asp-action="Create">Create New</a>
</p>

<table class="table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Date</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Title</td>
                <td>@item.CreatedAt.ToShortDateString()</td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                    <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                    <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

Views/Blog/Create.cshtml

@model MyMvcApp.Models.BlogPost

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

<h2>Create New Blog Post</h2>

<form asp-action="Create">
    <div class="form-group">
        <label asp-for="Title"></label>
        <input asp-for="Title" class="form-control" />
        <span asp-validation-for="Title" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Content"></label>
        <textarea asp-for="Content" class="form-control" rows="5"></textarea>
        <span asp-validation-for="Content" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
</form>

Views/Blog/Edit.cshtml

@model MyMvcApp.Models.BlogPost

@{
    ViewData["Title"] = "Edit Post";
}

<h2>Edit Blog Post</h2>

<form asp-action="Edit">
    <input type="hidden" asp-for="Id" />
    <div class="form-group">
        <label asp-for="Title"></label>
        <input asp-for="Title" class="form-control" />
        <span asp-validation-for="Title" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Content"></label>
        <textarea asp-for="Content" class="form-control" rows="5"></textarea>
        <span asp-validation-for="Content" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">Update</button>
</form>

Views/Blog/Details.cshtml

@model MyMvcApp.Models.BlogPost

@{
    ViewData["Title"] = "Post Details";
}

<h2>@Model.Title</h2>

<div>
    <p><strong>Created:</strong> @Model.CreatedAt</p>
    <p>@Model.Content</p>
</div>

<p>
    <a asp-action="Edit" asp-route-id="@Model.Id">Edit</a> |
    <a asp-action="Index">Back to List</a>
</p>

Views/Blog/Delete.cshtml

@model MyMvcApp.Models.BlogPost

@{
    ViewData["Title"] = "Delete Post";
}

<h2>Are you sure you want to delete this?</h2>

<div>
    <h4>@Model.Title</h4>
    <p>@Model.Content</p>
</div>

<form asp-action="DeleteConfirmed" method="post">
    <input type="hidden" asp-for="Id" />
    <button type="submit" class="btn btn-danger">Delete</button>
    <a asp-action="Index" class="btn btn-secondary">Cancel</a>
</form>

Step 4: Run the Application

In the terminal, run:

dotnet watch run --urls=http://0.0.0.0:8080