[RESOLVED]specific need for tutorial or examples of java script in web forms.

I have a specific need to learn the best way to include java script in ASP.net WEB FORM pages.

I have already performed the obvious script calls using the Client Register StartUp script and experience with passing session values to java script functions.

I am looking for tutorials with more elaborate uses of a .js file that basically populates java script page content within a web form.

Any links or tutorials would be greatly appreciated. My search has gone on for a few days now, and nothing seems to fit my needs. There just doesn’t seem to be a great deal of material.

One example of the requirement is the use of the client side index DB to transfer blocks of data, rather than constant postbacks as is so common with ASP.net when displaying records synchronously.

It sounds like you are looking into using AJAX to make requests, as these will allow you to access information from your server-side code (such as Session values) from your client-side Javascript code.

An example of using this that involved jQuery might look like the following example.

I suppose you could define two WebMethods within your Example.aspx page and then make AJAX Requests to either set or retrieve the value from the Session :

[WebMethod]
public static string GetSessionValue(string key)
{
     return Session[key];
}

[WebMethod]
public static string SetSessionValue(string key, string valueToStore)
{
     Session[key] = valueToStore;
}

This way if you needed to retrieve a Session key through AJAX, you could use :

$.ajax({
            type: "POST",
            url: "Example.aspx/GetSessionValue",
            data: '{ key: "YourSessionKey" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                  // Grab your Session value here
                  alert("The Session value for YourSessionKey is " + data);
            }
});

or if you needed to set one :

$.ajax({
            type: "POST",
            url: "Example.aspx/GetSessionValue",
            data: '{ key: "YourSessionKey", valueToStore: "Example" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                  alert("The Session value for YourSessionKey has been set!");
            }
});

You could define areas within this same scripts and instead of performing an alert, you could set the value for a particular field :

success: function(data) {
        $("#IDOfYourControl").val(data);
}

You can find some additional AJAX and Javascript related tutorials / walkthroughs below :

It’s best to have a reasonable understand of Javascript if you are planning on using AJAX directly, although there are several different ways to get around this (using the jQuery framework for instance greatly simplifies
this process
) or by using a series of AJAX-based Controls like the AJAX Control Toolkit which automate much of the process for you, but only for certain tasks.

You can use many of the resources listed below if you want to get more familiar with Javascript or with other associated technologies :

Thanks Rion,

I have seen many of your posts and appreciate your feedback. But I think I wasn’t clear enough in my sample. A key factor in the process I am working on is that I would like to display a chart or graph or map.

I set this up with AJAX and it works, but because of the amount of data, the postbacks flicker and there are large amounts of data being transferred, all within the .net aspx environment.

In a php environment with javascript, the indexDB is populated and the chart or graph refreshes from the local PC rather than a postback. The initial download may pull down 1000 records, then after playing back 750, the next 1000 are retrieved. In this instance
we are playing back recorded data at a 1 second interval, that may have been record in 100 millisecond interval. Both of these values may change by user selection or based on the recorded data was captured.

The same logic might apply to a Google map as a marker travels a recorded route and plots the path of the route taken on the map.

Again, I have this working in an ASP environment, its the Postback refresh that is killing the visual.

I am hoping to learn more about how to take advantage of the indexDB with asp.net.

Hi,

Maybe this is because you are trying to search that in conjonction with ASP.NET? When you are client side the server side technology doesn’t matter much. So for example something like
http://www.html5rocks.com/en/tutorials/indexeddb/todo/ doesn’t deal at all with that. You can even  do ajax request etc… and you end up in the ASP.NET land only when you’ll deal with providing
the server side endpoints for those AJAX calls…

So here it seems you should just focus on how to use indexDB (which is unrelated to using PHP, ASP, ASP.NET or whatever server side).

The current situation is a bit confusing. It seems you have done something like this previously with PHP or that you "set this up with AJAX and it works" but still you have "postbacks flicker" ??? Do you actually SEE postbacks? Could it be for example rather
a graphic rendering issue or whatever?

If you’re talking about postbacks and flickering it sounds like you’re not using ajax after all.  Are you doing this via your own javascript or via an update panel?

I agree with Aidy.

One of the major benefits of AJAX requests is that you shouldn’t be seeing any PostBacks occur (that are related to your AJAX calls). Otherwise, it would simply be a page that is just refreshed every x seconds and uses the same data store to persist
the previous data between postbacks.

Another consideration, which might just be a shot in the dark, but it sounds like a system like yours may be able to benefit from a real-time technology like
SignalR, which could handle graphically mapping your results in real-time and presenting them to the user. Brij has a
very basic example demonstrating this functionality here that could be worth reading.
Ravi Kiran has another more detailed article with SignalR real-time charting using the popular d3.js library as well.

Thanks for the feedback I’ll check these out. FYI the dataset is 5000 records with 400 parameters per record.

Not ideal, and foolish IMHO for web analysis. a sub set would be much more practical. I have reviewed SignalR extensively, currently our platform does not support it, primarily on the data collection side.

AidyF Its an update panel.

The issue is fully related to the volume of data transfer and the javascript refresh and graph and map renderings. The javascript solution works well but it is static test data not live.

An updatepanel isn’t going to perform as well an ajax call to a webservice or similar, if you’re having performance issues I’d look to re-architect it away from updatepanels and onto custom javascript.

Thanks for you input.

Note that is the gist of the original post, and the link you provided is one I spent much time reviewing. I was hoping that there was some sort of ASP.net integration of the indexDB that I could glean for design ideas.

thanks again, it always helps to bounce ideas off of others.

Leave a Reply