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 CRUD operation of Batch which will use in entire POS & Inventory Project. Actually this is the CRUD operation which I showed you in several. 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 Batch()
        {
            return View();
        }

• Add below code into Batch.cshtml.

@{
    ViewBag.Title = "Batch";
}
<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 Batch</div>
                        </div>
                        <input type="hidden" id="batchId" />
                        <div class="form-group col-md-6">
                            <input type="text" disabled class="form-control form-control-user" id="batchName" aria-describedby="emailHelp" placeholder="Batch" value="Batch">
                        </div>
                        <div class="form-group col-md-6">
                            <a href="#" onclick="SaveBatch()" 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">Batch List</div>
                    </div>

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

Step-2

The main part of this Batch 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 SaveBatch(Batch batch)
        {
            PointOfSale.Helper.AppHelper.ReturnMessage retMessage = new AppHelper.ReturnMessage();
            POS_TutorialEntities db = new POS_TutorialEntities();
            retMessage.IsSuccess = true;

            if (batch.BatchId > 0)
            {
                db.Entry(batch).State = EntityState.Modified;
                retMessage.Messagae = "Update Success!";
            }
            else
            {
                batch.BatchName = batch.BatchName + db.Batches.Count();
                var batchData = db.Batches.Where(x => x.BatchName.Equals(batch.BatchName)).SingleOrDefault();
                if (batchData == null)
                {
                    db.Batches.Add(batch);
                    retMessage.Messagae = "Save Success!";
                }
                else
                {
                    retMessage.IsSuccess = false;
                    retMessage.Messagae = "This batch already exist!Please refresh and again try!";
                }
            }
            try
            {
                db.SaveChanges();
            }
            catch (Exception)
            {
                retMessage.IsSuccess = false;
            }

            return Json(retMessage, 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 batch.

        [HttpGet]
        public JsonResult GetAllBatch()
        {
            POS_TutorialEntities db = new POS_TutorialEntities();
            var dataList = db.Batches.ToList();
            var modefiedData = dataList.Select(x => new
            {
                BatchId = x.BatchId,
                BatchName = x.BatchName,
            }).ToList();
            return Json(modefiedData, 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 Batch.cshtml view.
• Please add this below code in below of all HTML code.

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

    function SaveBatch() {
        var batch = new Object();
        batch.BatchId = $("#batchId").val();
        batch.BatchName = $("#batchName").val();
        var data = JSON.stringify({
            batch: batch
        });
        return $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            url: "/Home/SaveBatch",
            data: data,
            success: function (result) {
                if (result.IsSuccess == true) {
                    GetAllBatch();
                    alert(result.Messagae);
                }
                else {
                    alert(result.Messagae);
                }
            },
            error: function () {
                alert("Error!")
            }
        });
    }

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

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