I am using mvc 4 having 1 view which have a simple HTML form to add employee data in table using web api method ajax call & using Visual Studio 2013.
In code i am not passing any parameter in url but its showing after submit the form & my insert operation working fine.But however i am not able to find the cause of parameter in url like below snippet. So how can i remove this url parameter any trick?
http://localhost:1306/AddEmployees?Add_Position_Territory_Region=8&Employee_ID=640488&Add_Position_City=8&Add_Employee_Name=Sanjay+Shivhar+Nakate&Employee+Start+Date=2018-03-14&Add_Position_Cease_Date=2018-03-27&Add_Position_FTE=8&Add_Position_FTE_WM+=8&Add_Currency=8&Add_Position_FTE_SU=8&Add_salary=8&Add_Position_FTE_Total=8&Add_Bouns=8&Add_Incentive=8
my snipeet code of the view
<script type="text/javascript">
$("body").on("click", "#AddEmploye", function () {
var _employee = {};
_employee.EMPLOYEE_ID = $("#ID_Employee_ID").val(); //*
_employee.MAX_FTE = $("#ID_Add_Position_FTE").val();//*
_employee.FTEMW = $("#ID_Add_Position_FTE_WM").val();//*
_employee.FTESU = $("#ID_Add_Position_FTE_SU").val();//*
_employee.TOTALFTE = $("#ID_Add_Position_FTE_Total").val();//*
_employee.EMPLOYEE_ID = $("#ID_Employee_ID").val();//*
_employee.COUNTRY_ID = $("#Add_Position_Country").val(); //*
_employee.REGION = $("#ID_Add_Position_Territory_Region").val(); //*
_employee.CITY = $("#ID_Add_Position_City").val(); //*
_employee.MARKET_ID = null; //$("#").val(); //No field in form
// _employee.OTHER_LOCATION = null //$("#").val(); //No field in form
_employee.CATEGORY_ID = null;// $("#").val(); //No field in form
_employee.CURRENCY = $("#ID_Add_Currency").val(); //*
_employee.SALARY = $("#ID_Add_salary").val();//*
_employee.BONUS = $("#ID_Add_Bouns").val();//*
_employee.SALES_INCENTIVE = $("#ID_Add_Incentive").val();//*
_employee.AUXILIARY = null; // $("#ID_Add_Bouns").val(); //No field in form
_employee.EMPLOYEE_ID = $("#ID_Employee_ID").val();
_employee.ACTIVE_STATUS = 1 //$("#").val(); //No field in form ** 1
_employee.POSITION_TITLE_ID = $("#Add_Employee_Title").val(); //*
_employee.MANAGER_REPORT_TO_ID = null; //$("#").val(); //No field in form
_employee.POS_CC_ID = $("#Add_Position_Cost_Centre").val(); //*
_employee.PLAN_START_DATE = $("#ID_Employee_Start_Date").val(); //*
_employee.CEASE_DATE = $("#ID_Add_Position_Cease_Date").val();
_employee.COST_CENTERE_ID = $("#Add_Position_Cost_Centre").val();
_employee.SO_NAME_ID = null; // $("#").val(); //No field in form
_employee.SAP_CC_ID = null; // $("#").val(); //No field in form
_employee.DIV_CC_ID = null; // $("#").val(); //No field in form
_employee.EMPLOYEE_ID = $("#ID_Add_Incentive").val();
_employee.EMPLOYEE_ID = $("#ID_Employee_ID").val(); //*
_employee.JOB_FAMILY_GENERIC_ID = null; //$("#").val(); //No field in form
_employee.JOB_GROUP_ID = null; //$("#").val(); //No field in form
//_employee.APPROVED_PERIOD = null; //$("#").val(); //No field in form
// _employee.APPROVED_DATE = null; // $("#").val(); //No field in form
// _employee.VALIDATION = null; // $("#").val(); //No field in form
// _employee.PEOPLE_MANAGER = $("#ID_Add_Incentive").val();
// _employee.POSITION_ID_UK = null; // $("#").val(); //No field in form
_employee.EMP_ACTIVE_STATUS_TF = 1 //$("#ID_Add_Incentive").val(); //No field in form **
_employee.JOB_STATUS_TYPE = $("#ID_Add_job_status").val();
// _employee.JOB_TYPE = null; // $("#ID_Add_Incentive").val();
// _employee.HEY_LEVEL = null; //$("#").val(); //No field in form
$.ajax({
type: "POST",
// url: "/api/ManageEmployees/AddEmployeesMethod",
url: "/api/Employee/AddEmployeesMethod",
data: JSON.stringify(_employee),
// data: '{" DepartmntName": "' + DepartmntName +'"," DateCreated":"' + DateCreated + '", " DateModified ":"'+ DateModified +'"," IsDeleted":"' + IsDeleted +'", "ParentID":"' + ParentID + '", "Icon": "' + Icon + '", "Paren":"' + Paren +'" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert("success" + r);
},
failure: function (r) {
alert(r.responseText);
},
});
});
</script>
<form class="form-style-9">
<ul>
<li>
<h3>
Manage Employee
</h3>
</li>
<li>
@*<div>
<input type="radio" name="gender" value="new" checked> New
<input type="radio" name="gender" value="replaced"> Replaced
<select id="Add_Position_Market_Country" class="field-style field-split align-right slide-left-select-box"></select>
@*<input type="text" name="field2" class="field-style field-split align-right" placeholder="Market*" />
</div>*@
<h4>
Add Employee
</h4>
</li>
<li>
<select id="Add_job_ID" class="field-style field-split align-left" required></select>
<select id="Add_Position_Country" class="field-style field-split align-right slide-left-select-box">
<option value="">Select Add Country</option>
</select>
</li>
<li>
<select id="Add_Employee_Title" class="field-style field-split align-left" required></select>
<input type="text" id="ID_Add_Position_Territory_Region" name="Add_Position_Territory_Region" class=" field-style field-split align-right" placeholder="Territory / Region" />
</li>
<li>
<input type="text" id="ID_Employee_ID" name="Employee_ID" class="field-style field-split align-left" placeholder="Employee ID" />
@*<input type="text" name="Add_Position_CC" class="field-style field-split align-right" placeholder="Position CC" />*@
<input type="text" id="ID_Add_Position_City" name="Add_Position_City" class=" field-style field-split align-right" placeholder="City" />
</li>
<li>
<input type="text" id="ID_Add_Employee_Name" name="Add_Employee_Name" class=" field-style field-split align-left" placeholder="Add Employee Name" />
<input type="date" id="ID_Employee_Start_Date" name="Employee Start Date" class=" field-style field-split align-right" placeholder="Employee Start Date" />
</li>
<li>
<select id="ID_Add_job_status" class="field-style field-split align-left">
<option value="0">--Select job Status--</option>
<option value="1">Permanent</option>
<option value="2">Temporary</option>
</select>
<input type="date" id="ID_Add_Position_Cease_Date" name="Add_Position_Cease_Date" class=" field-style field-split align-right" placeholder="Employee Cease Date" />
</li>
<li>
<input type="text" id="ID_Add_Position_FTE" name="Add_Position_FTE" class=" field-style field-split align-left" placeholder="FTE " />
<select id="Add_Position_Cost_Centre" class="field-style field-split align-right slide-left-select-box"></select>
</li>
<li>
<input type="text" id="ID_Add_Position_FTE_WM" name="Add_Position_FTE_WM " class=" field-style field-split align-left" placeholder="FTE WM " />
<input type="text" id="ID_Add_Currency" name="Add_Currency" class=" field-style field-split align-right" placeholder="Currency" />
</li>
<li>
<input type="text" id="ID_Add_Position_FTE_SU" name="Add_Position_FTE_SU" class=" field-style field-split align-left" placeholder="FTE SU" />
<input type="text" id="ID_Add_salary" name="Add_salary" class=" field-style field-split align-right" placeholder="Salary" />
</li>
<li>
<input type="text" id="ID_Add_Position_FTE_Total" name="Add_Position_FTE_Total" class=" field-style field-split align-left" placeholder="FTE Total" />
<input type="text" id="ID_Add_Bouns" name="Add_Bouns" class=" field-style field-split align-right" placeholder="Bouns" />
</li>
<li>
<input type="text" id="ID_Add_Incentive" name="Add_Incentive" class=" field-style field-split align-right" placeholder="Incentive" />
</li>
<li>
<input type="submit" value="Submit" id="AddEmploye"/>
</li>
</ul>
</form>
You handling the click event of your submit button, and not cancelling the default submit, therefore you make an ajax call to submit plus you are also making the default submit of the form, which is a GET, therefore the values of the form controls are added to the query string and posted back to you GET method.
Change the script to cancel the default event
$("body").on("click", "#AddEmploye", function (e) {
e.preventDefault();
....