I have a problem binding Kendo GRID to ASP.NET asmx web service.
Following is HTML Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />
<link href="styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="styles/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="../BOOTSTRAP/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-2.0.3.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="../BOOTSTRAP/bootstrap.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid" class="table table-bordered"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
columns: [
{ field: "srno", title: "SRNO" },
{ field: "party", title: "PARTY" }
],
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "../Service/DatabaseHandling.asmx/GetPurchaseJangad_JSON",
dataType: "json",
contentType: "application/json; charset=utf-8"
}
}
}),
schema: {
data: "d"
},
sortable: true
});
});
</script>
</div>
</body>
</html>
JSON returned from service is looking ok as below.
{"d":"[{\"srno\":17,\"party\":\"PARESH\",\"dt\":\"11/5/2015\",\"weight\":15000.0,\"timestamp\":\"2015-05-11T20:19:55.093\"},{\"srno\":18,\"party\":\"SIM\",\"dt\":\"11/5/2015\",\"weight\":11000.0,\"timestamp\":\"2015-05-11T20:21:44.177\"}]"}
Still nothing is visible on GRID.
And no error in browser console.
I think the issue is with the JSON data only.
Modified JSON given below, replaced \" with " and removed the quote just before and after the square brackets
{"d":[{"srno":17,"party":"PARESH","dt":"11/5/2015","weight":15000.0,"timestamp":"2015-05-11T20:19:55.093"},{"srno":18,"party":"SIM","dt":"11/5/2015","weight":11000.0,"timestamp":"2015-05-11T20:21:44.177"}]}
Please find the fiddle here after cleaning up the json
I changed the jQuery code to following.
$(document).ready(function () {
var data;
var webMethod = "../Service/DatabaseHandling.asmx/GetPurchaseJangad_JSON";
var parameters = "{}";
$.ajax({
contentType: "application/json; charset=utf-8",
url: webMethod,
data: parameters,
dataType: "json",
success: function (response) {
data = $.parseJSON(response.d);
console.log(data);
$("#grid").kendoGrid({
columns: [
{ field: "srno", title: "SRNO" },
{ field: "party", title: "PARTY" },
{ field: "dt", title: "DATE" },
{ field: "weight", title: "WEIGHT" }
],
dataSource: {
transport: {
read: function (options) {
options.success(data);
}
},
schema: {
}
}
});
}
});
});
What I did, is called that service via jQuery ajax. Got the data containing backslash and quotes. Then as in code, used $.parseJSON to get the required JSON format. Then passed that data to Kendo GRID after success. And thats how its working for me.
But still I am looking for a way to do this on server side, if possible.
Thanks
Related
I am new to MVC and facing a problem with accessing data via ajax in action of my ASP.NET Application.
Here is my Ajax Code:
$('.testBtn').click(function() {
$.ajax({
type: 'GET',
data: { id: 10 },
url="#Url.Action("GetData", "Consultation")",
success:function()
{
}
});
});
And here is my action inside the controller:
public ActionResult GetData(int id)
{
string x=id.ToStrring();
return null;
}
For testing I am just passing a static integer and getting its value inside my action.
On clicking the button I am getting the following error:
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult GetData(Int32)' in 'careshade_mvc.Controllers.ConsultationController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Here is working code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.testBtn').click(function () {
$.ajax(
{
url: 'Consultation/GetData',
type: "POST",
data: { id: 10 },
success: function (result) {
}
});
});
});
</script>
</head>
<body>
<input type="button" class="testBtn" value="ClickHere" name="button">
</body>
</html>
Try this:
$(document).ready(function() {
var id = 10;
$('.testBtn').click(function () {
$.ajax(
{
url: 'Consultation/GetData/' + id,//instead data: { id: 10 },
type: "GET",
success: function (result) {
}
});
});
});
You need to use a colon(:) character after url not the equals(=) sign.
Simply change:
url="#Url.Action("GetData", "Consultation")",
To this:
url:"#Url.Action("GetData", "Consultation")",
This was the only change I had to make to make the call work.Hope it helps you!
I am currently using asp.net 4 with bootstrap 3 in my project, Here i used bootstap typeahead for autocomplete textbox so i want that once user select data from autocomplete list so that time it should do ajax call and angular kendo ajax call and should bind returned data in success event.
Below is my code:
updater: function (item) {
$('[id*=hdnHomeSearch]').val(map[item]);
populateSearchItem();
return item;
}
This is my typoahead method where i am containing textbox autocomplete selected data by user.
and in populateSearchItem method i want to call angularjs kendo grid which is below:
<script src="../scripts/jquery-1.11.3.js" type="text/javascript"></script>
<script src="../Content/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../scripts/angularjs.min.js" type="text/javascript"></script>
<script src="../Content/dist/js/kendo.all.min.js" type="text/javascript"></script>
<script src="../scripts/typoAhead.js" type="text/javascript"></script>
<div ng-app="app" ng-controller="MyCtrl">
<div kendo-grid k-options="gridOptions" k-rebind="gridOptions" k-pageable='{ "pageSize": 2, "refresh": true, "pageSizes": true }'></div>
</div>
<script type="text/javascript">
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function ($scope, $http) {
$scope.gridOptions = {
columns: [{ field: "EmployeeKey" }, { field: "FirstName"}],
dataSource: {
transport: {
read: {
type: "POST",
url: '<%=ResolveUrl("Search.aspx/GetData1") %>',
dataType: "json",
contentType: "application/json"
},
parameterMap: function (options, operation) {
return JSON.stringify(options);
}
},
pageSize: 5,
schema: {
data: "Data",
errors: "Errors",
total: "Total",
model: {
id: "EmployeeKey",
fields: {
EmployeeKey: { editable: false, defaultValue: 0 },
FirstName: { type: "string", validation: { required: true} }
}
}
}
}
}
});
</script>
but after using this getting error text in console that is angular modulerr.
so this script method i want to use inside populateSearchItem method.
All suggestions are welcome.
I am trying to implement manifest for one page. i don't have any idea how to implement the manifest, using below reference i implemented. but its not working.
http://www.codemag.com/Article/1112051.
My doubt: In local after implementing manifest even if visual studio not in debug mode, after refresh the page it should show the page right? here its not showing.
Please help how to implement manifest in mvc.
Here is the my code:
Home Controller:
public ActionResult Index()
{
Response.Cache.SetCacheability(
System.Web.HttpCacheability.NoCache);
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
return View();
}
public ActionResult Manifest()
{
Response.ContentType = "text/cache-manifest";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.Cache.SetCacheability(
System.Web.HttpCacheability.NoCache);
return View();
}
Index.cshtml:
<html manifest="#Url.Action("Manifest", "Home")">
<head>
<title></title>
<link href="~/Content/kendo/2014.2.903/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.903/kendo.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.903/kendo.dataviz.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.903/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="~/Scripts/kendo/2014.2.903/jquery.min.js"></script>
<script src="~/Scripts/kendo/2014.2.903/kendo.angular.min.js"></script>
<script src="~/Scripts/kendo/2014.2.903/kendo.all.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div id="grid"></div>
<button type="button" id="btnOfflineMode">Offline</button>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "Name" },
{ field: "Age" },
{ field: "NewCol" }
],
dataSource: [
{ Name: "John Doe", Age: 33 }
],
batch: true,
}).on('focus', function (e) {
var offset = $(this).offset();
var textarea = $("<textarea>");
textarea.css({
position: 'absolute',
opacity: 0,
top: offset.top,
left: offset.left,
border: 'none',
width: $(this).width(),
height: $(this).height()
})
.appendTo('body')
.on('paste', function () {
setTimeout(function () {
var value = $.trim(textarea.val());
var grid = $("#grid").data("kendoGrid");
var rows = value.split('\n');
var data = [];
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split('\t');
grid.dataSource.add({
Name: cells[0],
Age: cells[1],
NewCol: cells[2]
});
}
});
}).on('blur', function () {
});
setTimeout(function () {
textarea.focus();
});
});
$("#grid").attr("tabindex", -1).focus();
</script>
</body>
</html>
Manifest.cshtml:
CACHE MANIFEST
# version 1
CACHE:
/
/Content/kendo/2014.2.903/kendo.common.min.css
/Content/kendo/2014.2.903/kendo.default.min.css
/Content/kendo/2014.2.903/kendo.dataviz.min.css
/Content/kendo/2014.2.903/kendo.dataviz.default.min.css
/Scripts/kendo/2014.2.903/jquery.min.js
/Scripts/kendo/2014.2.903/kendo.all.min.js
/scripts/modernizr-2.6.2.js
FALLBACK:
/events /events.htm
NETWORK:
*
#{
Layout = null;
}
events.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Events</title>
<link rel="Stylesheet" href="/Content/style.css"
type="text/css" />
</head>
<body>
<section>
<h1>Events</h1>
<p>
The event listings are only available when
you are connected to the internet.
</p>
<div id="version">Version 1</div>
</section>
</body>
</html>
Try to create file site.maifest in the root folder of your site. And reference it in your html.
Like this
<html manifest="site.manifest">
Looks that it will be better to create your _Layout.cshtml logic and place common markup there.
I create an example where everything works good. Here it is on GitHub
Can someone explain me why this gives me an error?
My ajax call something like this.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$('#btn1').click(function () {
var values = JSON.stringify({ data: $('#form1').serializeArray() });
alert($('#form1').serializeArray());
$.ajax({
type: "POST",
url: "Default.aspx/Test",
contentType: "application/json; charset=utf-8",
scripts: true,
dataType: "json",
data: values,
success: function (data) { $('#results').append(data.d); },
error: function () { $('#results').append('hata'); }
});
}); });
</script>
</head>
<body>
<form runat="server" id="form1">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
<button id="btn1" type="button">bummm</button>
<div id="results"></div>
</form>
</body>
</html>
[WebMethod]
public static string Test (string data)
{
return "İşlem başarılı"+data;
}
It says me {"Message":"Type \u0027System.String\u0027 is not supported for deserialization of an array.","StackTrace":"
I think this happens because you wrong call your webmethod with ajax.
Your webmethod have one parameter named data with type string, but you try send without name, so try change your code like this:
var KaydetDataWithAjax = function (e)
{
var values =JSON.stringify({data: $(e).serializeArray()});
alert(values);
$.ajax({
type: "POST",
dataType: 'json',
contentType: "application/json; charset=utf-8",
url: "Harita.aspx/HaritaKaydet",
scripts: true,
data:values,
success: function (dt) { alert(dt);},
complete:function(){},
error: function () { alert('error'); }
});
};
UPDATE
this method work on new project
$.ajax({
type: "POST",
dataType: 'json',
contentType: "application/json; charset=utf-8",
url: "Harita.aspx/HaritaKaydet",
scripts: true,
data:JSON.stringify({data: 'text'}),
success: function (dt) { alert(dt);},
complete:function(){},
error: function () { alert('error'); }
});
if in your case it not work then possibly helps if you provide little more code
UPDATE 2
turns out it's all simple than i thought!
serializeArray() returns Array! So it find on server method with parameters something like List<object>, so to solve you must stringify array too
so try this code
var KaydetDataWithAjax = function (e)
{
var values =JSON.stringify({data: JSON.stringify($(e).serializeArray())});
alert(values);
$.ajax({
type: "POST",
dataType: 'json',
contentType: "application/json; charset=utf-8",
url: "Harita.aspx/HaritaKaydet",
scripts: true,
data:values,
success: function (dt) { alert(dt);},
complete:function(){},
error: function () { alert('error'); }
});
};
I am trying to load a JSON string into an EXTJS grid. The error i am getting is Uncaught TypeError: Cannot read property 'prototype' of undefined from ext-all-debug.js.
Here is my code for the js file.
$(document).ready(function () {
var store = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy(
{
url: 'http://localhost:3197/Home/GetSecondaryOfferings'
}),
reader: new Ext.data.JsonReader(
{
root: 'items',
totalProperty: 'totalCount',
id: 'id',
fields: [{name:'CUSIP', mapping: 'CUSIP'},'DESCRIPTION','COUPONRATE','ASKPRICE']
})
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ header: 'CUSIP', dataIndex: 'CUSIP'},
{ header: 'Description', dataIndex: 'DESCRIPTION', width: 100 },
{ header: 'COUPONRATE', dataIndex: 'COUPONRATE', width: 100 },
{ header: 'ASKPRICE', dataIndex: 'ASKPRICE', width: 100 }
],
renderTo: 'example-grid2',
width: 1000,
autoHeight: true,
title: 'Employees'
});
});
Here is a sample of the JSON file that is returned, it does get returned....
{"items":[{"CUSIP":"989701AL1","DESCRIPTION":"ZIONS BANCORPORATIONSB NT 5.65000% 05/15/2014","COUPONRATE":" 5.650","ASKPRICE":" 104.450"}],"totalCount":3316}
For good measure, here is the .cshtml file. I am using ASP MVC.
#{
ViewBag.Title = "About Us";
}
<h2>About</h2>
<p></p>
#section JavaScript
{
<link href ="#Url.Content("~/Content/resources/css/ext-all.css")" rel="Stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href=#Url.Content("~/Content/resources/css/ext-all.css") />
<link rel="stylesheet" type="text/css" href=#Url.Content("~/Content/examples/shared/example.css") />
<script type="text/javascript" src=#Url.Content("~/Content/bootstrap.js")></script>
<script type="text/javascript" src=#Url.Content("~/Content/examples/grid/FIO8472-JSON.js")></script>
}
<div id="example-grid"></div>
<div id="example-grid2"></div>
Any Help is appreciated.
You are launching the javascript code using jQuery. ExtJS has its own code launcher. Your code needs to be within onReady() method.
Example:
Ext.onReady(function() {
var store = new Ext.data.Store(
.
.
. // rest of your code
});
Since you are using ExtJs4, try the new MVC application architecture as well.
your store need a model
like this :
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
look a this exemple of the New store définition in extjs 4 '( from simple app example)
and try use MVC application architecture
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: 'data/users.json',
update: 'data/updateUsers.json'
},
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
}
});
hope that help