Making an blog site using ASP.NET MVC

public class BlogPost
{
	public Guid Id { get; set; }
	public string Heading { get; set; }
	public string PageTitle { get; set; }
	public string Content { get; set; }
	public string ShortDescription { get; set; }
	public string FeatureImageIRL { get; set; }
	public string UrlHandle { get; set; }
	public DateTime PublishedDate { get; set; }
	public string Author { get; set; }
	public bool Visible { get; set; }
	
	// create many-to-many relationship between Blogpost table and Tag table
	public ICollection<Tag> Tags { get; set; }
}

public class Tag
{
  public Guid Id { get; set; }
  public string Name { get; set; }
  public string DisplayName { get; set; }
  
	// create many-to-many relationship between Tag table and Blogpost table
  public ICollection<BlogPost> BlogPosts { get; set; }
}

public string? Heading {get; set}

// BloggieDbContext Inherit from DbContext
public class BloggieDbContext : DbContext
{
  // Overwrite DbContextOptions with BloggieDbContext
  public BloggieDbContext(DbContextOptions<BloggieDbContext> options) : base(options)
  {
   
  }

  // BlogPost as DbSet
  public DbSet<BlogPost> BlogPosts { get; set; }
  public DbSet<Tag> Tags { get; set; }
}

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
  // our connection string
  "ConnectionStrings": {
    "BloggieDbConnectionString": "Data Source=macbookM5\\SQLEXPRESS;Initial Catalog=BloggieDb;Integrated Security=True;Connect Timeout=30;Encrypt=True;Trust Server Certificate=True;Application Intent=ReadWrite;Multi Subnet Failover=False"
  }
}

// Inject DbConext => (telling which server we're using)
builder.Services.AddDbContext<BloggieDbContext>(options =>
    // paste connection string name inside GetConnectionString()
    options.UseSqlServer(builder.Configuration.GetConnectionString("BloggieDbConnectionString")));

Add-Migration "Initial Migration"
Create tables using the Data set "DbSet<Models_name> DbSet_Name {get;set}" from the DbContext file 

Update
	Update all the table and column from Migration Folder to the Database (in the connection string)  

A class in C# is used to describe a model. Model objects store data 
retrieved from the database

<li class="nav-item dropdown">
	 <a class="nav-link dropdown-toggle text-light" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
		  Admin
	 </a>
	 <ul class="dropdown-menu">
		  <li><a class="dropdown-item" 
				asp-area="" 
				asp-controller="AdminTags"
				asp-action="Add">Add Tag</a>
			</li>
	 </ul>
</li>

public class AddTagRequest
{
  public string Name { get; set; } 
  public string DisplayName { get; set; }
}

@model MyBlog.Web.Models.ViewModels.AddTagRequest  

<div class="mb-3">
	<label class="form-label">Name</label>
	<input type="text" class="form-control" value="" id="name" asp-for="Name"/>
</div>

<div class="mb-3">
	<label class="form-label">Display Name</label>
	<input type="text" class="form-control" value="" id="displayName" asp-for="DisplayName"/>
</div>

[HttpGet]
public IActionResult Add()
{
	return View();
}

// POST: /AdminTags/Add
[HttpPost]
[ActionName("Add")] // if they're not the same Cs still recognized which Add to use (context: compare Add above and Add below)

public IActionResult Add(AddTagRequest addTagRequest)
{
	// Mapping AddTagRequest to Tag 
	var tag = new Tag
	{
		 Name = addTagRequest.Name,
		 DisplayName = addTagRequest.DisplayName,
	};

	 // get data from tag
	bloggieDbContext.Tags.Add(tag);
	// crucial to save changes
	bloggieDbContext.SaveChanges();

	return View("Add");
}

@model List<MyBlog.Web.Models.Domain.Tag> 

<!-- Store and View the List -->
<div class="container py-5">
    <!-- Get Table Datas existed a Model -->
    @if (Model != null && Model.Any())
    {
        <!--Boostrap table -->
        <table class= "table">
            
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Display Name</th>
                    <th>Actions</th>
                </tr>
            </thead>

            <tbody>
                <!-- Take the attributes of each Tag Object -->
                @foreach (var tag in Model)
                {
                    <tr>
                        <td>@tag.Id</td>
                        <td>@tag.Name</td>
                        <td>@tag.DisplayName</td>
                    </tr>
                }
            </tbody>
        </table>
    }
    else
    {
        <p>No tags found ! </p>
    }
</div>

// DISPLAY Functionality
[HttpGet]
// use to redirect user to the List view 
[ActionName("List")]
public IActionResult List()
{
	// get data from bloggieDbContext
	var tags = bloggieDbContext.Tags.ToList();

	// return data to view
	return View(tags);
}

<!-- Binding View to EditTagRequest Model -->
@model MyBlog.Web.Models.ViewModels.EditTagRequest
@{

}

<div class="bg-secondary bg-opacity-10 py-2">
    <div class="container">
        <!-- Keep Functionality Different for each Page-->
        <h1 class="display-4">Edit Function - Admin Functionality</h1>
    </div>
</div>

<div class="container py-5">
    <form method="post">
        <!-- Id -->
        <div class="mb-3">
            <label class="form-label">Id</label>
            <!-- asp-for Good send data to the Model and View the Data comming back from the DB ->
              <!-- readonly to prevent user from changing the value -->
            <input type="text" id="id" class="form-control" asp-for="Id" readonly/>
        </div>

        <!-- Name -->
        <div class="mb-3">
            <label class="form-label">Name (Use dashline between words like Potato-Peel)</label>
            <input type="text" id="id" class="form-control" asp-for="Name"/>
        </div>

        <!-- Display Name -->
        <div class="mb-3">
            <label class="form-label">Display Name</label>
            <input type="text" id="id" class="form-control" asp-for="DisplayName"/>
        </div>


        <!-- Update & Delete-->
        <div class="mb-3">
            <div class="d-flex">
                <button type="submit" class="btn btn-dark">Update</button>
            </div>
            
        </div>

    </form>
</div>

<!-- Take the attributes of each Tag Object -->
@foreach (var tag in Model)
{
  <tr>
		<td>@tag.Id</td>
		<td>@tag.Name</td>
		<td>@tag.DisplayName</td>
		
		<!-- Edit Record with Id -->
		<td>
			 <a asp-area="" 
			 asp-controller="AdminTags"
			 asp-action="Edit"
			 asp-route-id="@tag.Id">Edit</a>
		</td>
  </tr>
}

namespace MyBlog.Web.Models.ViewModels
{
    public class EditTagRequest
    {
        // Create new bc we want to seperate Edit Tag from the List Tag
        // Saving Edit Model data then transfer it to List Model
        public Guid Id { get; set; }
        public string Name { get; set; }
        public string DisplayName { get; set; }
    }
}

[HttpGet]
// Action Name is crucial bc it show What .cshtml file to render
[ActionName("Edit")]
// read Tag by id
public IActionResult Edit(Guid id)
{
	// 1st method 
	//var tag = bloggieDbContext.Tags.Find(id);
	
	// 2nd  method
	// Find tag by id and return the 1st one it found
	var tag = bloggieDbContext.Tags.FirstOrDefault(x => x.Id == id);  

	// Return EditTagRequest Model to the view if tag is not null
	if (tag != null)
	{
		 var editTagRequest = new EditTagRequest
		 {
			  Id = tag.Id,
			  Name = tag.Name,
			  DisplayName = tag.DisplayName
		 };

		 return View(editTagRequest);
	}

	return View(null);
}

[HttpPost]
// Action Name is crucial bc it show What .cshtml file to render
[ActionName("Edit")]
// notice: Tag.id != existingTag.id bc Tag.id is from EditTagRequest and existingTag.id is from bloggieDbContext
// Edit - replace the existing tag with new tag data, then save changes
public IActionResult Edit(EditTagRequest editTagRequest)
{
	// tag object - get tag from editTagRequest (data from Edit.cshtml)
	var tag = new Tag
	{
		 Id = editTagRequest.Id,
		 Name = editTagRequest.Name,
		 DisplayName = editTagRequest.DisplayName,
	};

	// existingTag object - get existing tag from bloggieDbContext (Data from Database) 
	var existingTag = bloggieDbContext.Tags.Find(tag.Id);
	
	// replace existing tag with new tag datas
	if (existingTag != null)
	{
		 existingTag.Name = tag.Name;
		 existingTag.DisplayName = tag.DisplayName;

		 // save changes
		 bloggieDbContext.SaveChanges();

		 // show success notification
		 TempData["SuccessMessage"] = "Tag updated successfully!";

		 return RedirectToAction("List", new { id = editTagRequest.Id });
	}

	// show fail notification
	return RedirectToAction("List", new { id = editTagRequest.Id });
}

return RedirectToAction("List", new { id = editTagRequest.Id });

await bloggieDbContext.Tags.AddAsync(tag);
await bloggieDbContext.SaveChangesAsync();

public async Task<Tag> AddAsync(Tag tag)
{
    // Want to talk to the Db
    await bloggieDbContext.Tags.AddAsync(tag);
    await bloggieDbContext.SaveChangesAsync();
    
    return tag;
}

[HttpPost]
public async Task<IActionResult> AddTag(AddTagRequest addTagRequest)
{
	var tag = new Tag
	{
		 Name = addTagRequest.Name,
		 DisplayName = addTagRequest.DisplayName,
	};

	await tagResponsitory.AddAsync(tag);
	return View("Add");
}

// Add tags to View 
[HttpGet]
public async Task<IActionResult> Add()
{
	return View(); 
}

<div class="bg-secondary bg-opacity-10 py-2">
    <div class="container">
        <h1 class="display-4">Admin Function</h1>
    </div>
</div>

public class AddBlogPostsRequest
{
  public string Heading { get; set; }
  public string PageTitle { get; set; }
  public string Content { get; set; }
  public string ShortDescription { get; set; }
  public string FeatureImageIRL { get; set; }
  public string UrlHandle { get; set; }
  public DateTime PublishedDate { get; set; }
  public string Author { get; set; }
  public bool Visible { get; set; }
  
  // Display Tags. Allow to Display tag in a Drop Down List
  public IEnumerable<SelectListItem> Tags { get; set; }
  // Collect Tags. Allow to Collect Tags from the Drop Down List
  public string SelectedTag { get; set; }
}   

@model MyBlog.Web.Models.ViewModels.AddBlogPostsRequest;
@{ }

<div class="bg-secondary bg-opacity-10 py-2">
    <div class="container">
        <h1 class="display-4">Admin Function</h1>
    </div>
</div>

<div class="container py-5">
    <form method="post">
        <div class="mb-3">
            <label class="form-label">
                Heading
            </label>    
            <input type="text" class="form-control" id="heading" asp-for="Heading"/>
        </div>
	
        <div class="mb-3">
            <label class="form-label">
                Page Title
            </label>
            <input type="text" class="form-control" id="pageTitle" asp-for="PageTitle"/>
        </div>
	
        <div class="mb-3">
            <label class="form-label">
                Content
            </label>
            <textarea class="form-control" id="content" asp-for="Content"> </textarea>
        </div>
	
        <div class="mb-3">
            <label class="form-label">
                Short Description
            </label>
            <input type="text" class="form-control" id="shortDescription" asp-for="ShortDescription" />
        </div>
	
        <div class="mb-3">
            <label class="form-label">
                FeatureImageIRL
            </label>
            <input type="text" class="form-control" id="featureImageIRL" asp-for="FeatureImageIRL" />
        </div>
	
        <div class="mb-3">
            <label class="form-label">
                URL Handle
            </label>
            <input type="text" class="form-control" id="urlHandle" asp-for="UrlHandle" />
        </div>
	
        <div class="mb-3">
            <label class="form-label">
                Published Date
            </label>
            <input type="date" class="form-control" id="publishedDate" asp-for="PublishedDate" />
        </div>
	
        <div class="mb-3">
            <label class="form-label">
                Author
            </label>
            <input type="text" class="form-control" id="author" asp-for="Author" />
        </div>
	
        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" id="visible" asp-for="Visible">
            <label class="form-check-label">
                Is Visible ?
            </label>
        </div>
	
        <!-- Display Tags -->
        <div class="mb-3">            
            <label class="form-label">Tags</label>   
            <!-- Dropdown -->
            <select class="form-select" 
            asp-items="@Model.Tags" 
            asp-for="SelectedTag"></select> 
        </div>
	
        <div class="mb-3">
            <button type="submit" class="btn btn-dark">
                Save
            </button>
        </div>
    </form>
</div>

private readonly ITagResponsitory tagResponsitory;

public AdminBlogPostsController(ITagResponsitory tagResponsitory)
{
	this.tagResponsitory = tagResponsitory;
}

// Add tags to View 
[HttpGet]
public async Task<IActionResult> Add()
{
// get tags from Db using function in repository
var tags = await tagResponsitory.GetAllAsync();

var model = new AddBlogPostsRequest
{
	 // Select from Tag Domain Model to Tags in AddBlogPostsRequest Model 
	 Tags = tags.Select(x => new SelectListItem { Text = x.Name, Value = x.Id.ToString() })
};

	// return Tags (list item of tag) to Add View
	return View(model); 
`}

// addBlogPostsRequest store input from Add View
[HttpPost]
public async Task<IActionResult> Add(AddBlogPostsRequest addBlogPostsRequest)
{
	// redirect to Add action above
	return RedirectToAction("Add");
}

<!-- Display Tags -->
<div class="mb-3">            
	<label class="form-label">Tags</label>   
	<select class="form-select" 
	asp-items="@Model.Tags" 
	asp-for="SelectedTag"></select> 
</div>

public interface IBlogPostRepository
{
  Task<IEnumerable<BlogPost>> GetAllAsync();
  Task<BlogPost> GetAsync(Guid id);
  Task<BlogPost> AddAsync(BlogPost blogPost);
  Task<BlogPost> UpdateAsync(BlogPost blogPost);
  Task<BlogPost> DeleteAsync(Guid id);
}

public class BlogPostRepository : IBlogPostRepository
{
	private readonly BloggieDbContext bloggieDbContext;
	
	// get all data from bloggieDbContext
	public BlogPostRepository(BloggieDbContext bloggieDbContext)
	{
	  this.bloggieDbContext = bloggieDbContext;
	}
	
	public async Task<BlogPost> AddAsync(BlogPost blogPost)
	{
	  // Take blogPost Object and add to BlogPosts table in Db
	  await bloggieDbContext.BlogPosts.AddAsync(blogPost);
	  // remember to Save changes
	  await bloggieDbContext.SaveChangesAsync();
	  
	  return blogPost;
	}
	
	public async Task<BlogPost> DeleteAsync(Guid id)
	{
	  throw new NotImplementedException();
	}
}

public class AdminBlogPostsController : Controller
{
  private readonly ITagRepository tagRepository;
  private readonly IBlogPostRepository blogPostRepository;

  public AdminBlogPostsController(
		ITagRepository tagRepository,
		IBlogPostRepository blogPostRepository)
  {
		this.tagRepository = tagRepository;
		this.blogPostRepository = blogPostRepository;

  }

// addBlogPostsRequest store input from Add View
[HttpPost]
public async Task<IActionResult> Add(AddBlogPostsRequest addBlogPostsRequest)
{
	// Map View Model to Domain Model
	// ? Get input from Add View and store in BlogPost
	var blog = new BlogPost
	{
		 Heading = addBlogPostsRequest.Heading,
		 PageTitle = addBlogPostsRequest.PageTitle,
		 Content = addBlogPostsRequest.Content,
		 ShortDescription = addBlogPostsRequest.ShortDescription,
		 FeatureImageIRL = addBlogPostsRequest.FeatureImageIRL,
		 UrlHandle = addBlogPostsRequest.UrlHandle,
		 PublishedDate = addBlogPostsRequest.PublishedDate,
		 Author = addBlogPostsRequest.Author,
		 Visible = addBlogPostsRequest.Visible,
	};

// Map Tags from selected tags
// ? Get selected tags from Add View and store in selectedTags
var selectedTags = new List<Tag>();
// Keep looping untill all selected tags are selected
foreach (var selectedTagId in addBlogPostsRequest.SelectedTags)
{
	
	 var selectedTagIdAsGuid = Guid.Parse(selectedTagId);
	 var existingTag = await tagRepository.GetByIdAsync(selectedTagIdAsGuid);

	 // Add existingTag tags to selectedTags List
	 if (existingTag != null)
	 {
		  selectedTags.Add(existingTag);
	 }

}

// Mapping tags back to domain model
// Save selectedTags to BlogPost Tags List Item attributes
blog.Tags = selectedTags;

// Add BlogPost to Db
await blogPostRepository.AddAsync(blog);

// Redirect to Add View
return RedirectToAction("Add");

<td>
	@foreach (var tag in blogPost.Tags)
	{
		<span class="badge badge-primary m-2">@tag.DisplayName</span>
	}
</td> 

<link href="../Froala/css/froala_editor.pkgd.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../Froala/js/froala_editor.pkgd.min.js"></script>

<link href='https://cdn.jsdelivr.net/npm/froala-editor@4.0.10/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' /><script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@4.0.10/js/froala_editor.pkgd.min.js'></script>

@section Scripts {
    <script>
        var editor = new FroalaEditor('#content');
    </script>
}

using CloudinaryDotNet;
      
Account account = new Account(
  "ddvgrzrie",
  "333314161181714",
  "0QyFH10nw-Xy9y9oEWx2kATMAG0");

Cloudinary cloudinary = new Cloudinary(account);

public interface IImageRepository
{
  // get and return the Image Url to the Cloud
  Task<string> UploadAsync(IFormFile file);
}

// Cloudinary settings
"Cloudinary": {
  "CloudName": "ddvgrzrie",
  "ApiKey": "333314161181714",
  "ApiSecret": "0QyFH10nw-Xy9y9oEWx2kATMAG0"
}

// handle dependency injection
builder.Services.AddScoped<IImageRepository, CloudinaryImageRepository>();

using CloudinaryDotNet;
using CloudinaryDotNet.Actions;


namespace MyBlog.Web.Repository
{
	public class CloudinaryImageRepository : IImageRepository
	{
	  private readonly IConfiguration configuration;
	  private readonly Account account;
	
	  // config connection to Cloudinary
	  public CloudinaryImageRepository(IConfiguration configuration)
	  {
			this.configuration = configuration;
			account = new Account(
				 configuration["Cloudinary:CloudName"],
				 configuration["Cloudinary:ApiKey"],
				 configuration["Cloudinary:ApiSecret"]);
	  }
	}

// Upload Image to Cloudinary and return the Image URL
public async Task<string> UploadAsync(IFormFile file)
{
	var client = new Cloudinary(account);

	// uploadParams - image name and file
	var uploadParams = new ImageUploadParams()
	{
		 File = new FileDescription(file.FileName, file.OpenReadStream()),
		 DisplayName = file.FileName,
	};

	var uploadResult = await client.UploadAsync(uploadParams);
	
	// return imageURL (uploadResult) as string after successfully Uploaded
	if (uploadResult != null && uploadResult.StatusCode == System.Net.HttpStatusCode.OK)
	{
		 return uploadResult.SecureUri.ToString();
	}
	else
	{
		 return null;
	}
}

[Route("api/[controller]")]
[ApiController]
public class ImagesController : ControllerBase
{
  // allow the ImageRepository to be used in the ImagesController
  private readonly IImageRepository imageRepository;

  // constructor for the ImageController
  public ImagesController(IImageRepository imageRepository)
  {
		this.imageRepository = imageRepository;
  }

  [HttpPost]
  public async Task<IActionResult> UploadAsync(IFormFile file)
  {
		// call imageRepository to upload the image
		var imageURL = await imageRepository.UploadAsync(file);
		
		// return error msg if null and reutrn the image URL if true
		if (imageURL == null)
		{
			 return Problem("Something went wrong", null, (int) HttpStatusCode.InternalServerError);
		}

		return new JsonResult(new { link = imageURL});
  }
  // use a Post command to post it to a Image Hosting Service
}

<div class="mb-3">
	 <!-- Upload Image -->
	 <label class="form-label">Featured Image Upload</label>
	 <input type="file" id="featuredImageUpload" class="form-control" />
	 <!-- set style to none so img would be invisible before it have the image Url form the API-->
	 <img src="" id="featuredImageDisplay" style="display:none; width="300px;" />
</div>

 Scripts Summary:
 FE: Uploaded Image Url save to Featured Image Url input
 BE: fetch our API endpoint 'api/images' and Upload it to CLoudinary API Library using POST method

 1) To automate the Upload and POST image process we first get the featuredUploadElement element
	 and featuredImageUrlElement to store images Url
 2) Then use EventListener to activte 'uploadFeaturedImage' function if
	 listen to any changes in featuredUploadElement
 3) uploadFeaturedImage will responsible for
	  + Get upload image info
	  + talking to the API to upload the image
			+ save image data as 'file' type
			+ fetch ours API endpoint '/api/images' and use POST method
	  + Send back the result to console to check if successed

@section Scripts {
    <script>
        // use Froala TextEditor format for #content element
        var editor = new FroalaEditor('#content');
        // get input image data in featuredUploadElement
        const featuredUploadElement = document.getElementById('featuredImageUpload');
        // save image Url in featuredImageUrlElement
        const featuredImageUrlElement = document.getElementById('featuredImageURL');
        // Display image with Url in featuredImageUrlElement
        const featuredImageDisplayElement = document.getElementById('featuredImageDisplay');

        // e - represent changes event triggered by the file input
        async function uploadFeaturedImage(e) {
            console.log(e.target.files[0]);

            // Save image data type file to data
            let data = new FormData();
            data.append('file', e.target.files[0]);

            // fetch API end point '/api/images' then upload image using POST method (like we did in Postman)
            await fetch('/api/images', {
                method: 'POST',
                headers: {
                    'Accept': '*/*',
                },
                body: data
                // listen to response and get result
            }).then(response => response.json())
                .then(result => {
                    // save Image link to featuredImageUrlElement
                    featuredImageUrlElement.value = result.link;
                    if (featuredImageUrlElement.value != null) {
                        // attach img Url from the API to featuredImageDisplayElement
                        featuredImageDisplayElement.src = featuredImageUrlElement.value;
                        // change Display style to Block to make it appear
                        featuredImageDisplayElement.style.display = "block";
                    }
                    console.log(result);
                });
        }

		 // Display Image if featuredImageUrlElement existed  
        if (featuredImageUrlElement.value != null) {
            // attach img Url from the API to featuredImageDisplayElement
            featuredImageDisplayElement.src = featuredImageUrlElement.value;
            // change Display style to Block to make it appear
            featuredImageDisplayElement.style.display = "block";
        }
        else{
            featuredImageDisplayElement.style.display = "none";
        }

        // When the value of the input changes (i.e., the user selects a file)
        // The uploadFeaturedImage function is automatically executed.
        featuredUploadElement.addEventListener('change', uploadFeaturedImage);
    </script>
}

     <div class="row align-items-center g-5 py-5">
         <!-- Blog Name and Title -->
         <div class="col-12 col-lg-6">
             <h1 action="display-5 fw-bold lh-1 mb-3">My Blog - SukmaBlog</h1>
             <p class="lead"> 
                 Freestyles Blogpost - Everything from Constroversal Topic 
                 to Lowkey Opinion and something A Slice of Life
             </p>
         </div>
         <div class="col-12 col-lg-6"></div>
     </div>

public Guid Id {* *get; set; }
public string Heading { get; set; }
public string PageTitle { get; set; }
public string Content { get; set; }
public string ShortDescription { get; set; }
public string FeaturedImageUrl { get; set; }
public string UrlHandle { get; set; }
public DateTime PublishedDate { get; set; }
public string Author { get; set; }
public bool Visible { get; set; }

// Navigation Property
public ICollection<Tag> Tags { get; set; }

<!-- BlogPosts Container -->
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            @if (Model != null && Model.Any())
            {
                foreach (var blogPost in Model)
                {
                    <article class="blog-post mb-5 card">
                        <div class="card-body">
                            <header class="blog-post-header">
                                <h1 class="blog-post-title display-6 mb-4">@blogPost.Heading</h1>
                                <div class="blog-post-meta text-muted d-flex justify-content-between">
                                    <span>@blogPost.PublishedDate.ToString("MMMM dd, yyyy")</span>
                                    <span>@blogPost.Author</span>
                                </div>
                            </header>


                            <div class="blog-post-content mt-4">
                                <p class="lead">@blogPost.ShortDescription</p>
                                <a href="/blog/@blogPost.UrlHandle" class="btn btn-primary">Read More</a>
                            </div>

                            <footer class="blog-post-footer mt-4">
                                @if (blogPost.Tags != null && blogPost.Tags.Any())
                                {
                                    <div class="blog-post-tags">
                                        @foreach (var tag in blogPost.Tags)
                                        {
                                            <a href="/blog/tag/@tag.Name" class="badge bg-secondary text-decoration-none">@tag.Name</a>
                                        }
                                    </div>
                                }
                            </footer>
                        </div>
                    </article>
                }
            }
        </div>
    </div>
</div>

<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      </div>
  </div>
</div>

<div class="blog-post-image">
  <img src="@blogPost.FeaturedImageUrl" alt="@blogPost.Heading" class="img-fluid" />
</div>

<header class="blog-post-header">
    <h1 class="blog-post-title display-6 mb-4">@blogPost.Heading</h1>
    <div class="blog-post-meta text-muted d-flex justify-content-between">
        <span>@blogPost.PublishedDate.ToString("MMMM dd, yyyy")</span>
        <span>@blogPost.Author</span>
    </div>
</header>

<div class="blog-post-image">
    <img src="@blogPost.FeaturedImageUrl" alt="@blogPost.Heading" class="img-fluid" />
</div>

<div class="blog-post-content mt-4">
    <p class="lead">@blogPost.ShortDescription</p>
    <a href="/blog/@blogPost.UrlHandle" class="btn btn-primary">Read More</a>
</div>

<article class="blog-post mb-5 card">
    <div class="card-body">
     <header class="blog-post-header">
       </header>

     <div class="blog-post-image">
         <img src="@blogPost.FeaturedImageUrl" alt="@blogPost.Heading" class="img-fluid" />
     </div>

     <div class="blog-post-content mt-4">
       <p class="lead">@blogPost.ShortDescription</p>
       <a href="/blog/@blogPost.UrlHandle" class="btn btn-primary">Read More</a>
     </div>
</article>

public class AuthDbContext : IdentityDbContext
{   
  public AuthDbContext(DbContextOptions<AuthDbContext> options) : base(options) {}

protected override void OnModelCreating(ModelBuilder builder)
{
    base.OnModelCreating(builder);

    // Seed Roles (User, Admin, SuperAdmin)
    var adminRoleId = "73a13894-0991-4aa4-81fa-cc7bd36fe248";
    var superAdminRoleId = "42d0062d-ff45-4aec-beb8-5f68fc8195a8";
    var userRoleId = "4499da9c-da78-4aa5-84f4-449857beeb33";

    var roles = new List<IdentityRole>
    {
        new IdentityRole
        {
            Name="Admin",
            NormalizedName="Admin",
            Id = adminRoleId,
            ConcurrencyStamp = adminRoleId,
        },

        new IdentityRole
        {
            Name="superAdmin",
            NormalizedName="superAdmin",
            Id = superAdminRoleId,
            ConcurrencyStamp = superAdminRoleId,
        },

        new IdentityRole
        {
            Name="User",
            NormalizedName="User",
            Id = userRoleId,
            ConcurrencyStamp = userRoleId,
        }

    };
    builder.Entity<IdentityRole>().HasData(roles);

        var superAdminId = "c3675926-f9cf-4afe-9bb9-343750eb1680";
        // Seed SuperAdmin User
        var superAdminUser = new IdentityUser
        {
            UserName = "superadmin@myblog.com",
            Email = "superadmin@myblog.com".ToUpper(),
            NormalizedUserName = "superadmin@myblog.com".ToUpper(),
            Id = superAdminId,
        };

        superAdminUser.PasswordHash = new PasswordHasher<IdentityUser>()
            .HashPassword(superAdminUser, "sukurmom");

        builder.Entity<IdentityUser>().HasData(superAdminUser);

        // Add all roles to SuperAdmin User (Admin, SuperAdmin, User)
        // IdentityUserRole need a Key of type <string>
        var superAdminRoles = new List<IdentityUserRole<string>>
        {
            new IdentityUserRole<string>
            {
                RoleId = adminRoleId,
                UserId = superAdminId,
            },

            new IdentityUserRole<string>
            {
                RoleId = superAdminRoleId,
                UserId = superAdminId,
            },

            new IdentityUserRole<string>
            {
                RoleId = userRoleId,
                UserId = superAdminId,
            },
        };

        builder.Entity<IdentityUserRole<string>>().HasData(superAdminRoles);
    }
}

"BloggieAuthDbConnectionString": "Data Source=macbookM5\\SQLEXPRESS;Initial Catalog=BloggieAuthDb;Integrated Security=True;Connect Timeout=30;Encrypt=True;Trust Server Certificate=True;Application Intent=ReadWrite;Multi Subnet Failover=False"

// Authentication DbContext
builder.Services.AddDbContext<AuthDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("BloggieAuthDbConnectionString")));

builder.Services.AddIdentity<IdentityUser, IdentityRole>()
    .AddEntityFrameworkStores<AuthDbContext>();

builder.Services.Configure<IdentityOptions>(options =>
{
    // Default settings password requirements
    options.Password.RequireDigit = true;
    options.Password.RequireLowercase = true;
    options.Password.RequireNonAlphanumeric = true;
    options.Password.RequireUppercase = true;
    options.Password.RequiredLength = 6; // at least 6 chars
    options.Password.RequiredUniqueChars = 1; 
});

// Allow to use Authentication
app.UseAuthentication();
app.UseAuthorization();

EntityFrameworkCore\Add-Migration "Name" -Context "DbContext_Name" 
EntityFrameworkCore\Update-Database -Context "DbContextName"

<div class="d-flex align-item-center">
  <!-- Check User signed In or Not -->
  @if (signInManager.IsSignedIn(User))
  {
		// Display the User Name if Logged In
		<div class="btn me-3 text-light">
			 @User?.Identity?.Name 
		</div>

		<a class="btn me-3 text-light"
			asp-area=""
			asp-controller="Account"
			asp-action="Logout">
			Logout
		</a>
  }
  else
  {
		<a class="btn me-3 bg-light text-dark"
			 asp-area=""
			 asp-controller="Account"
			 asp-action="Register">
			 Register
		</a>

		<a class="btn me-3 text-light"
			 asp-area=""
			 asp-controller="Account"
			 asp-action="Login">
			 Login
		</a>                        
  }
</div>

 public class AccountController : Controller
 {
		private readonly UserManager<IdentityUser> userManager;
		private readonly SignInManager<IdentityUser> signInManager;
		
		public AccountController(UserManager<IdentityUser> userManager,
			SignInManager<IdentityUser> signInManager)
		{
			this.userManager = userManager;
			this.signInManager = signInManager;
		}

	  [HttpGet]
	  public IActionResult Register() 
	  {
			return View();
	  }
	
	  // Create Post method for Register
	  [HttpPost]
	  public async Task<IActionResult> Register(RegisterViewModel registerViewModel)
	  {
			var identityUser = new IdentityUser
			{
				 UserName = registerViewModel.UserName,
				 Email = registerViewModel.Email,
			};
	
			// store the password. for privacy reasons
			// CreateAsync come from IdentityUser
			var identityResult = await userManager.CreateAsync(identityUser, registerViewModel.Password);
			if (identityResult.Succeeded)
			{
				 // Assign this user the "User" role (newly created user)
				 var roleIdentityResult = await userManager.AddToRoleAsync(identityUser, "User");
				 if (roleIdentityResult.Succeeded)
				 {
					  // Show success notification
					  return RedirectToAction("Register");
				 }
			}
	
			// Show error notification
			return View();
	  }
	
	  [HttpGet]
	  public IActionResult Login()
	  {
			return View();   
	  }
	
	
	  [HttpPost]
	  public async Task<IActionResult> Login(LoginViewModel loginViewModel)
	  {
	
			// check if the input password is the same as the password in Db
          if (loginViewModel.UserName != null && loginViewModel.Password != null)
          {
              var signInResult = await signInManager.PasswordSignInAsync(
                  loginViewModel.UserName, loginViewModel.Password, false, false);

	
				if (signInResult != null && signInResult.Succeeded)
				{
					 // Show success notification
					 return RedirectToAction("Index", "Home"); 
				}   
			}
			// Show error notification
			return View();
	  }
	
	  [HttpGet]
	  public async Task<IActionResult> Logout()
	  {
			// Applied Logout fuction from SignInManager
			await signInManager.SignOutAsync();
			return RedirectToAction("Index", "Home");
	  }
	}
}

 public class LoginViewModel
 {
	  public string UserName { get; set; }
	  public string Password { get; set; }
 }

 public class RegisterViewModel
 {
	  // 3 info: user, email, password
	  public string UserName { get; set; }
	  public string Email { get; set; }
	  public string Password { get; set; }
 }

@model MyBlog.Web.Models.ViewModels.LoginViewModel

<link rel="stylesheet" href="~/css/login.css" asp-append-version="true"/>
<script src="https://kit.fontawesome.com/122dcd2f11.js" crossorigin="anonymous"></script>

<section class="vh-100">
    <div class="container py-5 h-100">
        <div class="row d-flex align-items-center justify-content-center h-100">
            <div class="col-md-8 col-lg-7 col-xl-6">
                <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg"
                     class="img-fluid" alt="Phone image">
            </div>

            <div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
                <form method="post" class="justify-content-center">
                    <!-- Email input -->
                    <div class="form-outline mb-4">
                        <label class="form-label" for="form1Example13">User Name</label>
                        <input type="text" id="username" class="form-control" asp-for="UserName" />
                    </div>

                    <!-- Password input -->
                    <div class="form-outline mb-4">
                        <label class="form-label" for="form1Example23">Password</label>
                        <input type="password" id="password" class="form-control" asp-for="Password" />

                    </div>

                    <div class="d-flex justify-content-around align-items-center mb-4">
                        <!-- Checkbox -->
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
                            <label class="form-check-label" for="form1Example3"> Remember me </label>
                        </div>
                        <a href="#!">Forgot password?</a>
                    </div>

                    <!-- Submit button -->
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg btn-block" 
                        asp-area=""
                        asp-controller="Account"
                        asp-action="Login">Login</button>
                    </div>

                    <div class="divider d-flex align-items-center my-4">
                        <p class="text-center fw-bold mx-3 mb-0 text-muted">OR</p>
                    </div>

                    <div class="d-flex flex-row align-items-center justify-content-lg-center">
                        <button type="button" class="btn btn-primary btn-floating mx-1 px-3">
                            <i class="fab fa-facebook-f"></i>
                        </button>

                        <button type="button" class="btn btn-primary btn-floating mx-1">
                            <i class="fab fa-twitter"></i>
                        </button>

                        <button type="button" class="btn btn-primary btn-floating mx-1">
                            <i class="fa-brands fa-github"></i>
                        </button>
                    </div>

                </form>
            </div>

        </div>
    </div>

@model MyBlog.Web.Models.ViewModels.LoginViewModel

@{}

<link rel="stylesheet" href="~/css/login.css" asp-append-version="true"/>
<script src="https://kit.fontawesome.com/122dcd2f11.js" crossorigin="anonymous"></script>

<section class="vh-100">
    <div class="container py-5 h-100">
        <div class="row d-flex align-items-center justify-content-center h-100">
            <div class="col-md-8 col-lg-7 col-xl-6">
                <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg"
                     class="img-fluid" alt="Phone image">
            </div>

            <div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
                <form method="post" class="justify-content-center">
                    <!-- Email input -->
                    <div class="form-outline mb-4">
                        <label class="form-label" for="form1Example13">User Name</label>
                        <input type="text" id="username" class="form-control" asp-for="UserName" />
                    </div>

                    <!-- Password input -->
                    <div class="form-outline mb-4">
                        <label class="form-label" for="form1Example23">Password</label>
                        <input type="password" id="password" class="form-control" asp-for="Password" />

                    </div>

                    <div class="d-flex justify-content-around align-items-center mb-4">
                        <!-- Checkbox -->
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
                            <label class="form-check-label" for="form1Example3"> Remember me </label>
                        </div>
                        <a href="#!">Forgot password?</a>
                    </div>

                    <!-- Submit button -->
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg btn-block" 
                        asp-area=""
                        asp-controller="Account"
                        asp-action="Login">Login</button>
                    </div>

                    <div class="divider d-flex align-items-center my-4">
                        <p class="text-center fw-bold mx-3 mb-0 text-muted">OR</p>
                    </div>

                    <div class="d-flex flex-row align-items-center justify-content-lg-center">
                        <button type="button" class="btn btn-primary btn-floating mx-1 px-3">
                            <i class="fab fa-facebook-f"></i>
                        </button>

                        <button type="button" class="btn btn-primary btn-floating mx-1">
                            <i class="fab fa-twitter"></i>
                        </button>

                        <button type="button" class="btn btn-primary btn-floating mx-1">
                            <i class="fa-brands fa-github"></i>
                        </button>
                    </div>

                </form>
            </div>

        </div>
    </div>

[Authorize (Roles = "Admin")]
[HttpGet]
public IActionResult Add()
{
	return View();
}

[Authorize (Roles = "Admin")]
public class AdminTagsController : Controller {}

[Authorize(Roles = "Admin")]
public class AdminBlogPostsController : Controller {}

[HttpGet]
public IActionResult AccessDenied()
{
	return View();
}

<div class="container my-5">
    <h2> You not the Admin, Why are you Here? You Get... </h2>
    <img src="~/img/person-get-fuckin-deserve-love.png" class="d-block img-fluid mb-3" />
</div>

<!-- ReturnUrl save the Url Admin trying access -->
<!-- for this Url: https://localhost:7210/AdminTags/Add   
		 AdminTags/Add will be save to ReturnUrl -->
<input type="hidden" asp-for="ReturnUrl" />

[HttpGet]
public IActionResult Login(string ReturnUrl)
{
	// Create ReturnUrl to redirect user to the page they were trying to access
	// Ex: https://localhost:7210/AdminTags/Add -> /AdminTags/Add
	var model = new LoginViewModel
	{
		 ReturnUrl = ReturnUrl,
	};
	return View(model);   
}
	  
[HttpPost]
public async Task<IActionResult> Login(LoginViewModel loginViewModel)
{
  // check if the input password is the same as the password in Db
  if (loginViewModel.UserName != null && loginViewModel.Password != null)
  {
		var signInResult = await signInManager.PasswordSignInAsync(
			 loginViewModel.UserName, loginViewModel.Password, false, false);


		if (signInResult != null && signInResult.Succeeded)
		{
			 if (!string.IsNullOrWhiteSpace(loginViewModel.ReturnUrl))
			 {
				  return Redirect(loginViewModel.ReturnUrl);
			 }

			 // Show success notification
			 return RedirectToAction("Index", "Home");
		}
  }

  // Show error notification
  return View();
}

// POST is used to send data to a server to create/update a resource.
[HttpPost]
//[ActionName("Add")] // if they're not the same Cs still recognized which Add to use (context: compare Add above and Add below)
public IActionResult AddTag(AddTagRequest addTagRequest) {}

<form method="post" action="/AdminTags/AddTag">
	<button type="submit" class="btn btn-dark">Add Tag</button>
</form>

  [HttpPost]
[ActionName("Add")] // if they're not the same Cs still recognized which Add to use (context: compare Add above and Add below)
public IActionResult AddTag(AddTagRequest addTagRequest)
{
	// Mapping AddTagRequest to Tag to domain model
	var tag = new Tag
	{
		 Name = addTagRequest.Name,
		 DisplayName = addTagRequest.DisplayName,
	};

	// get data from tag
	bloggieDbContext.Tags.Add(tag);
	// save changes
	bloggieDbContext.SaveChanges();

	return View("Add");
}

<div class="container d-flex justify-content-around pl-0">
	<div class="mb-3">
		<label class="form-label">Name</label>
		<input type="text" class="form-control" name="Name" />
	</div>
	
	<div class="mb-3">
		<label class="form-label">Display Name</label>
		<input type="text" class="form-control" name="DisplayName" />
	</div>
	
	<form method="post" action="/AdminTags/AddTag">
		<button type="submit" class="btn btn-dark">Add Tag</button>
	</form>
	
	<form method="post" action="/AdminTags/SubmitTag
		<button type="submit" class="btn btn-dark">Update Tag</button>
	</form>
</div>

<div class="container d-flex justify-content-around pl-0">
  <form method="post" action="/AdminTags/AddTag">
		<div class="mb-3">
			 <label class="form-label">Name</label>
			 <input type="text" class="form-control" name="Name" />
		</div>
		<div class="mb-3">
			 <label class="form-label">Display Name</label>
			 <input type="text" class="form-control" name="DisplayName" />
		</div>
		<button type="submit" class="btn btn-dark">Add Tag</button>
  </form>

  <form method="post" action="/AdminTags/SubmitTag">
		<div class="mb-3">
			 <label class="form-label">Name</label>
			 <input type="text" class="form-control" name="Name" />
		</div>
		<div class="mb-3">
			 <label class="form-label">Display Name</label>
			 <input type="text" class="form-control" name="DisplayName" />
		</div>
		<button type="submit" class="btn btn-dark">Update Tag</button>
  </form>
</div>

<div class="container py-5">
    @if (Model != null)
    {
        <form method="post">
            <div class="mb-3">
                <label class="form-label">
                    Id
                </label>
                <input type="text" class="form-control" id="Id" asp-for="Id" readonly/>
            </div>


            <div class="mb-3">
                <label class="form-label">
                    Heading
                </label>
                <input type="text" class="form-control" id="heading" asp-for="Heading" />
            </div>
	
				..a..lot..of..code..
	}
	 else{
        <div>No Model Exist !</div>
    }
<div class="container py-5">

// Delete BlogPost by id
[HttpPost]
// Delete - remove tag from bloggieDbContext
public async Task<IActionResult> Delete(EditBlogPostRequest editBlogPostRequest)
{
	// use find for get existing tag
	// Talk to the repository
	var deletedBlogPost = await blogPostRepository.DeleteAsync(editBlogPostRequest.Id);
	if (deletedBlogPost != null)
	{
		 // Show success notification
		 return RedirectToAction("List");
	}
	// show fail notification
	TempData["ErrorMessage"] = "Failed to delete tag. Please try again.";

	return RedirectToAction("List", new { id = editBlogPostRequest.Id });
}

[HttpPost]
public async Task<IActionResult> UpdateHang(HangHoa hangHoa, int? Id)
{
	var httpClient = _httpClientFactory.CreateClient();
	Console.Write(hangHoa);
	// Serialize data appropriately for your API
	var content = new StringContent(JsonConvert.SerializeObject(hangHoa), Encoding.UTF8, "application/json");
	var response = await httpClient.PutAsync($"https://localhost:7116/api/Hang/UpdateHang{Id}", content);

	if (response.IsSuccessStatusCode)
	{
		 // Success! Redirect or display a success message
		 return RedirectToAction("Index");  // Example redirect
	}
	else
	{
		 // Handle the error
		 return View("Error"); // Example error handling
	}
}