Cannot get values from FormData - angularJS

Question

This may be somewhere similar to a lot of questions but I can't find a working solution in them. Which made me ask this question.

So I've a razor file and angular file as :-

angular.module('App').controller("ModalController", function ($scope, $http, $timeout, $compile) { $scope.sdata1 = {}; $scope.SaveQuotation = function () { var frm = $("#formSaveQuotationDetail"); var formData = new FormData(frm[0]); alert(formData.get('VendorName')); $http({ url: window.SaveQuotation, method: 'POST', data: formData, headers: { 'Content-Type': undefined } }).success( function (res) { if (res == 'Saved Successfully!') { $scope.FetchQuotationList(); } else { alert(res) } } ).error(function (res) { showHttpErr(res); }); } } 

@model NtierMvc.Model.QuotationEntity @{ ViewBag.Title = "QuotationDetails"; } <div ng-app="App"> <div ng-controller="ModalController" class="row"> <form id="formSaveQuotationDetail"> <div class="col-md-12"> @Html.HiddenFor(m => m.Id) <div class="row"> <div class="col-md-4" hidden> <div class="form-group"> <label class="control-label"> User Initial </label> @Html.TextBoxFor(m => m.UserInitial, new { @class = "form-control requiredValidation", @id = "UserInitial", @readonly = "readonly" }) @Html.HiddenFor(m => m.UnitNo) @*<span class="HideValidMsg">Please Enter Valid Letter Number</span> <span class="HideValidMsg">Please Select Post</span>*@ </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> VendorId </label> @Html.DropDownListFor(m => m.VendorId, new SelectList(@ViewBag.ListVendorId, "DataStringValueField", "DataTextField", Model.VendorId), new { @class = "form-control requiredValidation", @id = "VendorId", @data_inneraction = "validationCall", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", ng_model= "VendorId", ng_change = "GetVendorDetails(VendorId)" }) <span class="HideValidMsg">Please Select VendorId</span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Vendor Name </label> @Html.TextBoxFor(m => m.VendorName, new { @class = "form-control requiredValidation", @id = "VendorName", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", @readonly = "readonly", ng_model = "VendorName", }) <span class="HideValidMsg">Please Select VendorId</span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Country </label> @Html.TextBoxFor(m => m.Country, new { @class = "form-control requiredValidation", @id= "Country", @placeholder = "Select Vendor ID", ng_model = "Country", @readonly = "readonly", @style = "width = '50%'" }) @Html.TextBoxFor(m => m.CountryId, new { ng_model = "CountryId", @hidden = "hidden" }) <span class="HideValidMsg">Please Select VendorId</span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Geo Area <span class="required">*</span> </label> @Html.TextBoxFor(m => m.GeoArea, new { @class = "form-control requiredValidation", @id = "GeoArea", @placeholder = "Select Vendor ID", ng_model = "GeoArea", @ng_hide = "GeoArea == null" }) @Html.TextBoxFor(m => m.GeoCode, new { ng_model = "GeoCode", @hidden = "hidden" }) <span class="HideValidMsg">Please Select Vendor ID</span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Quote Type <span class="required">*</span> </label> @Html.TextBoxFor(m => m.QuoteType, new { @class = "form-control requiredValidation", @id = "QuoteType", @placeholder = "Quote Type", ng_model = "QuoteType" }) <span class="HideValidMsg">Please Enter QuoteType</span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> File Number <span class="required">*</span> </label> @Html.TextBoxFor(m => m.FileNo, new { @class = "form-control requiredValidation", @id = "FileNo", @placeholder = "File Number", ng_model = "FileNo" }) <span class="HideValidMsg">Please Enter Quotation Reference</span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Enquiry Reference </label> @Html.TextBoxFor(m => m.EnqRef, new { @class = "form-control requiredValidation", @id = "EnqRef", @placeholder = "Enquiry Reference", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", ng_model = "EnqRef" }) <span class="HideValidMsg">Please Select Enquiry Reference</span> </div> </div> @*<div class="col-md-4"> <div class="form-group"> <label class="control-label">Quotation Type</label> <div class="m-radio-inline"> @Html.TextBoxFor(m => m.QuoteType, new { @class = "form-control requiredValidation", @id = "QuoteType", @placeholder = "Quotation Type", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)" }) </div> <span class="HideValidMsg">Please Select Quotation Type</span> </div> </div>*@ <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Enquiry Date </label> @Html.TextBoxFor(m => m.EnqDt, new { @class = "form-control requiredValidation ApprovalDate", @id = "EnqDt", @placeholder = "dd/MM/yyyy", @style = "disabled :disabled", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", ng_model = "EnqDt" }) <span class="HideValidMsg">Please Select Enquiry Date</span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Enquiry For </label> @Html.TextBoxFor(m => m.EnqFor, new { @class = "form-control requiredValidation", @id = "EnqFor", @placeholder = "Enquiry For", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", ng_model = "EnqFor" }) <span class="HideValidMsg">Please Enter Enquiry For</span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Product Group </label> @Html.DropDownListFor(m => m.ProdGrp, new SelectList(@ViewBag.ListProdGrpId, "DataStringValueField", "DataTextField", Model.VendorId), new { @class = "form-control requiredValidation", @id = "ProdGrp", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", ng_model= "ProdGrp" }) <span class="HideValidMsg">Please Select Product Group</span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Quote Number </label> @Html.TextBoxFor(m => m.QuoteNo, new { @class = "form-control requiredValidation", @id = "QuoteNo", @placeholder = "Quote No", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", @readonly = "readonly" }) <span class="HideValidMsg">Please Select Quote No</span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Quote Date <span class="required">*</span> </label> @Html.TextBoxFor(m => m.QuoteDate, new { @class = "form-control requiredValidation ApprovalQuoteDate", @id = "QuoteDate", @placeholder = "dd/MM/yyyy", @style = "disabled :disabled", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", ng_model = "QuoteDate" }) <span class="HideValidMsg"> Please Select Quote Date </span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Quote Validity </label> @Html.TextBoxFor(m => m.QuoteValidity, new { @class = "form-control requiredValidation ApprovalDate", @id = "QuoteValidity", @placeholder = "dd/MM/yyyy", @style = "disabled :disabled", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", ng_model = "QuoteValidity" }) <span class="HideValidMsg">Please Select Quotation Validity</span> </div> </div> <div class="col-md-4" hidden> <div class="form-group"> <label class="control-label"> BG Request </label> <div class="row"> <div class="col-md-12"> @Html.TextBoxFor(m => m.BgReq, new { @class = "form-control requiredValidation", @id = "BgReq", @placeholder = "BG Req", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", ng_model = "BgReq" }) </div> </div> <span class="HideValidMsg">Please Select Letter Date</span> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Inspection <span class="required">*</span> </label> @Html.TextBoxFor(m => m.Inspection, new { @class = "form-control requiredValidation", @id = "Inspection", @placeholder = "Inspection", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", ng_model = "Inspection" }) <span class="HideValidMsg">Please Select Inspection</span> @*@Html.ValidationMessageFor(m => m.Vicinity.NameofInstitute, "", new { @class = "text-danger" })*@ </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label"> Status </label> @Html.TextBoxFor(m => m.Status, new { @class = "form-control requiredValidation", @id = "Status", @placeholder = "Status", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", ng_model = "Status" }) <span class="HideValidMsg">Please Select Status</span> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="control-label"> Remarks </label> @Html.TextAreaFor(m => m.Remarks, new { @class = "form-control requiredValidation", @id = "Remarks", @placeholder = "Remarks", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", ng_model = "Remarks" }) <span class="HideValidMsg">Please Select Remarks</span> </div> </div> </div> <div class="row"> <div class="col-md-12 pt-4 text-center"> <button style="font-size:18px" type="button" class="btn btn-success btn-sm" data-dismiss="modal" id="save_results" ng-click="SaveQuotation()">Save</button> <button style="font-size:18px" type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button> </div> </div> </div> </form> </div> </div> <script> $(document).ready(function () { window.VendorDetail = '@Url.Action("GetQuoteVendorDetail", "Technical")'; window.SaveQuotation = '@Url.Action("SaveQuotationDetails", "Technical")'; //$('#save_results').on("click", function () { // QuotationDetails.FinalSave(); //}) }); //LEASE DATE AND EXP LEASE DATE VALIDATION $('.ApprovalDate').datepicker({ format: 'dd/mm/yyyy', autoclose: true, changeMonth: true, changeYear: true, endDate: '', }); $('.ApprovalQuoteDate').datepicker({ format: 'dd/mm/yyyy', autoclose: true, changeMonth: true, changeYear: true, endDate: 'today', }); </script> <script src="~/Scripts/CustomJS/common.js"></script> 

My problem is when I hit the Save button. I get all null values in my c# controller as under:-

public ActionResult SaveQuotationDetails(QuotationEntity cusE) { model = new BaseModel(); ViewBag.ListVENDORTYPE = model.GetMasterTableList("Master.Vendor", "Id", "VendorType"); ViewBag.ListVENDOR_NATURE = model.GetMasterTableList("Master.Vendor", "Id", "VendorNature"); ViewBag.ListFUNCTION_AREA = model.GetMasterTableList("Master.FunctionalArea", "Id", "FunctionArea"); cusE.UserInitial = Session["UserName"].ToString(); cusE.ipAddress = ERPContext.UserContext.IpAddress; cusE.UnitNo = Session["UserId"].ToString(); string result = objManager.SaveTechnicalDetails(cusE); TempData["VendorName"] = cusE.VendorName; TempData["UserName"] = cusE.UserInitial; string data = string.Empty; if (!string.IsNullOrEmpty(result) && (result == GeneralConstants.Inserted || result == GeneralConstants.Updated)) { //Payment Gateway data = GeneralConstants.SavedSuccess; } else { data = GeneralConstants.NotSavedError; } return new JsonResult { Data = data, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; } 

I've already defined everything , but can't understand the problem. Pls Help.