asp.net server control - avoid adding multiple javascript - asp.net

I created an asp.net Server control that derives from a LinkButton, and renders a small javascript function to the page.
I want to use this control many times on the page, but just want the javascript to be rendered once on the page. On the other hand, I rather not manually add it in a js file, because i don't want to have a chance of forgetting to add the js file in the future.
What will be the best way to go about doing this ?

Preventing duplication in client scripts
Use a registration method such as Page.ClientScript.RegisterClientScriptBlock(..). There are a couple of overloads but they all work in a similar fashion. It's smart enough to render the script only once no matter from how many control instances it's issued.
Microsoft remarks in the MSDN documentation:
A client script is uniquely identified
by its key and its type. Scripts with
the same key and type are considered
duplicates. Only one script with a
given type and key pair can be
registered with the page. Attempting
to register a script that is already
registered does not create a duplicate
of the script.
The MSDN docs also contain sample code such as this:
// Check to see if the client script is already registered.
if (!cs.IsClientScriptBlockRegistered(cstype, csname2))
{
StringBuilder cstext2 = new StringBuilder();
cstext2.Append("<script type=text/javascript> function DoClick() {");
cstext2.Append("Form1.Message.value='Text from client script.'} </");
cstext2.Append("script>");
cs.RegisterClientScriptBlock(cstype, csname2, cstext2.ToString(), false);
}
Other similar registration methods
Different methods can be used to register your client script in different ways - see each of the ClientScriptManager.RegisterClientScript*(..) methods in MSDN for more detail about each. They're all built to prevent duplication in the rendered page.
This gives you the freedom to output scripts at the control level without worrying or having to track or count scripts.
Edit:
The ClientScriptManager instance is accessed through the Page.ClientScript property.

You can use the Page.RegisterClientScriptBlock method.
Here is an example from the MSDN:
if (!this.IsClientScriptBlockRegistered("clientScript"))
{
// Form the script that is to be registered at client side.
String scriptString = "<script language=\"JavaScript\"> function DoClick() {";
scriptString += "myForm.show.value='Welcome to Microsoft .NET'}<";
scriptString += "/";
scriptString += "script>";
this.RegisterClientScriptBlock("clientScript", scriptString);
}
HTH

Any way to reference a script on a CDN and not have it duplicated multiple times? Or can I just not worry about it since it's just a pointer anyway and the browser is (?) smart enough not to load the same library twice?
In other words, suppose I want the following code inserted from a server control:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
If I use a RegisterClientScriptBlock I can use the IsClientScriptBlockRegistered method to not have the server control load it multiple times. But, the preceding code is likely to have been put on the page anyway by either another (different) server control or by the developer who wants to use jQuery for something outside of the server control.
How do I get the server control to not load the script if the developer already loaded it?

Related

Converting my existing code to PageObject design pattern with PageFactory

I'm creating tests using Selenium 2 Web Driver with C#.Net. After reading through a lot of the Selenium documentation, I am not sure if I'm followign the correct design pattern and feeling unsure on how to go about testing using PageObject design patterns.
here is my current code that I'm using on my page and its working
WaitForElement(By.CssSelector("input#ctl00_ctl00_signinControl_txtUsername")).SendKeys("abc123");
WaitForElement(By.CssSelector("input#ctl00_ctl00_signinControl_txtPassword")).SendKeys("password");
SelectElement select;
IWebElement selElement = WaitForElement(By.CssSelector("select#ctl00_ctl00_ddlGoTo"));
select = new SelectElement(selElement);
select.SelectByText("Homepage");
*<more code .....>*
also I have told that I can not use Select page element using pageFactory.
Do I need to change my code the way I have coded? any feedback would be great.
The idea of the page object pattern is to have an object that represents the page. You are essentially writing an API for how to interact with the page.
For example a login page object may have the following methods:
enterUserName(String userName);
enterPassword(String password);
clickLoginButton();
The person using the page object to interact with the page does not need to care about how selenium finds elements and interacts with them. If the id on a field changes you would just need to change the locator on the page object and would not need to change all tests that call the associated page object public method.

Request param missing on POST

I am re-writing an ASP.NET application and noticed a difference in behaviour ...
In my Page_Load event I have some code such as:
string id = Request["id"]
which gets the id param from the URL. On page load (ie a HTTP GET), this works as expected in both versions. I also have a button onclick event handler. Clearly, this performs a POST to the server, and also invokes the Page_Load handler. The difference is, that in the original version of the app, the id is successfully loaded from the request. In the new version of the app, id comes back as null. I have discovered that I need to use Request.Params["id"] instead, but am totally puzzled as to why Request["id"] works for POST requests in one app but not the other.
The only difference between the apps is that the first was created as File -> New Website and the second File -> New Web Application. I think this is what is causing the difference in behaviour, but am wondering why this subtle difference, and also if there is anything else I should be aware of between the 2.
Any advice greatly appreciated.
As you have mentioned, you have the id parameter coming through twice. This will be because you have one in the query string parameters and one in the form parameters. I'm not sure why this would be occurring in one web app and not the other, but you can make changes to your code to account for it in a more correct way.
If you view the source of the HTML in your browser, you will see that the action value for the form will be current pages URL, including the query string. This is why the first id is being sent through. Evidently, the second id is coming through via the form itself:
HTML Source of basic web form
<form method="post" action="Default.aspx?id=3" id="ctl01">
<input type="text" name="id">
</div>
There are a couple of things you can do here:
first off, I wouldn't use Request.Params["id"] for this, as it combines the query string, form, cookies and server variables into one collection. You should use Request.Querystring and Request.Form properties, based on what you require and when
In your Page_Load handler, use the Page.IsPostBack property to determine whether the page is loading for a GET or POST and use the Request properties described above.
Example of Page.IsPostBack usage:
protected void Page_Load(object sender, EventArgs e)
{
string id = string.Empty;
if (Page.IsPostBack)
{
id = Request.Form["id"];
}
else
{
id = Request.QueryString["id"];
}
}
I always use web applications project but the difference is compilation. Website has a dynamic compilation, which means that the first request will be slower and web app has pre-compiled release dlls.
Check this for pro's and con's : http://maordavid.blogspot.ca/2007/06/aspnet-20-web-site-vs-web-application.html

Can i read data from web.config using JQuery?

Can i read data from web.config using JQuery ?
Jquery is javascript that runs in your browser, your web.config resides on your server. If you want to expose data from your web.config, I think you should create some kind of webservice that you can call from the client side javascript to get the data you want.
If you would be able to directly read from the web.config file, then it would be a major security risk as the web.config file is often used for storing sensitive information like connection strings etc.
The best solution when using none aspx/HTML5 :
1.Create file "Web.config.js" (java script file) in the project root
2.Add ref to the JS in your HTML file
<script src="Web.config.js" type="text/javascript"></script>
3.add the key & val to the "Web.config.js":
var prmKEY = "myVal"
4.Access prmKEY from JQuery as global parameter
You can also store the data as a cookie in the OnPreRender(EventArgs e) or Page_Load(object sender, EventArgs e) (if your using the Page_Load() store the cookie in the if (!IsPostBack){} so your not storing it multiple times) and read it on the client side to use for whatever purpose. I usually store data such as this as session storage on the client side to use while the program is running.
Server side:
// **This works best if the property isn't a data structure, otherwise you will need to do**
// some data manipulation to get it to work right
Response.Cookies["FOO"].Value = MyApp.Properties.Settings.Default.FOO.ToString();
Client side:
sessionStorage.FOO = readCookie("FOO");
No, you cannot.
I found solution without making any web service :
1- building empty aspx page that in it's load read the data from web.config and write it in the page using Response.Write(**)
2- using JQuery to read the result from created page as follow :
$.get
(
"JQueryPage.aspx",
function(result) {
// .. set variable to result and use it
}
};
In Page Load event store the config value in hidden fields using Config Manager.
Retire from hidden fields using J query.
You can create a hidden textbox with variable on html and assign value from config file to it. Assign a id to the hidden control and grab details of that using jquery.
I'd assume you could read the value from your webconfig in your controller. Inject that value into your view and then use jQuery to retrieve that value. That would be the way I'd approach it. I'd place it in my appsettings element. Shown here how to get from your webconfig. https://msdn.microsoft.com/en-us/library/610xe886.aspx , then I would inject that into my view using Viewbag.

ASP.Net AJAX multiple pageLoad functions possible?

I have an ASP.Net control that injects a javascript pageLoad function. I also have a pageLoad function directly on the page. I can't seem to get them both to fire. Are you limited to only a single function with the same name in javascript?
Yes... Like most languages, JavaScript requires symbols to be unique within their scope. In JavaScript, if you create multiple definitions for a function within a given scope, then the last one to be defined "wins" - it will be as though the previous definitions never existed.
What you need to do, in order to make your redundant pageLoad function work, is to use the Sys.Application.add_load() method. Using it, you can attach as many handlers as you want to the page load event. What's more, you can use anonymous function to add in the add_load method. Doing this will guarantee you that there is no danger of to handlers with duplicate names. Example:
StringBuilder sb = new StringBuilder();
sb.Append("Sys.Application.add_load(");
sb.Append("function() { alert('page load'); });");
ClientScript.RegisterStartupScript(this.GetType(), "Page_Load", sb.ToString(), true);
You can as easily use the Sys.Application.add_load on the client side, you can even add the same handler more than once. This will result in firing the same function multiple times :)
I have to disagree with Shog9...
I know it's possible to have multiple $(document).ready(f(n)) calls in a single document, with each being called in turn when the DOM finishes loading. I don't believe that multiple calls to ClientScript.RegisterStartupScript() cause any issues either.

Multiple user controls and javascript

I include a JS file in a user control. The host page has multiple instances of the user control.
The JS file has a global variable that is used as a flag for a JS function. I need the scope of this variable be restricted to the user control. Unfortunately, when I have multiple instances of the control, the variable value is overwritten.
What's the recommended approach in a situation like this?
Some options are to dynamically generate the javascript based on the ClientId of the User Control. You could dynamically generate the global variable for example.
Another option and one I would recommend is to encapsulate the global variable and function within an object, then your user control can emit the JS to create an instance of that object (Which can be dynamically named thus letting you scope the object as you see fit).
Edit
I don't have a working code sample that I can share but, I have done this in a couple different ways. the easiest method is to do this in the markup of your user control.
<script language='javascript'>
var <%=this.ClientID%>myObject=new myObject();
</script>
Assuming your control has a clientId of myControl this will create a variable myControlmyObject.
Another way to do this would be to generate the script in the code behind you could register it using: Page.ClientScript.RegisterStartupScript().
I would recommend refactoring your code such that all the common JS logic is stored in one place, not in every UserControl. This will reduce the size of your page by a good margin.
You can pass in the id of the UserControl to the common JS method(s) to differentiate between the UserControls.
For the issue of limiting the scope of your 'UserControl' variable, you could store some sort of a Key/Value structure to keep your UserControl-specific value - the Key would be the UserControl clientID, and the value would be the variable that you're interested in.
For example:
var UCFlags = new Object();
//set the flag for UserControl1:
UCFlags["UC1"] = true;
//set the flag for UserControl2:
UCFlags["UC2"] = false;
To access them, you simply pass the ClientID of the UserControl in to the UCFlags array:
myFlag = UCFlags["UC1"];
On the server-side, you can replace the constant strings "UC1" or "UC2" with
<%= this.ClientID %>
like this:
myFlag = UCFlags["<%= this.ClientID %>"];
You can still use the <%= this.ClientID %> syntax here even though the bulk of the JS is in a separate file; simply set
UCFlags["<%= this.ClientID %>"] = value;
before the call to embed the JS file.
Well, if you have to keep with the current solution, you could rename your global variable to something like the following code, which should be in the .ascx file for your control:
<script type='text/javascript'>
var <%= this.ClientID %>_name_of_global_variable;
</script>
Where "this" is the asp.net control. That way, each control has a unique variable name, based off the client id. Make sure you update the rest of your javascript to use this new naming convention. The problem, it looks messy, and the variable names will become very long depending on where the control is embedded in the page.
Does that make sense? It should take minimal javascript modification to get it working.
I ran into same issue and below blog post solved it. Solution is to take Object oriented way for javaScript
Adding multiple .NET User Controls that use JavaScript to the same page

Resources