View is not passing the model to controller - ASP.Net MVC

Question

This is a basic passing of values from view to controller, but this does not seek to work.When I click the update button that functions to update the record in the database, the values from view, does not correctly pass the values to controller. Upon putting debugger in the javascript, the each variables were able to correctly got its values and evn the object where they are stored.

What could possible the reason for this problem?

here's the button onclick event code in Javascript.

 $('#updatePrescription').click(function () {
        debugger;
        ValidateFields();
        var drugListIsEmpty = CheckDrugList();
        var error = $(".text-danger").length;


        if (error == 0 && !drugListIsEmpty) {
            debugger;
            var prescription = [];
            var template = {};

            template.templateName = $("#prescriptionTemplateName").val();
            template.templateTypeId = $('input[name=templateTypeId]:checked').val();
            template.prescriptionTemplateItemList = [];
            template.instructionId = $('.instruction').val();
            template.frequencyId = $('.frequency').val();
            template.day = $('.inputDays').val();
            template.quantity = $('.inputQuantity').val();
            template.dispenseLocationId = $('.selectDispenseLocation').val();
            template.statusId = $('.status').val();
            //template.categoryId = $('.templateCategory').filter(":visible").last().val();
            template.templateId = $('#prescriptionTemplateId').val();

            //if (template.categoryId == null) {
            //    template.categoryId = 0;
            //}

            var x = 0;
            $('#tblPrescriptionSaveTemplateBody tr').each(function (key, value) {
                debugger;
                var row = $(this).closest('tr');
                var next_row = $(row).next();
                var drugId = $(value).find('.drugId').val();
                var dosage = $(value).find('.inputDosage').val();
                var dosageUnitId = $(value).find('.selectUnitId').val();
                var statusId = "41";
                var remarks = $(value).find('.inputDescription').val();
                var groupId = $(value).find('.inputGroupNo').val();
                var unit = $(value).find('.selectUnitId').val();
                var prescriptionTemplateItemId = $(value).find('.prescriptionTemplateItemId').val();

                x++;

                var obj = {
                    // templateId: prescriptionTemplateId,
                    prescriptionTemplateId: template.templateId,
                    prescriptionTemplateItemId: prescriptionTemplateItemId,
                    drugId: drugId,
                    dosage: dosage,
                    dosageUnitId: dosageUnitId,
                    instructionId: template.instructionId,
                    frequencyId: template.frequencyId,
                    day: template.day,
                    quanitity: template.quantity,
                    unit: unit,
                    remarks: remarks,
                    dispenseLocationId: template.dispenseLocationId,
                    groupId: groupId,
                    statusId: template.statusId
                }
                template.prescriptionTemplateItemList.push(obj);
                //prescription.push(obj)

            })

            $.ajax({
                type: 'POST',
                url: '/WestMedicinePrescriptionTemplate/UpdateTemplate',
                dataType: 'json',
                contentType: 'application/json',
                data: JSON.stringify(template),
                success: function (data) {
                    ShowNotificationMessage(data.notification);
                    window.location.href = '/WestMedicinePrescriptionTemplate/Index';
                }
            });
        }
    });

This is expected to pass the result of model in parameter "newtemplate" in the controller, but it results to null

  public ActionResult UpdateTemplate([FromBody] PrescriptionTemplateVM newtemplate)
        {
            int empId = Convert.ToInt32(HttpContext.Session.GetInt32("EmployeeId"));


            var notif = "Update Failed.";
            try
            {
                if (ModelState.IsValid)
                {
                    bool updateSuccessful = _prescription.UpdatePrescriptionTemplateAndItems(newtemplate, empId);

                    if (updateSuccessful)
                    {
                        notif = "Update Successful.";
                    }
                }
            }
            catch (Exception ex)
            {
                notif = ex.Message;
            }
            return Json(new { notification = notif });
        }

What could be the problem in the code

Answer 1

do like this:

[HttpPost]
public ActionResult UpdateTemplate(PrescriptionTemplateVM newtemplate)

You need to make sure that you are using the same variables names that you defined in PrescriptionTemplateVM

and dont convert the data to Json. do like this:

$.ajax({
            type: 'POST',
            url: '/WestMedicinePrescriptionTemplate/UpdateTemplate',
            dataType: 'json',
            contentType: 'application/json',
            data: {newtemplate: template},
            success: function (data) {
                ShowNotificationMessage(data.notification);
                window.location.href = 
             '/WestMedicinePrescriptionTemplate/Index';
            }
        });