Thumb

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

Part-0 (introduction ): ecommerce using ASP.NET MVC | ecommerce website using ASP.NET JQUERY AJAX JSON Bootstrap Part-1: Ecommerce website design using Bootstrap| Building an Ecommerce website| ASP.NET MVC Part-2: Ecommerce website design using HTML, CSS, Bootstrap, JavaScript | ASP.NET MVC Part-3: Ecommerce DataBase design in SQL Server | ASP.NET MVC | JQUERY Ajax Json Part-4: Ecommerce website Entity Framework data model integration | ASP.NET MVC | JQUERY Ajax Json Part-5: Repository pattern in eCommerce project | ASP NET MVC | C# Part-6: Ecommerce Dashboard or admin using Bootstrap CSS | ASP.NET MVC Part-7: eCommerce Add and Edit Category into Admin Panel using ASP.NET MVC | Jquery Part-8: eCommerce Add and Edit Product into Admin Panel using ASP.NET MVC | Jquery Part-9: eCommerce Products Load and File upload ASP.NET MVC | Razor Dropdown Part-10: eCommerce Product Search using Store Procedure Entity Framework | ASP.NET MVC Part-11: eCommerce Paging Filtering with Entity Framework using ASP.NET MVC | Razor Paging Part-12: eCommerce Product Add to Shopping Cart in ASP.NET MVC | Dynamic Shopping Cart ASP.NET Part-13: eCommerce Product Remove from Shopping Cart in ASP.NET MVC | Dynamic Shopping Cart ASP.NET Part-14: eCommerce Manage Duplicate Entry Shopping Cart in ASP.NET MVC | Dynamic Shopping Cart Part-15: eCommerce Checkout manage in ASP.NET MVC | Razor | Jquery Part-16: eCommerce PayPal payment gateway integration in ASP.NET MVC|Free payment gateway Part-18(Final): eCommerce PayPal Payment complete using ASP.NET MVC | Payment Gateway in asp.net Part-17: eCommerce PayPal Payment Logic implementation in ASP.NET MVC | using C#

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

Reza Karim

Software Engineer

More about him