Download Project

Post your any code related problem to www.abctutorial.com

Follow the previous video and articles to complete the POS tutorials

Step-1

Here we are going to create update retrieve of Category which will use in entire POS & Inventory Project. Actually this is the CRUD operation which I showed you in several videos so that why in video I never repeat the same CRUD. If you follow this article then you would be able to do the CRUD operation as well.

• Please add a method under HomeController

        [AuthorizationFilter]
        public ActionResult Category()
        {
            return View();
        }

• Add below code into Category.cshtml.

@{
    ViewBag.Title = "Category";
}

<div class="col-xl-12 col-md-12 mb-12">
    <div class="card border-left-primary shadow h-100 py-2">
        <div class="card-body">
            <div class="row no-gutters align-items-center">
                <div class="col mr-2">

                    <form class="user">

                        <div class="form-group col-md-6">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Create Category</div>
                        </div>
                        <input type="hidden" id="categoryId" />
                        <input type="hidden" id="status" />
                        <div class="form-group col-md-6">
                            <input type="text" class="form-control form-control-user" id="categoryName" aria-describedby="emailHelp" placeholder="Category">
                        </div>
                        <div class="form-group col-md-6">
                            <a href="#" onclick="SaveUser()" class="btn btn-primary btn-sm">
                                Save
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<br />
<div class="col-xl-12 col-md-12 mb-12">
    <div class="card border-left-primary shadow h-100 py-2">
        <div class="card-body">
            <div class="row no-gutters align-items-center">
                <div class="col mr-2">
                    <div class="form-group col-md-6">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Category List</div>
                    </div>

                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Category</th>
                                <th>Status</th>
                                <th>
                                    Action
                                </th>
                            </tr>
                        </thead>
                        <tbody id="trDiv"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Step-2

The main part of this Category CRUD is saving, updating, retrieving data so here I create and update data using one single method SaveCategory

• Please go to HomeController
• Add this below method inside the HomeController

        [HttpPost]
        public JsonResult SaveCategory(Category cat)
        {
            POS_TutorialEntities db = new POS_TutorialEntities();
            bool isSuccess = true;
            if (cat.CategoryId > 0)
            {
                db.Entry(cat).State = EntityState.Modified;
            }
            else
            {
                cat.Status = 1;
                db.Categories.Add(cat);
            }
            try
            {
                db.SaveChanges();
            }
            catch (Exception)
            {
                isSuccess = false;
            }
            return Json(isSuccess, JsonRequestBehavior.AllowGet);
        }

Step-3

As a part of CRUD, to updating data we must show list of data to select for updating. Please follow below steps to

• Please go to HomeController.
• Please write this below code to show list of category.

        [HttpGet]
        public JsonResult GetAllGetegory()
        {
            POS_TutorialEntities db = new POS_TutorialEntities();
            var dataList = db.Categories.Where(x => x.Status == 1).ToList();
            var data = dataList.Select(x => new {
                CategoryId = x.CategoryId,
                Name=x.Name,
                Status=x.Status
            });
            return Json(data, JsonRequestBehavior.AllowGet);
        }       

Step-4

As we are implementing CRUD operation here we used JQUERY AJAX JSON so we will add few JavaScript code which will save, update, retrieve data.

• Please go to Category.cshtml view.
• Please add this below code in below of all HTML code.

<script>
    $(function () {
        GetAllGetegory();
    });

    function SaveUser() {
        var category = new Object();
        category.CategoryId = $("#categoryId").val();
        category.Name = $("#categoryName").val();
        category.Status = $("#status").val();
        var data = JSON.stringify({
            cat: category
        });
        return $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            url: "/Home/SaveCategory",
            data: data,
            success: function (result) {
                if (result == true) {
                    GetAllGetegory();
                    Reset();
                    alert("Save Success!");
                }
                else {
                    alert("Save failed!");
                }
            },
            error: function () {
                alert("Error!")
            }
        });
    }

    function GetAllGetegory() {
        $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'Get',
            url: "/Home/GetAllGetegory",
            success: function (data) {
                $("#trDiv").html('');
                var tdContent = '';
                for(var i = 0; i < data.length; i++)
                {
                    tdContent += '<tr><td>' + data[i].Name + '</td>' + '<td>' + data[i].Status + '</td>' + '<td><a href="#" onclick="Edit(' + data[i].CategoryId + ",'" + data[i].Name + "'," + data[i].Status + ');">Edit</a></td></tr>'; // if Name is property of your Person object
                }
                $("#trDiv").append(tdContent);
            },
            error: function () {
                alert("Error!")
            }
        });
    }
    function Edit(catId, catName,status) {
        $("#categoryId").val(catId);
        $("#categoryName").val(catName);
        $("#status").val(status);
    }
    function Reset() {
        $("#categoryId").val(null);
        $("#categoryName").val(null);
        $("#status").val(null);
    }
</script>

• Now run the project.
• Then save, update, retrieve data.