In a previous post Handsontable Grid - loading and saving data from aspx web page I solved the "ajax data transfer to the server for Saving" with help from Stephen B. Burris Jr, for which many thanks. I have been unable to get the reverse process to work - that is the loading of data from the server to the grid. I am using sample code from GitHub for the client-side javascript code, but what I am not clear on at all is how the data needs to be "packaged" in response to the ajax call. I would be very greatful if someone could show me the structure of the code-behind method. Below is the javascript code with the ajax call:
var handsontable = $container.data('handsontable');
$(document).find('button[name=load]').click(function () {
$.ajax({
url: "Default.aspx/getJSData",
dataType: 'json',
type: 'GET',
success: function (res) {
handsontable.loadData(res.data);
$console.text('Data loaded');
},
error: function () {
$console.text('Load error');
}
});
});
Have a look at this post
It is a working solution using WCF.
You haven't stated what technologies it needs to be, but I noticed the C# tag.
I hope it helps.
Related
Goal:
When you click on the row (1), new data shall display (3.) without the whole webpage will be updated/refreshed.
Problem:
1.
I need advice and I don't know where to find the funciton to display the picture number 2 and how to display the data and new object (3.) without update/refresh the whole webpage?
And
2
How do you create an icon to display loading picture?
Information:
- The page is based on ASP.mvc with C#
Use ajax functionality of either jquery or MVC ajax helpers.
You can find jquery ajax here.
and MVC ajax helper lib here
and here
you can make an ajax call to the server's websevice and it can return one of the well known web format (for e.g. json or XML). When the webservice call returns you can then "inject" the data in your html page with either javascript (dom manipulation) or using MVC helpers.
Here's one that could help..
http://www.asp.net/mvc/tutorials/older-versions/javascript/creating-a-mvc-3-application-with-razor-and-unobtrusive-javascript
You Can use jquery ajax which would call async action method(function). Data is returned the form of Json. You can write code to deserilize data and display it using jquery.
Create a Action method which would return JsonResult as viewresult as
public JsonResult GetJsonData()
{
return Json(new
{ testDataResult =TestDataResultObj.Data
JsonRequestBehavior
}, JsonRequestBehavior.AllowGet);
}
and write following jquery code:-
if (GetDataAsyc()) {
$.ajax({
type: "GET",
data: { testData: testDataResult },
url: url,// url of action method to be called asynch
dataType: "json",
cache: false,
traditional: true,
contentType: "application/json",
success: function (data) {
// on success assign testDataResult to messages //line
$("#MessagesLines").html(testDataResult .Html);
}
},
error: function () {
//Display error message
$("ErrorMsg").html("There was error whey trying to process your request")
}
});
}
Use ajax+PartialViews to update some page sections
i have this need.. I hope someone can give me a right advice !
i have to read the whole html content of a page using an ajax call, it is necessary that the client who is visiting my page is who that make this request to read the html content, and not my application (i mean using downloadstring method of c#)
After this, i need to read the response of the ajax call (in this case the html content of the page setted in the "url:" parameter of the ajax call) server-side (in my code-behind)
how i can do that? is possible?
Thank you for your help..
Stefano
Stefano,
You could get the html content through ajax using, for exemplo, jquery get like this:
$.get('ajax/test.html', function(data) {
//data is the html
});
After that you can make another ajax call sending the data to your "code-behind", as you can see in the complete code:
$.get('ajax/test.html', function(data) {
$.ajax({
dataType: "json",
data: "htmlData=" data
type: "POST",
url: '/code_behind.aspx',
success: function(response){
console.log(response);
}
});
});
I hope that this helps.
In my application ,I have a dropdownlist which is to be populated on button click.I tried some code which is working fine on document.ready but its not working on button click..
$(document).ready(function () {
$("#<%=btn.ClientID %>").bind('click',function () {
//
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "gridpaging.aspx/binddropdown",
data: "{}",
dataType: "json",
success: function (data) {
$.each(data.d, function (key, value) {
$("#ddl").append($("<option> </option>").val(value.UserId).html(value.UserName));
});
//
},
error: function (result) {
alert("Error occured");
}
});
});
});
Please let me know where i went wrong..Thanks in advance..
It looks like you are mixing up two techniques here. One is ejs: <%=btn.ClientID %>, which is a templating engine to serve up dynamic content. The other is your jquery. What may solve your issue is to add a class to that button, rather than relying on your btn.ClientID, and then use $(".myClass").bind('click', function() ...
See if that solves your problem. If not, I'll need a bit more information. Is the ejs being compiled on the server side or on the client side? Are you using backbone or some kind of front end framework that's compiling the ejs?
yourdeveloperfriend is almost right, except <%=btn.ClientID %> is not ejs, but asp.net snippet which is most probably used in the wrong place. I can imaging only one scenario in which this could work, and that is when this JS code is located in you aspx file, but most probably you have it in a separate js file. So do what yourdeveloperfriend said, and put a class on the button, and use that as a selector in your JS.
I also had this same issue and solved it by changing the id setting
$("#ddl")
to
$('#<%=ddl.ClientID%>')
I am currently working on asp.net project. I use oodle web service. Oodle provides result via URL. I use Link to get data from the URL.
From code behind I use following code to fetch the resultant string :
string url =
#"http://api.oodle.com/api/v2/listings?
key=TEST®ion=chicago&category=vehicle&format=json";
var jsonString = new WebClient().DownloadString(url);
Now , My problem is I use button click event to run that code. But is this through JavaScript ? Because If I use Javascript it will be easier to access my resultant data.
It looks like this API returns JSONP which means that you could consume it directly from javascript. For example if you use jQuery you could use the $.ajax() method:
$.ajax({
url: 'http://api.oodle.com/api/v2/listings?key=TEST®ion=chicago&category=vehicle&format=json',
type: 'GET',
dataType: 'jsonp',
jsonpCallback: 'jsonOodleApi',
success: function(result) {
alert(result.current.region.id);
}
});
Here's a live demo.
And if you don't use jQuery you could simply define a callback:
var jsonOodleApi = function(result) {
alert(result.current.region.id);
};
and then include a <script> pointing to this url:
<script type="text/javascript" src="http://api.oodle.com/api/v2/listings?key=TEST®ion=chicago&category=vehicle&format=json"></script>
Here's a live demo.
Obviously you could inject this script tag dynamically into the DOM whenever you want to invoke the API call.
You can make Ajax requests to the page through Javascrypt.
here's a tutorial on that
If you are using some JavaScript frameworks, like JQuery, those requests would be easier to make, as the AJAX requests are kinda not cross-browser compatible.
the JQuery version
What you want is an AJAX request. It it certainly possibly to do without libraries, but due to crossbrowser issues I would recommend using a library. With jQuery for example it could look like this (in a document ready part of script):
$("#idOfButton").click(function() {
$.get('string url= #"http://api.oodle.com/api/v2/listings?key=TEST®ion=chicago&category=vehicle&format=json', function(jsonString) {
alert('Data is now in variable jsonString!');
});
});
I normally use ASP.NET MVC 2, but there were some problems with it, so I began to work with ASP.NET MVC 2 + jQuery and everything works. But there is one problem, jQuery doesn't load my reponse. On the ASP.NET MVC side I'm redering a partial view and I also get the respone on the client, but nothing is rendered. How can I solve this?
Here is the jquery code:
function addCredential(state, id) {
var daten = getJson(state, id);
$.ajax(
{
type: "POST",
url: "/Account/SetCredential/",
data: daten,
dataType: "json",
success: function(partialView) {
$('#Credentials').replaceWith(partialView);
location.reload();
}
});
return true;
};
function getJson(state,id) {
var username = $('#username').val();
return {"username": username, "credential_id": id , "state": state };
};
The problem looks like location.reload();
That's reloading your page after you update it with AJAX, effectively returning it's state back to the way it was before you inserted the content with .replaceWith()
UPDATE: looks like you're using dataType: "json" and inserting that into the DOM? That's probably also a problem. If the view is being returned as HTML, you should replace that with dataType: "html"
#Konrad, try using the JSON2 library (http://www.json.org/js.html) to alert the "partialView" object in your success function to see what you're getting prior to reloading the page. Also, make sure $('#Credentials') is returning an object. When I run into issues when trying to select elements on the page, I usually check the length value of the jQuery object that is returned. If length = 0, then you're not getting the element.
UPDATE:
Also, if you're trying to inject HTML into $('#Credentials'), then partialView may not be the correct format. The success function accepts an object argument which comes from parsing of the responseText of the web method you called to get what you call partialView.
UPDATE:
Check http://encosia.com/2010/03/03/asmx-and-json-common-mistakes-and-misconceptions/ for more info using $.ajax. Lots of great info on this blog.
UPDATE:
This is how I use JSON lib to view the data that is returned.
alert(JSON.stringify(partialView));