I have a webform called "Home.aspx".
In Home.aspx.cs, I created an array called myArray.
I want to use this array in Home.aspx to generate a word cloud.
something like below:
<script>
$('#wordcloud').jQCloud(myArray,{shape: 'rectangular'});
</script>
Can someone help me in solving this.
First, you don't want to put the C#-generated array onto your aspx page, because that array is a C# object, and javascript needs to be sent as text. You want to put a string output of the array onto the page. So you should create a string as a protected property in your code behind, and put the string of the array into that.
Then, on the front end, you can write the protected property onto the page with <%= myString %>
There are a couple of ways to achieve it.
Let server side code generate the whole JavaScript for you, which
means you will need to construct the JS code as a string in the
code-behind (.aspx.cs page) then use
ClientScriptManager.RegisterStartupScript method to register it so
that JS code will be executed when page loads.
Use server side script tag on your ASPX page. It's like point 1 but you write server side code on your front page.
Apply JS serialization and let the serialiser generate the JS array for you.
Below is an example of using a serialization approach.
<%
// create you array here
var myArray= new string[]{"apple", "orange"};
var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
%>
Then what you need is to place above code on your ASPX page, before your JavaScript code block.
<script>
var myJsArray = <%= serializer.Serialize(myArray) %>;
$('#wordcloud').jQCloud(myJsArray, {shape: 'rectangular'});
</script>
One thing to remember though, the server side array object and client side javascript array are two different things. The serialization/deserialization is required to allow data/array of data to be passed between browser and web server.
Related
Im creating a page generator for ASP page. It takes XML input, and then converts it into ASPX representation.
During the process of conversion, here's some code i used,
var page = new Page();
var pnlUpdate = new UpdatePanel();
page.Controls.Add(pnlUpdate);
Theoritically, it should creates ASP file like this,
<% Page ...>
....
....
<asp:UpdatePanel>
</asp:UpdatePanel>
How do i get the source representation of my programmatically created page object? Using Filter or catching the HttpRespose output gives me the parsed HTML output, not the ASP one.
To my knowledge there is no code in .Net Framework that will convert control tree into APSX page.
You can write your own version (especially if you have very limited set of allowed control/properties) by walking control tree and generating ASPX as you go. Note that you'd need to know what properties are changed from default values...
It probably would be easier to go directly from XML to ASPX, you may be even able to have XSLT transformation to do so.
In Razor I can do this:
<p #Html.MyCustomDataAttributeFor(person) >#person.Name</p>
To render something like this:
<p data-custom-person-id="1234567890" >Fred</p>
Must I really then do this in (unobtrusive) JavaScript:
$('p[data-custom-person-id="1234567890"]').css('background-color','red');
When I'd prefer to do this:
$('p[#Html.MyCustomDataAttributeFor(person)]').css('background-color','red');
If only I could, otherwise should the data attribute generated by the HTML helper change, my client side code will no longer style the element.
Could you point the script to a .cshtml-file?
<script type="text/javascript" src="/myscript.cshtml"></script>
I think I've done this for both .php and .aspx so I don't see a reason it shouldn't work.
In those cases it makes the server first process the file.
Otherwise you could use a customer HttpHandler that parses whatever text you want server-side before it's sent to the client.
The easiest however, would be to set some Javascript variables from Razor, ie:
<script type="text/javascript">
var customerId = '#Html.MyCustomDataAttributeFor(person)';
</script>
And then write:
$('p[' + customerId + ']').css('background-color','red');
data-custom-person-id="1234567890" is rendered to the browser after server has converted #Html.MyCustomDataAttributeFor(person) to that value. On the client side you will not be receiving these text at all. So, you cannot use those statements for client side styling.
I have two columns of data in an Database on MS SQL Server. One is datetime variable and another is an int.
Im trying jQuery and Flot to plot the datetime vs int.
I can programatically get the data from SQL Server using C#. But how do I pass it to the JavaScript File which has the vars for flot?
If you want to call a script in a loaded html document, you can use the Invoke method from the appropriate HtmlDocument or WebBrowser object to call a javascript function within that page, for example:
http://msdn.microsoft.com/en-us/library/system.windows.controls.webbrowser.invokescript.aspx
I am unsure how you would pass the data from c# to a *.js file in your case, I dont think its possible. But you could try a hack on the page that contains the *.js include you could try declaring and setting the javascript variable to the c# code (so in the ASPX, if its ASP.NET) and then putting the *.js include reference after that point and in it not re-declaring the variable but using it. You can also use JSON or AJAX to call server side code and return values and execute code.
Scenario 1: (The hack way, which is not clean and hard to maintain but does the job)
File.aspx
<script language="javascript" type="text/javascript">
var MyVariable = "<%=C_Variable_On_Code_Behind%>";
</script>
<script type="text/javascript" src="/scripts/YourJsFile.js" >
</script>
YourJsFile.js
if(MyVariable != null && MyVariable.length > 0){
//Do some thing.
}
Scenario 2: (JSON, AJAX, JQUERY UI)
jquery ui sample for a autocomplete: try this link
Another example: Or this link
Scenario 3: (Writing to the client from server-side c#)
Use RegisterStartupScript or RegisterClientScriptBlock via the ClientScriptManager object, here is a dummy code I put together so you can look them up and have an idea so you can find out more, this is not meant to be full code.
ClientScriptManager script = Page.ClientScript;
if (!script.IsClientScriptBlockRegistered(this.GetType(), "YourLabelForThis"))
{
script.RegisterClientScriptBlock(this.Page.GetType(), "YourLabelForThis",
"<script type=\"text/javascript\">var MyVariable = "Dummy text";</script>", false);
}
Please note you have to place the js code as an include or further code in the right position in the page whther you want it before or after this code, so lookup RegisterStartupScript or RegisterClientScriptBlock via the ClientScriptManager. To see where your code will be placed and how you should handle it. Also look at the page source in your browser to also see it.
I want my codebehind to dump a very large set of JS into the ASPX page. This is required, as I can't use external JS code for this component, and the code is also unique to each customer. Is it possible to do this from codebehind? I know how to set the value of text boxes etc. (.Text/.Value = xxx) but I can't see how I can just 'dump' code straight onto the page.
have a look at Page.ClientScripts.RegisterStartupScriptBlock or RegisterScriptBlock, these method do exactly what you need.
Try using RegisterClientScript:
http://www.codeproject.com/KB/aspnet/Register_Client_Script.aspx
set a string variable into code behind and then add to the page just
<%= variableName %>
where you want your js code to be dumped to
Or if you like you can create a method and do the same thing
<%= methodName() %>
I have a page that is referenced via a <script> tag from a page on another site. In the script src, I pass in the form I want my script to build (from a db table), and the div where the dynamically built form should go. The calling page looks something like this:
<div id="FormContainer"></div>
<script type="text/JavaScript" src="http://www.example.com/GenerateForm.aspx?FormId=1&div=FormContainer"></script>
GenerateForm.aspx contains the code that reads the QueryString parameters for the FormId, and the Div Id, and outputs JavaScript that will build the form.
My question is this. What are the different methods for "outputting" the JavaScript? Some of the JavaScript is static, and can be packaged into an external .js file and I have jQuery too. But should I add that on the GenerateForm.aspx markup page? Or should I use a ScriptManager?
And what about the dynamically built JavaScript? Currently I'm just using Response.Write() for a proof of concept, but instead, should I be doing something else? Use a Literal control on the page and set its value? Use a ScriptManager? Something else?
I know this is a verbose question, so thanks in advance!
If you want to use a seperate, referenced Javascript file, you probably want to do is use an ashx file. Basically this is just a generic handler that you'll use to write directly to the output stream without having to deal with the ASP.NET page lifecycle. If you add a basic Generic Handler (.ashx) to your site from the Add New Item dialog, the template should be enough direction, using context.Response.Write() to output your Javascript dynamically.
The ScriptManager is more useful if you want to output individual lines of Javascript to be ran at certain times, like after an event has fired. Then you can do ScriptManager.RegisterClientBlock(this, this.GetType(), "CodeBlock", "alert('Button clicked');", true); to show a client alert box after a button has been clicked, for example.
Static files should be handled just that way - statically. The server can handle the caching, and does not cause unnecessary processing if you reference the static script file directly from the script tag. However, if you need to load a static script dynamically, you could, for example, create a literal that had the <script> tag inside it. This way it uses the browser's cached version of the static file.