Thumb

Part-7: eCommerce Add and Edit Category into Admin Panel using ASP.NET MVC | Jquery

9/19/2019 12:00:00 AM

Download Project  (Full Project)

Step-1

In this Part I will show how to add category, edit and so on. Now Open the Visual Studio and open the same project where we are working. In this Dashboard create a add button. Then under the controller create a method name as “AddCatagory” and “UpdateCatagory” this update method receive a parameter. Category view redesign the html code and use model to save  the data into database. In this field we need to validation by rezor syntax. This input box value pass the controller using form method. So save the data into database. Cancel button work by the js. Given bellow the Category view source code:

@model List<OnlineShoppingStore.DAL.Tbl_Category>
    @{
        ViewBag.Title = "Categories";
        Layout = "~/Views/Shared/_AdminLayout.cshtml";
    }

    <div class="container-fluid">
        <!-- Breadcrumbs-->
        
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="#">Dashboard</a>
            </li>
            <li class="breadcrumb-item active">Categories</li>
          
        </ol>
        <!-- DataTables Example -->
        <div class="card mb-3">
            <div class="card-header">
                <i class="fas fa-table"></i>
                Category Details
               <a href="../Admin/AddCategory" class="btn btn-info pull-right fa fa-plus">Add New</a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Sr. No.</th>
                                <th>Category Name</th>
                                <th>Action</th>
                              
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>Sr. No.</th>
                                <th>Category Name</th>
                                <th>Action</th>
                            </tr>
                        </tfoot>
                        <tbody>
                            @foreach (var item in Model)
                            {

                                <tr>
                                    <td>@(Model.IndexOf(item)+1)</td>
                                    <td>@item.CategoryName</td>
                                    <td><a href="#">Edit</a></td>
                                  
                                </tr>
                            }
                            
                            </tbody>
                        </table>
                    </div>

                </div>
</div>
</div>

Step-2

First create a object "GenericUnitOfWork" this class. Categories method get the data from database and pass the object by return method. UpdateCategory method receive the peramitar then get the value from database by using repository then modify the object and save the database. Modified  Bootstrap.css file Then going to solution Explorer in Admin Controller write some code: This source code given bellow:

using Newtonsoft.Json;
using OnlineShoppingStore.DAL;
using OnlineShoppingStore.Models;
using OnlineShoppingStore.Repository;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace OnlineShoppingStore.Controllers
{
    public class AdminController : Controller
    {
        // GET: Admin

        public GenericUnitOfWork _unitOfWork = new GenericUnitOfWork();
        public ActionResult Dashboard()
        {
            return View();
        }


        public ActionResult Categories()
        {
            List<Tbl_Category> allcategories = _unitOfWork.GetRepositoryInstance<Tbl_Category>().GetAllRecordsIQueryable().Where(i => i.IsDelete == false).ToList();
            return View(allcategories);
        }
        public ActionResult AddCategory()
        {
            return UpdateCategory(0);
        }

        public ActionResult UpdateCategory(int categoryId)
        {
            CategoryDetail cd;
                if(categoryId != null) 
                {
                    cd = JsonConvert.DeserializeObject<CategoryDetail>(JsonConvert.SerializeObject(_unitOfWork.GetRepositoryInstance<Tbl_Category>().GetFirstorDefault(categoryId)));
                }
                else{
                    cd = new CategoryDetail();
                }
            return View("UpdateCategory", cd);
            
        }

    }
}

Step-3

UpdateCategory.cshtml view and add Category view look like same. when we update the value then controller pass the single object to the view. then the view fields show the value. BeginForm is responsible to submit the form by click save button. Code given  bellow for View:


@model OnlineShoppingStore.Models.CategoryDetail
    @{
        ViewBag.Title = "UpdateCategory";
        Layout = "~/Views/Shared/_AdminLayout.cshtml";
    }



    <div class="container-fluid">
        <!-- Breadcrumbs-->

        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="#">Dashboard</a>
            </li>
            <li class="breadcrumb-item ">Categories</li>
            <li class="breadcrumb-item active">Add New Category</li>


        </ol>
        <!-- DataTables Example -->
        <div class="card mb-3">
            <div class="card-header">
                <i class="fas fa-table"></i>
                Add New Category
                
            </div>
            <div class="card-body">
                @using (Html.BeginForm("UpdateCategory", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
                {
                @Html.HiddenFor(m => m.CategoryId)

                <div class="form-group">
                    <label class="control-label">Category Name</label>
                    
                    @Html.TextBoxFor(m => m.CategoryName, new { @class = "form-control", placeholder = "Enter category Name", required = "required", autofocus = "autofocus" })
               @Html.ValidationMessageFor(m => m.CategoryName, "", new { @class = "text-danger" })
                 </div>

                <a onclick="window.history.back();" class="btn btn-danger" >Cancel</a>
                <input type="submit" class="btn btn-primary" value="Save" />
                }
                </div>
</div>
</div>

Step-4

Build and save it. Run the project

About Teacher

Image

Reza Karim

Software Engineer

More about him