The kendoUI grid uses HttpGet requests to update the data during an AJAX request. (http://www.kendoui.com/documentation/asp-net-mvc/helpers/grid/ajax-binding.aspx) The server returns a Json result, and, in order to get it to work, we need to use the following code:
return Json(Result, JsonRequestBehavior.AllowGet);
That does the job just fine, but it's a security vulnerability (that's why Microsoft makes us put the "AllowGet" in there).
The safe way to return the Json would be in an HttpPost, but the kendoui grid doesn't allow it.
I want to use the kendoui grid. Is there a way to use the HttpGet, return Json, and do it securely?
Thanks!
If you are using the MVC wrapper of the Kendo Grid this would not happen. There the grid is configured to make POST requests because of this ASP.NET MVC behavior. Make sure you have included kendo.aspnetmvc.min.js though. More info can be found in the docs.
The kendo datasource uses GET by default when using ajax, but it is possible to use POST by defining the transport settings to post.
Here is a shortened version of the code at a Telerik kendo CRUD example using post.
<script>
$(function () {
$("#grid").kendoGrid({
toolbar: ["create", "save", "cancel"],
dataSource: {
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true } }
}
}
},
transport: {
create: {
url: "Products.svc/Create",
contentType: "application/json; charset=utf-8",
type: "POST"
},
read: {
url: "Products.svc/Read",
contentType: "application/json; charset=utf-8",
type: "POST"
},
parameterMap: function(data, operation) {
if (operation != "read") {
return JSON.stringify({ products: data.models })
}
}
}
}
});
});
</script>
Related
I use Model.save to save data from the ExtJs form. Sometimes server returns operation status in following format:
{"success": false, "error": {"name": "Invalid Name"}}
The following code sends data from form to server:
var model = formPanel.getRecord();
model.save({
callback: function(record, operation, success) {
// operation.response is null,
// and success === true
// how to read server response here?
}
})
Server response is treated as successful because HTTP status is 200. So I I have to read server response to check operation status. But operation.response is null in callback function.
Here is my Model:
Ext.define('My.Model', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name: 'id', type: 'auto'},
{name: 'name', type: 'auto'}
],
proxy: {
type: 'rest',
url: 'api/v1/models',
appendId: true,
reader: {
type: 'json',
},
writer: {
type: 'json'
}
}
});
Question: how can I access server response after Model.save's call?
More generic question: is it semantically correct to use Model.load or Model.save to populate/save the ExtJs form?
I'm using ExJs 5.0.1.1255.
I created some simple test code for this:
var Clazz = Ext.define('MyModel', {
extend: 'Ext.data.Model',
proxy: {
type: 'rest',
url: 'api/v1/models'
}
});
var instance = Ext.create('MyModel', {
name: 'MyName'
});
instance.save({
callback: function(record, operation) {
}
});
The server responds with:
{
success: true,
something: 'else'
}
You can see this in a fiddle here: https://fiddle.sencha.com/#fiddle/fhi
With this code, the callback has a record argument, and record.data contains the the original record merged with the server response. In addition, you can do operation.getResponse() (rather than just operation.response) to get full access to the server's response.
In regard to your question on load vs save, if you use view models and bind the model that way, it kind of becomes moot as your form should always reflect the state of the model.
Using model.save() and Model.load() is definitely the correct thing to do.
In addition to providing a custom callback, you should investigate configuring a custom proxy. In a custom proxy, you can provide your own implementation of the extractResponseData method. This would let you centralise your need to examine the server response.
I have the following code. When fetching the value selected, it works fine. But if I try put the selected value in any condition, it falters. the code crashes.
var onAcctMgrSelect = function (e) {
// access the selected item via e.item (jQuery object)
ddAMList = $("#ddAM").data("kendoDropDownList");
if (ddAMList.value() == "0")
$("#btnSearch").attr("class", "k-button k-state-disabled");
else
$("#btnSearch").attr("class", "k-button");
///alert(ddAMList.text());
checkValidData();
};
DropDownlist Code is as below:
function loadAccountManagers() {
$("#ddAM").kendoDropDownList({
change: onAcctMgrSelect,
dataTextField: "AcctMgrFullName",
dataValueField: "Id",
dataSource: {
schema: {
data: "d", // svc services return JSON in the following format { "d": <result> }. Specify how to get the result.
total: "count",
model: { // define the model of the data source. Required for validation and property types.
id: "Id",
fields: {
Id: { validation: { required: true }, type: "int" },
AcctMgrFullName: { type: "string", validation: { required: true} }
}
}
},
transport: {
read: {
url: "../services/Prospects.svc/GetAccountManagers", //specify the URL which data should return the records. This is the Read method of the Products.svc service.
contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
type: "GET" //use HTTP POST request as the default GET is not allowed for svc
}
}
}
});
I'm basically trying to disable the submit button if the first item is selected (which is a blank item in my case with a value of '0').
Am I going wrong anywhere? Please help!
I have a Store that need to load DataView,
I used Dummy Data until today and it work just fine,
I want to use a web page to load the data.
my store code is:
Ext.define("myApp.store.myStore", {
extend: "Ext.data.Store",
alias: "widget.myStore",
model: "myApp.model.myModel",
proxy: new Ext.data.HttpProxy({
type: 'ajax',
method: 'post',
url: 'URL'
}),
reader: new Ext.data.JsonReader(
{
type:'json',
rootProperty:'Results'
}),
autoLoad: true,
config: {
sorters: [{ property: 'MyProp', direction: 'ASC'}],
grouper: {
sortProperty: "MyOtherProp",
direction: "ASC",
groupFn: function (record) {
if (record && record.data.MyOtherProp) {
return record.data.MyProp;
} else {
return '';
}
}
}
}
});
In Firebug I can see that the result is 0 items (and the url have 2 items..)
What am I doing Wrong??
Thanks!
You may need to set the URL to a specific location.
I am doing a kendo mobile application and I'm trying to bind data from database for listing using json call. I tried with the following code,but its not working Pls help me with this...thanks in advance...
my code is here:
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
type: "POST",
url: "WebService/listing.php",
contentType: 'application/json; charset=utf-8',
datatype: "json"
}
}
});
dataSource.bind("change", function () {
$("#content").html(kendo.render(template, dataSource.view()));
});
dataSource.read();
console.log(dataSource.view());
});
You could try to use the changefunction of the dataSource directly:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
type: "POST",
url: "WebService/listing.php",
contentType: 'application/json; charset=utf-8',
datatype: "json"
}
},
change: function() {
$("#content").html(kendo.render(template, this.view()));
}
});
Just some things to consider:
I'm assuming your JSON is correct
You're sure you use POST to get the data
your template is as well defined correctly
You're calling dataSource.read() AFTER the data is loaded (to make sure you're doing this, call read() within $(document).ready(function(){dataSource.read();}); and define the dataSource itself first
I guess the last point is the most crucial ;)
That's all I am doing, so if it doesn't work that way there might be some mistake in the data format itself or in the template definition. Anything like console errors?Cheers
I am using jQuery UI Autocomplete plugin for better data input in my ASP.NET web application.
http://jqueryui.com/demos/autocomplete/
However, I think I have somehow lost in this plugin.
I would like to ask what I should do in order to use this autocomplete function with the data retrieve from database?
I expect Ajax should be used for the real-time search,
but I have no idea how it can be done after looking at the demo in the website above.
Thanks so much.
Update:
Here is the code I have tried, doesn't work, but no error in firebug too.
$('#FirstName').autocomplete({
source: function (request, response) {
$.ajax({
url: "/Contact/FirstNameLookup?firstName=",
type: "POST",
data: {
"firstName": $('#FirstName').val()
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.FirstName,
value: item.FistName
}
}));
}
});
}
});
You need to create an action that does the lookup and returns the result as a JsonResult
e.g.
public ActionResult FirstNameLookup(string firstName)
{
var contacts = FindContacts(firstname);
return Json(contacts.ToArray(), JsonRequestBehavior.AllowGet);
}
I'm not sure if this will solve all your problems but here are a couple of edits you can make.
you don't need the "?firstname=" part of the url since you are using the data parameter for you ajax request.
rather than grabbing your search term with $('#FirstName').val(), try using the term property of the request object (request.term).
for example:
$('#FirstName').autocomplete({
source: function (request, response) {
$.ajax({
url: "/Contact/FirstNameLookup",
type: "POST",
data: {
"firstName": request.term
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.FirstName,
value: item.FistName
}
}));
}
});
}
});