How to pass value to javascript from code behind page? - asp.net

I have web application where i want to call one method on body onload method.
I have method like this
<body id="pageid1" onload="SetupFeaturedProperty(1,['http://www.brightlogic-estateagents.co.uk/MRUS/upload/918-1.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/918-2.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/918-3.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/918-4.jpg']);SetupFeaturedProperty(2,['http://www.brightlogic-estateagents.co.uk/MRUS/upload/665-1.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/665-2.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/665-3.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/665-4.jpg']);SetupFeaturedProperty(3,['http://www.brightlogic-estateagents.co.uk/MRUS/upload/38-1.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/38-2.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/38-3.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/38-4.jpg']);SetupFeaturedProperty(4,['http://www.brightlogic-estateagents.co.uk/MRUS/upload/122-1.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/122-2.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/122-3.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/122-4.jpg']);SetupFeaturedProperty(5,['http://www.brightlogic-estateagents.co.uk/MRUS/upload/1076-1.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/1076-2.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/1076-3.jpg', 'http://www.brightlogic-estateagents.co.uk/MRUS/upload/1076-4.jpg']);">
And the arguments of these method can be change in after some time.
I want to pass the argument when my page is loaded.
I have tried lot of method to pass the argument from code behind page to this page but it's not working.
Please let me know a better solution for this.
Thanks

use this:
Page.ClientScript.RegisterStartupScript(this.GetType(), "myScript",getScript(),true);
and then:
private string getScript()
{
return "SetupFeaturedProperty(etc,etc,etc);";
}
If you are using UpdatePanels use the ScriptManager class instead of Page.ClientScript

There are multiple ways to do this. You can register the scripts using the RegisterClientScript method. You can make the body tag a server control and set it's onload attribute in the code behind or you can use Literal tag. However the method I find most clean is creating a JS variable and assigning it's value with a serverside code then using this variable in your JS code:
<script> var someVariable = <%= SomeProperty %>;</script>
Make sure that you define properties in your page and not move all your code behind in the markup.
Another good approach is to define a function for your event that takes the element as an input (pass this as the argument) and then attach the actual arguments as different attributes to the element.
<body runat="server" id="body" onload="onLoad(this)" data-someArg="someValue">...
You can set the attributes from your code behind like this
body.Attributes["data-someArg"] = "someValue";
This will be invalid in HTML4 but will work fine in all browsers and it will be valid in HTML5 as long as you prefix the attribute name with data-

Use ClientScript.RegisterStartupScript. Check MSDN:
MSDN - Javascript and ASP.NET 2.0
MSDN - ClientScript.RegisterStartupScript

One way to do it is to setup a Literal tag in your javascript. For example:
function somemethod()
{
var number1 = 10;
var number2 = <asp:Literal ID="litNumberFromCode" runat="server"/>;
alert(number1 + number2);
}
Then in your code behind access that control like any other:
litNumberFromCode.Text = 15;

Try using inline c# <% %> with your values printing

Related

how to assign a control property value from a global variable in page code?

Greetings,
I have a control and list of variables and I want in the control property to be assigned to the variable value directly in the page not from the back code, something like this
My global variables
public string Banana = "banana_pie";
public string Apple = "apple_pie";
in my custom control instead of:
<uc:LoadPie id="pieBanana" type="banana_pie" />
To this
<uc:LoadPie id="pieBanana" type="<%=Banana %>" />
so is there a way or just assign the property in page back code.
Thanks
You can do it like this using data binding syntax.
<uc:LoadPie id="pieBanana" type='<%#Banana%>' runat="server"></uc:LoadPie>
But then in your code behind you have to call
pieBanana.DataBind();
in the page load in order for the databinding expression to be evaulated.
But if you are going to do this then you might as well assign the property in the page load.
I think you should go with a property (protected should be enought, but I'll say public in the following snippet) in your code behind:
Public Property myBanana() As String
Get
Return Pies.Banana;
End Get
End Property
Then you can use it in your controls, for example:
<uc:LoadPie id="pieBanana" type="<%= myBanana%>" />
Not quite what you want, but how about:
<% pieBanana["type"] = this.Banana %>

How to set focus to a web control in ASP.NET

Question: What is the best way to set focus to a web control in ASP .NET.
I can do it, but it's ugly. I have a web control wrapped in a web control hosted on a web page. So, if you do a view | source on the page the id is something like WrapperControl_Control_TextBox.
I've tried the "tried and true" Javascript methods of grabbing the element and setting it's focus: document.getElementByID( "WrapperControl_Control_TextBox" ).focus(); and it didn't work. I'm not sure why.
I know I could possibly do:
document.getElementById( "<%= TextBox.ClientID %>" ).focus(); too, I think. This won't work because of another totally separate error based on the fact you can't dynamically add controls to a header if there is a "<% %>" in the page. GAH.
In the "bottom-most" control, I've tried setting the focus (TextBox.Focus() in Page_Load) and that doesn't work either.
Anyway, the way that works is by simply taking the ControlsCollection of the Page, grabbing the control I need from that, getting it's collection, grabbing the next lower control and so forth.
I only have to do this seven times. So I have eight foreach loops.
Basically, my code is like this:
///////////////////////////////
// On the page
///////////////////////////////
ControlCollection controls = Controls;
foreach( Control control in controls)
{
if ( string.Equals( control.ID, "FormID", StringComparison.InvariantCultureIgnore ) )
{
ControlCollection nextControls = control.Controls;
foreach( Control nextControl in nextControls )
{
if ( string.Equals( nextControl.ID, "DivICareAboutInTheForm", StringComparison.InvariantCultureIgnor ) )
{
ControlCollection nextNextControls = nextControl.Controls;
//:
//:
//Yes, it's that bad and so forth.
//:
//:
}
}
}
}
You can use jQuery to do a search for IDs that end with your textbox name. This way you wont have to call the UniqueID server-side code. Just make sure not to have multiple controls that end with the same name
<script type="text/javascript">
$(document).ready(function() {
$('[id$=txtBox]').focus();
});
</script>
Or, you can use a Class name for the default text box.
<asp:Textbox ID="txtBox" runat="server" cCssClass="defaultTextbox" />
jquery:
$('.defaultTextbox').focus();
You can get around the "cannot add dynamic controls because a <%= %> block exists on the page" error by changing the block to use databinding syntax: <%# TextBox.ClientID %>, and manually calling Page.DataBind() in Page_Load.
If you really want to use the Page_Load method, then you could always call the SetFocus method on the Page object.
Page.SetFocus(myTextBox);

ASP.NET setting a javascript, jQuery setting from my code behind

I would like to set a value:
$('#swfupload').swfupload({
upload_url: "uploadResume.aspx",
file_post_name: 'uploadfile',
post_params : {"session_guid" : [HERE]}
});
...where [HERE] is the placeholder for my value, from my code behind in ASP.NET before the page is rendered. I generate a guid, and I need that apart of the script on the page. How can I accomplish this?
Thanks,
George
if it's a public or protected variable you can do
'<%= session_guid %>'
where session_guid is the name of your public or protected variable.
IF the script is IN the markup just use <%= sessionGuid %>, if the script is included then set a var in a preceeding script tag and reference it in the upload.

inject code into masterpage / html head from a user control

I am struggling with something that I guess should be standard practice really. I have a number of user controls that use some JQuery plugins. I do not really want to link to the extra CSS and JS files from my main masterpage as this would cause extra load to the user the first time they hit the site, (admittedly it would only be the once), so I was just putting them links into the top of the user control. Then I looked at my source HTML, not nice! Even worse for controls that repeat multiple times on a page.
So I was thinking is there a way of injecting them into the Head of the page when they are needed from the User Control. For that matter is there a way of doing it to the footer for JS stuff?
To dynamically register a script (and ensure that duplicates are merged) in ASP.NET you can call:
Page.ClientScript.RegisterClientScriptInclude(
"mykey", "~/scripts/jquery-1.3.2.js");
And read the full details on this method on MSDN.
To add CSS dynamically you can do something like this:
HtmlLink cssLink = new HtmlLink();
cssLink.Href = "path to CSS";
cssLink.Attributes["some attr1"] = "some value1";
cssLink.Attributes["some attr2"] = "some value2";
Page.Header.Controls.Add(cssLink);
This example of injecting CSS will not merge duplicate entries. To avoid duplication you'll have to keep track of duplicates yourself. One place you can store a list of scripts you've already registered is in HttpContext.Items. Stick a HashSet in there that keeps a list of all registered scripts so that you don't register the same CSS file twice (which is generally harmless, but something to avoid anyway).
I followed a similar approach, but I use CSS directly in the user control so I don't have to import a CSS file. The following is code entirely from a sample user control:
<style id="style1" type="text/css" visible="false" runat="server">
td { font-family: Tahoma; font-size: 8pt; }
</style>
In code-behind:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
HtmlGenericControl style = new HtmlGenericControl("style");
style.Attributes.Add("type", "text/css");
style.InnerHtml = style1.InnerHtml;
Page.Header.Controls.Add(style);
}
You'll notice that the CSS is rendered in the head tag and not inside the body tag.
You can use ClientScript.RegisterClientScriptInclude() for the JavaScript.
For the CSS, one trick is to include them in your Master page, but with Visible="false", so that they aren't rendered into the markup by default.
Then, in your user controls, set a flag in the Items collection, from an early event, such as OnLoad(). For example, this.Context.Items["mycss"] = true;
Finally, in your Master page, from a later event, such as OnPreRender(), check to see if those flags are set. If they are, then set the Visible property to true for the corresponding CSS.
This also allows you to use the control with Master pages that don't use the CSS, since the Items entries could simply be ignored. If you have many Master pages that need the same behavior, you could put this code in a base class or use nested Master pages.
I assume you're using Asp.NET.
Try putting a content placeholder in the of the MasterPage...
<head>
<asp:ContentPlaceHolder ID="AdditionalPageHeader" />
</head>
If you're working in an aspx file or an ascx you need only define a content control...
<asp:Content ContentPlaceHolderID="AdditionalPageHeader" />
If you're working on a code-behind only type of server control, you can can get a pointer to that content place holder:
this.Page.Master.FindControl("AdditionalPageHeader")
... and manipulate it's contents programatically.
To add stylesheets or javascript (inline or not) dynamical I wrote these three functions:
Public Function addScript(ByVal path2js As String) As System.Web.UI.Control
Dim si As New HtmlGenericControl
si.TagName = "script"
si.Attributes.Add("type", "text/javascript")
si.Attributes.Add("src", path2js)
Return si
End Function
Public Function addScript_inline(ByVal js As String) As System.Web.UI.Control
Dim si As New HtmlGenericControl
si.TagName = "script"
si.Attributes.Add("type", "text/javascript")
si.InnerHtml = js
Return si
End Function
Public Function addStyle(ByVal path2css As String) As System.Web.UI.Control
Dim css As New HtmlLink
css.Href = path2css
css.Attributes.Add("rel", "stylesheet")
css.Attributes.Add("type", "text/css")
css.Attributes.Add("media", "all")
Return css
End Function
I call them in page_load on my masterpage, like this:
Me.Page.Header.Controls.Add(modGlobal.addScript("script/json/json2.js"))
or
Me.Page.Header.Controls.Add(modGlobal.addStyle("style/flexigrid/flexigrid.css"))
Regards

How to Access ASP control located in a user control via JavaScript

Hi All,
I'm designing a user control, briefly it contains an asp:hiddenfield control, i'm going to access it via JavaScript function like this
function doAnyThing
{
var myVar = document.getElementById("myHiddenFiled");
}
but when I trace my code I found myVar assigned to null, does it matter
document.getElementById()
method is used in user control file (.ascx) or in regular (.aspx) file, taking into consideration it works in (.aspx) file correctly
You had to set by ClientID the final id of your control, that will depend by the structure of your page.
Try this:
function doAnyThing
{
var myVar = document.getElementById("<%= yourControlServerID.ClientID %>");
}
Obviously this function need to be placed in the .aspx file. I suggest you to switch to use a framework like jQuery, that allows you to retrieve controls by more sofisticate selectors. This case will be solved by:
$("[id$=yourControlServerID]");
and you can place your javascript code even in an external .js file.
to simplify you can use either:
JQuery
$("<%= yourControlServerID.ClientID %>"). ....
ASP.NET JavaScript annotation:
var myVar = $get("<%= yourControlServerID.ClientID %>");
the ASP.NET JavaScript annotation code is the same as:
var myVar = document.getElementById("<%= yourControlServerID.ClientID %>")

Resources