I have following cshtml in my view:
<div>
@(Html.Kendo().DropDownList()
.Name("Designation")
.DataValueField("Designation")
.DataTextField("Designation")
.SelectedIndex(0)
.BindTo((System.Collections.IEnumerable)ViewData["Designation"]))
@(Html.Kendo().DropDownList()
.Name("DeptId")
.DataValueField("DeptId")
.DataTextField("DeptName")
.SelectedIndex(0)
.BindTo((System.Collections.IEnumerable)ViewData["Department"]))
<input class="k-button" id="btnFilter" type="submit" value="Filter" />
</div>
I want to post the value of both dropdownlist to my Web ApiController. I have created the following jquery ajax method to call the api. But it is not working.
JQuery:
$(document).ready(function () {
$("#btnFilter").click(function () {
debugger;
var designation = $("#Designation").val();
var deptname = $("#DeptId").val();
$.ajax({
url: "http://localhost:8648/api/Employee" + deptname + designation,
type: "Post",
// data: JSON.stringify([designation, deptname]), //{ Name: name,
// Address: address, DOB: dob },
contentType: 'application/json; charset=utf-8',
success: function (data) { alert("posted") },
error: function () { alert('error'); }
});
});
});
Here is my API Controller Post Method:
public HttpResponseMessage PostEmployee(EmployeeViewModel newEmployee, String deptname, String designation)
{
//code
}
How can i send the value of dropdownlost to my ApiController.
you are using GET
method whereas your API method is POST
your request will look like something like this
$(document).ready(function () {
$("#btnFilter").click(function () {
debugger;
var designation = $("#Designation").val();
var deptname = $("#DeptId").val();
$.ajax({
url: "http://localhost:8648/api/Employee/PostEmployee",
type: "Post",
data: {"newEmployee":/*your serialized data for the model*/,
"deptname":deptname ,"designation":designation }
contentType: 'application/json; charset=utf-8',
success: function (data) { alert("posted") },
error: function () { alert('error'); }
});
});
});
According to your question you want to post only dropdown data then Try this
$(document).ready(function () {
$("#btnFilter").click(function () {
debugger;
var designation = $("#Designation").val();
var deptname = $("#DeptId").val();
$.ajax({
url: "http://localhost:8648/api/Employee?deptname="+deptname+"&designation="+designation ,
type: "Post",
contentType: 'application/json; charset=utf-8',
success: function (data) { alert("posted") },
error: function () { alert('error'); }
});
});
});
Api controller
public HttpResponseMessage PostEmployee(String deptname, String designation)
{
//code
}
You are trying to send the data as part of the request url. You would only do this if you were making a get request.
If you wish to do this as a get request you need to specify in your $.ajax
function that it's a GET request and construct the url correctly:
$.ajax({
//construct the url with the data as part of the query string
url: "http://localhost:8648/api/Employee?deptname="+deptname+"&designation="+designation ,
//specify it's a get request
type: "GET",
contentType: 'application/json; charset=utf-8',
success: function (data) { alert("posted") },
error: function () { alert('error'); }
});
});
With your api controller like this:
[HttpGet]
public HttpResponseMessage PostEmployee(String deptname, String designation)
{
}
However, if you wish to do this as a POST request you need to send the data in the body of the request:
$.ajax({
url: "http://localhost:8648/api/Employee,
//specify it's a POSTrequest
type: "POST",
contentType: 'application/json; charset=utf-8',
//send data as part of body
data: {designation: designation, deptname: deptname}
success: function (data) { alert("posted") },
error: function () { alert('error'); }
});
});
With your api controller looking like this:
[HttpPost]
public HttpResponseMessage PostEmployee(String deptname, String designation)
{
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.