Develop Reference

Failed to load WebMethod

My drop down change function works good. But the WebMethod failed to load
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("[id*=drpSub]").change(function () {
var drpSub = $("[id*=drpSub]").val();
var Gs_Id = $("[id*=ddlClass]").val();
alert(drpSub);
$.ajax({
type: 'GET',
url: 'assignments1.aspx/GetAssignmentType',
data: {},
dataType: 'json',
success: function (r) {
//var ddlCustomers = $("[id*=drpType]");
//ddlCustomers.empty().append('<option selected="selected" value="0">Please select</option>');
//$.each(r.d, function () {
// ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
//});
}
});
});
});
Code Behind
[WebMethod]
public static List<ListItem> GetAssignmentType()
{
string query = "SELECT OP_AssignmentType.AT_Id, OP_AssignmentType.AT_Type + ' (' + CONVERT(varchar(10), COUNT(8)) + ')' AS AT_Type FROM OP_Assignments INNER JOIN OP_AssignmentType ON OP_Assignments.OP_AS_TypeId = OP_AssignmentType.AT_Id WHERE (OP_Assignments.OP_AS_SubjId = '" + 10 + "') AND (OP_Assignments.OP_GS_IdNo = 37) And OP_AS_LastDate>='" + DateTime.Now + "' GROUP BY OP_AssignmentType.AT_Id, OP_AssignmentType.AT_Type";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
List<ListItem> customers = new List<ListItem>();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(new ListItem
{
Value = sdr["Sub_Id"].ToString(),
Text = sdr["Subject_Name"].ToString()
});
}
}
con.Close();
return customers;
}
}
}
I know code inside the web method may be wrong. My actual problem is, the page is not loading when in put break point in the web method code behind. My console is error free. Is their any fault in my jQuery. Please Help

You have to add contentType: "application/json; charset=utf-8", in your ajax so, your ajax would be like
$.ajax({
type: 'GET',
url: 'Default.aspx/GetAssignmentType',
data: {},
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (r) {
//var ddlCustomers = $("[id*=drpType]");
//ddlCustomers.empty().append('<option selected="selected" value="0">Please select</option>');
//$.each(r.d, function () {
// ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
//});
}
});

Data does not display in table

I am new in JQuery and API, here i am trying to retrieve data from SQL in JSON format and then bind it to table. Data is returned here return details.ToString(); when I debug but it does not bind data into table. Any Error here?
Controller:
public class EmployeeController : ApiController
{
static EmpRepository repository = new EmpRepository();
public string GetData(Employee Em) {
var re = repository.GetData(Em);
return re;
}
}
Repository Class:
public string GetData(Employee Em)
{
DataTable dt = new DataTable();
List<Employee> details = new List<Employee>();
connection();
com = new SqlCommand("select FirstName, LastName, Company from Employee", con);
con.Open();
SqlDataAdapter da = new SqlDataAdapter(com);
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
Employee user = new Employee();
//user.Id = Int32.Parse(string dr["Id"]);
user.FirstName = dr["FirstName"].ToString();
user.LastName = dr["LastName"].ToString();
user.Company = dr["Company"].ToString();
details.Add(user);
}
return details.ToString();
}
JQuery:
$(document).ready(function DisplayResult() {
var Emp = {};
var url = 'api/Employee/GetData';
$.ajax({
type: "POST",
url: url,
contentType: "application/json;charset=utf-8",
//data: {},
dataType: "json",
success: function (data) {
for (var i = 0; i < data.d.length; i++)
{
$("#tbDetails").appendTo("<tr><td>" + data.d[i].FirstName + "</td><td>" + data.d[i].LastName + "</td><td>" + data.d[i].Company + "</td></tr>");
}
},
error: function (result) {
alert("error");
}
});
});

Here are the changes you need to do each section.
First in your Repository just return the details as is not details.ToString()
Next in both your repository class as well as in WebApi controller you don't need to Employee parameter you are not using it anywhere. Remove it.
Repository Class ->
public string GetData()
{
DataTable dt = new DataTable();
List<Employee> details = new List<Employee>();
connection();
com = new SqlCommand("select FirstName, LastName, Company from Employee", con);
con.Open();
SqlDataAdapter da = new SqlDataAdapter(com);
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
Employee user = new Employee();
// user.Id = Int32.Parse(string dr["Id"]);
user.FirstName = dr["FirstName"].ToString();
user.LastName = dr["LastName"].ToString();
user.Company = dr["Company"].ToString();
details.Add(user);
}
return details;
}
WebApi Controller :
You don't need to convert anything to JSON here, by default JSON.NET serializer will convert your List to JSON Array of Employee Objects.
public class EmployeeController : ApiController
{
static EmpRepository repository = new EmpRepository();
public string GetData() {
var re = repository.GetData();
return re;
}
}
Now in your jquery :
Ideally you are doing a 'GET' here not a POST , data returned now is an array of employee objects iterate through it.
$(document).ready(function DisplayResult() {
var Emp = {};
var url = 'api/Employee/GetData';
$.ajax({
type: "GET",
url: url,
contentType: "application/json;charset=utf-8",
success: function (data) {
for (var i = 0; i < data.length; i++)
{
$("#tbDetails").appendTo("<tr><td>" + data[i].FirstName + "</td><td>" + data[i].LastName + "</td><td>" + data[i].Company + "</td></tr>");
}
},
error: function (result) {
alert("error");
}
});
});

I think you have two mistakes in your code.
On "public string GetData(Employee Em) "
I think that you want to return list of Employee
so should change return details.ToString(); toreturn details;`
It will be
public List<Employee> GetData(Employee Em)
{
DataTable dt = new DataTable();
List<Employee> details = new List<Employee>();
connection();
com = new SqlCommand("select FirstName, LastName, Company from Employee", con);
con.Open();
SqlDataAdapter da = new SqlDataAdapter(com);
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
Employee user = new Employee();
// user.Id = Int32.Parse(string dr["Id"]);
user.FirstName = dr["FirstName"].ToString();
user.LastName = dr["LastName"].ToString();
user.Company = dr["Company"].ToString();
details.Add(user);
}
return details; }
-Change GetData api, must return JSON format. It will be as below
public string GetData(Employee Em) {
var re = repository.GetData(Em);
return Json(re);}
and
for (var i = 0; i < data.d.length; i++)
{
$("#tbDetails").appendTo("<tr><td>" + data.d[i].FirstName + "</td><td>" + data.d[i].LastName + "</td><td>" + data.d[i].Company + "</td></tr>");
}
change to
for (var i = 0; i < data.length; i++)
{
$("#tbDetails").appendTo("<tr><td>" + data[i].FirstName + "</td><td>" + data[i].LastName + "</td><td>" + data[i].Company + "</td></tr>");
}
Good luck!

Invoke Server Methods From Client Side Using jQuery AJAX in ASP.NET

I have to call server side method update(input parameters) by using ajax call.when I am running the code my ajax is not loading.I want to update that data to Jquery Data table.please give me suggestions
$(document).on('click', '#btnsave', function () {
//have to get the emp_id
var id = $('#hdnid').val();
update(id);
});
function update(id) {
var name = $('#txtempname').val();
var sal = $('#txtsal').val();
var Dept_Id = $('#ddllist').val();
$.ajax({
//var Data = "{ empname:" + name + "}";
url: 'jdatatable.aspx/update',//my .aspx page name
type: "POST",
data: '{ id: ' + id + ',empname: "' + name + '", sal: ' +sal + ', Dept_Id: ' + Dept_Id + ' }',
contentType: "application/json; charset=utf-8",
dataType: "json",
"success": function (data) {
alert("successfully done");
table.ajax.reload();
$('#txtempname').val('');
$('#txtsal').val('');
$('#ddllist').val('');
},
"error": function (data, xhr, status) {
alert(status);
}
});
jdatatable.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
}
}
//mymethod
[System.Web.Services.WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json, XmlSerializeString = false)]
public void update(int id, string empname, int sal, int Dept_Id)
{
string s = ConfigurationManager.ConnectionStrings["dbconn"].ToString();
List<UserDetails> li = new List<UserDetails>();
SqlConnection con = new SqlConnection(s);
con.Open();
SqlCommand cmd = new SqlCommand("sp_update", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add(new SqlParameter("#id", id));
cmd.Parameters.Add(new SqlParameter("#Emp_Name", empname));
cmd.Parameters.Add(new SqlParameter("#Sal", sal));
cmd.Parameters.Add(new SqlParameter("#Dept_Id", Dept_Id));
cmd.ExecuteNonQuery();
con.Close();
}

Serialize List in a WebService to Json and pass to ajax on load

I am trying to pass a list that is populated by the database in a Web Service to ajax using JSON. However, I'm not sure what I'm missing and where to go from here.
Web Service
public class RetrieveWidgets : System.Web.Services.WebService
{
[WebMethod]
public static RetrieveWidgetsDAL[] GetWidgets()
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["dboCao"].ConnectionString);
List<RetrieveWidgetsDAL> GetWidgetList = new List<RetrieveWidgetsDAL>();
int getUserId;
string userName = HttpContext.Current.User.Identity.Name;
conn.Open();
using (SqlCommand cmdGetUserId = new SqlCommand("SELECT UserId FROM tUser WHERE UserName = #UserName", conn))
{
cmdGetUserId.Parameters.AddWithValue("#UserName", userName);
getUserId = Convert.ToInt32(cmdGetUserId.ExecuteScalar());
System.Diagnostics.Debug.Write(" --------------- " + getUserId + " --------------- " + userName + " ---------");
}
using (SqlCommand cmdGetWidgets = new SqlCommand("SELECT Title, SortNo, Collapsed, ColumnId FROM tWidgets WHERE UserId = #UserId", conn))
{
cmdGetWidgets.Parameters.AddWithValue("#UserId", getUserId);
using (SqlDataReader rdr = cmdGetWidgets.ExecuteReader())
{
while (rdr.Read())
{
RetrieveWidgetsDAL widgetDAL = new RetrieveWidgetsDAL();
widgetDAL.Title = rdr.GetString(0);
widgetDAL.SortNo = rdr.GetInt32(1);
widgetDAL.Collapsed = rdr.GetInt32(2);
widgetDAL.ColumnId = rdr.GetInt32(3);
GetWidgetList.Add(widgetDAL);
}
}
//trying to serialize GetWidgetList to JSON
var js = new JavaScriptSerializer();
var strJSON = js.Serialize(GetWidgetList);// not sure if this is the correct way?
}
conn.Close();
return GetWidgetList.ToArray();
}
}
Data Structure class
public class RetrieveWidgetsDAL
{
public string Title { get; set; }
public int SortNo { get; set; }
public int Collapsed { get; set; }
public int ColumnId { get; set; }
}
ajax
$(document).ready(function () {
if ($.cookie('modal_shown') == null) {
$.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
$('#popup').dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
$.ajax({
type: "Post",
contentType: "application/json charset=utf-8",
url: "Webservices/RetrieveWidgets.asmx/GetWidgets",
data: <---don't know how to get the data,
dataType: "json",
success: function (response) {
alert(data);
}
});
}
});
I'm new to the idea of JSON so I'm still struggling to learn it. Any help is greatly appreciated.
EDIT: This is what I receive now on error in the browser console..
EDIT 2: I've removed static from my webservice..
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<RetrieveWidgetsDAL> GetWidgets()
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["dboCao"].ConnectionString);
List<RetrieveWidgetsDAL> lstData = new List<RetrieveWidgetsDAL>();
int getUserId;
string userName = HttpContext.Current.User.Identity.Name;
conn.Open();
using (SqlCommand cmdGetUserId = new SqlCommand("SELECT UserId FROM tUser WHERE UserName = #UserName", conn))
{
cmdGetUserId.Parameters.AddWithValue("#UserName", userName);
getUserId = Convert.ToInt32(cmdGetUserId.ExecuteScalar());
System.Diagnostics.Debug.Write(" --------------- " + getUserId + " --------------- " + userName + " ---------");
}
using (SqlCommand cmdGetWidgets = new SqlCommand("SELECT Title, SortNo, Collapsed, ColumnId FROM tWidgets WHERE UserId = #UserId", conn))
{
cmdGetWidgets.Parameters.AddWithValue("#UserId", getUserId);
using (SqlDataReader rdr = cmdGetWidgets.ExecuteReader())
{
while (rdr.Read())
{
RetrieveWidgetsDAL widgetDAL = new RetrieveWidgetsDAL();
widgetDAL.Title = rdr.GetString(0);
widgetDAL.SortNo = rdr.GetInt32(1);
widgetDAL.Collapsed = rdr.GetInt32(2);
widgetDAL.ColumnId = rdr.GetInt32(3);
lstData.Add(widgetDAL);
}
}
}
conn.Close();
return lstData;
}
Now my console shows [object Object]
Edit 3: I used the solution that has the accepted answer, however.. had to fix the ajax..
contentType was missing a ;
contentType: "application/json; charset=utf-8"
and now it alerts on the success!

Try this
[WebMethod]
public static List<RetrieveWidgetsDAL> GetWidgets()
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["dboCao"].ConnectionString);
List<RetrieveWidgetsDAL> lstData= new List<RetrieveWidgetsDAL>();
int getUserId;
string userName = HttpContext.Current.User.Identity.Name;
conn.Open();
using (SqlCommand cmdGetUserId = new SqlCommand("SELECT UserId FROM tUser WHERE UserName = #UserName", conn))
{
cmdGetUserId.Parameters.AddWithValue("#UserName", userName);
getUserId = Convert.ToInt32(cmdGetUserId.ExecuteScalar());
System.Diagnostics.Debug.Write(" --------------- " + getUserId + " --------------- " + userName + " ---------");
}
using (SqlCommand cmdGetWidgets = new SqlCommand("SELECT Title, SortNo, Collapsed, ColumnId FROM tWidgets WHERE UserId = #UserId", conn))
{
cmdGetWidgets.Parameters.AddWithValue("#UserId", getUserId);
using (SqlDataReader rdr = cmdGetWidgets.ExecuteReader())
{
while (rdr.Read())
{
RetrieveWidgetsDAL widgetDAL = new RetrieveWidgetsDAL();
widgetDAL.Title = rdr.GetString(0);
widgetDAL.SortNo = rdr.GetInt32(1);
widgetDAL.Collapsed = rdr.GetInt32(2);
widgetDAL.ColumnId = rdr.GetInt32(3);
lstData.Add(widgetDAL);
}
}
}
conn.Close();
return lstData;
}
}
JS: On success use response.d
$.ajax({
type: "Post",
contentType: "application/json charset=utf-8",
url: "Webservices/RetrieveWidgets.asmx/GetWidgets",
dataType: "json",
success: function (response) {
alert(response.d); // try using response.d
},
error:function (repo){
console.log(repo);
}
});

First of all, you need to change your webserver return:
public class RetrieveWidgets : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static RetrieveWidgetsDAL[] GetWidgets()
{
//...
}
}
Then change your jquery:
$.ajax({
type: "Post",
contentType: "application/json charset=utf-8",
url: "Webservices/RetrieveWidgets.asmx/GetWidgets",
cache: false,
dataType: "json"
})
.done(function( data ) {
alert(data);
});

How to pass parameter in Json in data?

I have a text box in aspx page. from that i need to send the text of the textbox in function in Json For that i have a method in server side.
[WebMethod]
public static OfficeDetails[] BindSearchDatatable(string officename)
{
DataTable dt = new DataTable();
List<OfficeDetails> details = new List<OfficeDetails>();
using (SqlConnection con = new SqlConnection(#"Data Source=GTL--7\SQLEXPRESS;Initial Catalog=master;Integrated Security=True"))
{
using (SqlCommand cmd = new SqlCommand("select OfficeName,City,Country from Office where OfficeName like '%" + officename + "%'", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach (DataRow dtrow in dt.Rows)
{
OfficeDetails Office = new OfficeDetails();
Office.OfficeName = dtrow["OfficeName"].ToString();
Office.City = dtrow["City"].ToString();
Office.Country = dtrow["Country"].ToString();
details.Add(Office);
}
}
}
return details.ToArray();
}
and in .aspx page I have
$('#btnSearch').click
(
function () {
var searchtext = $("#txtSearch").val();
alert(searchtext);
$.ajax(
{
type: "POST",
url: "Gridview.aspx/BindSearchDatatable",
data: "{officename : New}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
$("#gvDetails").append("<tr><td>" + data.d[i].OfficeName + "</td><td>" + data.d[i].City + "</td><td>" + data.d[i].Country + "</td></tr>");
}
},
error: function (x, e) {
alert("The call to the server side failed. " + x.responseText);
}
}
);
return false;
}
);
Now my Question is I send the Parameter in data but i am getting an error The function is running well.I have tested it without parameter so its running well.so i thing some wrong things is going on passing the text value Of textbox in function.

You are sending an invalid JSON. Replace:
data: "{officename : New}"
with:
data: "{officename : 'New'}"
or even better use the JSON.stringify method which wil take care of properly encoding the values:
data: JSON.stringify({ officename : 'New' })
Also please fix your server side script and use parametrized queries because your code is vulnerable to SQL injection attacks and if you put this code into the wild, you might find yourself one day with a missing database. Oh and you really don't need any DataTables:
[WebMethod]
public static OfficeDetails[] BindSearchDatatable(string officename)
{
using (var con = new SqlConnection(#"Data Source=GTL--7\SQLEXPRESS;Initial Catalog=master;Integrated Security=True"))
using (var cmd = con.CreateCommand())
{
con.Open();
cmd.CommandText = "SELECT OfficeName, City, Country FROM Office WHERE OfficeName LIKE #officename";
cmd.Parameters.AddWithValue("#officename", "%" + officename + "%");
using (var reader = cmd.ExecuteReader())
{
var details = new List<OfficeDetails>();
while (reader.Read())
{
var office = new OfficeDetails();
office.OfficeName = reader.GetString(reader.GetOrdinal("OfficeName"));
office.City = reader.GetString(reader.GetOrdinal("City"));
office.Country = reader.GetString(reader.GetOrdinal("Country"));
details.Add(office);
}
return details.ToArray();
}
}
}

Replace:
data: "{officename : New}"
with:
data: {officename : 'New'},