[ASP.Net Core] Select박스 구현하기 - DropDownList 대분류,중분류 카테고리 [下]

[ASP.Net Core] Select박스 구현하기 - DropDownList 대분류,중분류 카테고리 [上]

[ASP.Net Core] Select박스 구현하기 - DropDownList 대분류,중분류 카테고리 [上]

상편에 이어서 Select 박스 구현내용을 이어 나가도록 하겠다.

 

잠깐 결과화면이다.

 

 

 

아래의 SubCategoriesController.cs  상에서 핵심 소스부분은 

 

30라인 ViewBag.category = new SelectList(_context.Categories,"Id","Title");

Select 기본형태

 

59라인 ViewBag.category = new SelectList(_context.Categories, "Id", "Title",subCategory.CategoryId);

Select 기본형태에 다가  DB에서 불러온 기존 선택된 된값을 반영한다. 세번째 파라미터 (선택된  대분류 CategoryId 값)

 

그리고, 실제 View 에서는 

 

<select asp-for="CategoryId" class="form-control" asp-items="@ViewBag.category">
    <option>Select Category</option>
</select>

 

형태로 나타내면 된다.

 

https://learn.microsoft.com/ko-kr/dotnet/api/microsoft.aspnetcore.mvc.rendering.selectlist.-ctor?view=aspnetcore-6.0 

SelectList 생성자 (Microsoft.AspNetCore.Mvc.Rendering)

 

[ /Areas/Admin/Controllers/SubCategoriesController.cs ] 

using FastFood.Models;
using FastFood.Repository;
using FastFood.Web.ViewModels;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
 
namespace FastFood.Web.Areas.Admin.Controllers
{
    [Area("Admin")]
    public class SubCategoriesController : Controller
    {
        private readonly ApplicationDbContext _context;
        public SubCategoriesController(ApplicationDbContext context)
        {
            _context = context;
        }
 
        [HttpGet]
        public IActionResult Index()
        {
            var subCategory = _context.SubCategories.Include(x=>x.Category).ToList();
            return View(subCategory);
        }
 
        [HttpGet]
        public IActionResult Create()
        {
            SubCategoryViewModel vm = new SubCategoryViewModel();
            ViewBag.category = new SelectList(_context.Categories,"Id","Title");
 
            return View(vm);
        }
 
        [HttpPost]
        public IActionResult Create(SubCategoryViewModel vm)
        {
            SubCategory model = new SubCategory();
            if (ModelState.IsValid)
            {
                model.Title = vm.Title;
                model.CategoryId = vm.CategoryId;
                _context.SubCategories.Add(model);
                _context.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(vm);
        }
 
        [HttpGet]
        public IActionResult Edit(int id)
        {
            SubCategoryViewModel vm = new SubCategoryViewModel();
            var subCategory = _context.SubCategories.Where(x=>x.Id==id).FirstOrDefault();
            if (subCategory != null)
            {
                vm.Id = subCategory.Id;
                vm.Title = subCategory.Title;
                ViewBag.category = new SelectList(_context.Categories, "Id", "Title",subCategory.CategoryId);
/*
                var sel = from cate in _context.Categories select new SelectListItem
                {
                    Text = Convert.ToString(cate.Id),
                    Value = Convert.ToString(cate.Title),
                    Selected = int.Equals(cate.Id, subCategory.CategoryId)
                };
                //var selList = new SelectList(sel);
                ViewBag.category = sel;
*/
            }
            vm.CategoryId = subCategory.CategoryId;
            return View(vm);
        }
 
        [HttpPost]
        public IActionResult Edit(SubCategoryViewModel vm)
        {
            SubCategory model = new SubCategory();
            if (ModelState.IsValid)
            {
                model.Title = vm.Title;
                model.CategoryId = vm.CategoryId;
                _context.SubCategories.Update(model);
                _context.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(vm);
        }
 
        [HttpGet]
        public IActionResult Delete(int id)
        {
            SubCategoryViewModel vm = new SubCategoryViewModel();
            var subCategory = _context.SubCategories.Where(x => x.Id == id).FirstOrDefault();
            if (subCategory != null)
            {
                _context.SubCategories.Remove(subCategory);
                _context.SaveChanges();
            }
            return RedirectToAction("Index");
        }
    }
}
 

 

[ /Areas/Admin/Views/SubCategories/Create.cshtml ]  

@model FastFood.Web.ViewModels.SubCategoryViewModel
 
@{
    ViewData["Title"] = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<h1>Create</h1>
 
<h4>SubCategoryViewModel</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Title" class="control-label"></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="CategoryId" class="control-label"></label>
                <select asp-for="CategoryId" class="form-control" asp-items="@ViewBag.category">
                    <option>Select Category</option>
                </select>
                <span asp-validation-for="CategoryId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
 
<div>
    <a asp-action="Index">Back to List</a>
</div>
 
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
 

 

[ /Areas/Admin/Views/SubCategories/Edit.cshtml ]  

@model FastFood.Web.ViewModels.SubCategoryViewModel
 
@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<h1>Edit</h1>
 
<h4>SubCategoryViewModel</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Title" class="control-label"></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="CategoryId" class="control-label"></label>
                <select asp-for="CategoryId" class="form-control" asp-items="@ViewBag.category">
                    <option>Select Category</option>
                </select>
                <span asp-validation-for="CategoryId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
 
<div>
    <a asp-action="Index">Back to List</a>
</div>
 
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
 

 

 

[ /Areas/Admin/Views/SubCategories/Index.cshtml ]  

@model IEnumerable<FastFood.Models.SubCategory>
 
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<h1>SubCategory</h1>
 
<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Category.Title)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Category.Title)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
                @Html.ActionLink("Details", "Details", new { id=item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.Id })
            </td>
        </tr>
}
    </tbody>
</table>