Differences between ScriptManager and ClientScript when used to execute JS? - c#

Can somebody explain for me what the differences are between ScriptManager and ClientScript?
ClientScript works well when I use it in Button_Clicked event, but it doesn't work when I use it in the GridView_RowUpdated of a GridView. (The GirdView is wrapped inside an update panel). Then I tried ClientScript and it worked perfectly in this case.

You've pretty much identified the primary difference. The ScriptManager is meant to be used with async postbacks, which is why it works with the UpdatePanel. The ClientScript class is for synchronous postbacks. So, if you're going to be posting back from an UpdatePanel, be sure to use the ScriptManager instead of ClientScript.
ScriptManager

9 years after this question was asked, I'm finding myself doing some software archeology and I'm writing up my own notes about ASP.NET's idioms, hence this answer, which I hope actually answers the question, as I felt ShellyFM's answer was incorrect, as this statement: "ClientScript class is for synchronous postbacks" is untrue)
ClientScriptManager
The Page.ClientScript property exposes an instance of ClientScriptManager.
Each Page instance has its own single instance of ClientScriptManager.
ClientScriptManager stores a list of <script> elements. These <script> elements are automatically rendered inside the <asp:form runat="server"> element, located immediately after where ViewState controls are rendered in <div class="aspNetHidden">.
These <script> elements can be registered using different methods:
RegisterClientScriptBlock
RegisterClientScriptInclude
RegisterClientScriptResource
For example:
RegisterClientScriptBlock adds an inline script directly to the page.
// Page code:
this.ClientScript.RegisterClientScriptBlock( type: typeof(TestPage), key: " Script1", script: "function foo(){}", addScriptTags: true );
// *.aspx code:
<form id="form1" runat="server">
</form>
// Rendered result:
<form method="post" action="./TestPage.aspx" id="form1">
<div class="aspNetHidden"><!-- ViewState is rendered here --></div>
<script type="text/javascript">function foo(){}</script>
</form>
RegisterClientScriptInclude will add a <script src=""></script> element without any inline script:
RegisterClientScriptResource will add a <script> that gets its content from an <EmbeddedResource> from a .NET Assembly's GetManifestResourceStream. The script is referenced using src="/WebResource.axd?d=..." instead of being rendered inline.
The /WebResource.axd file doesn't exist in your filesystem. It's a reserved URL pattern that ASP.NET handles by itself by-default.
The Page.BeginFormRender method directly calls ClientScriptManager.RenderClientScriptBlocks() and passes it the HtmlTextWriter, so ClientScriptManager is not a WebControl.
Somewhat surprisingly, ClientScriptManager does not offer a way to remove or un-register a script - nor can you enumerate existing registrations: you can only replace an existing registration - and only if you know the String key that was used to register it in the first place.
ScriptManager
The ScriptManager class was added in ASP.NET AJAX which was an extension to ASP.NET 2.0 released in 2007.
It was built-in to ASP.NET in ASP.NET 4.0 in 2010 (instead of being an extension).
It lives in System.Web.Extensions.dll (in both ASP.NET 2.0 and 4.0), while ClientScriptManager lives in System.Web.dll, which indicates it's more central and integral to ASP.NET than ScriptManager.
ScriptManager itself is a WebControl (it derives from System.Web.UI.Control) so it's responsible for rendering HTML directly via its .Render() method, whereas ClientScriptManager was invoked directly by Page's BeginFormRender.
The ScriptManager does not have any instance methods for registering <script> elements to render to the page.
It does have static methods for registering scripts to a Page instance, but all it does is call into Page.ClientScript.RegisterClientScriptBlock, Page.ClientScript.RegisterClientScriptInclude, or Page.ClientScript.RegisterClientScriptResource.
The <asp:ScriptManager> control must be placed inside your <asp:Form> and must be placed before any other WebControls that depend on ScriptManager-registered scripts. You also cannot have more than 1 <asp:ScriptManager> control on a page.
So if ScriptManager simply wraps ClientScriptManager, what does it actually do itself?
Well, unlike ClientScriptManager, the ScriptManager does let you remove a script registration and get a list of current registrations.
...provided those scripts were registered with ScriptManger and not ClientScriptManager and that you removed the offending script before ScriptManager.RegisterScripts() is called (which happens inside Page's PreRender event btw).
Additionally, ScriptManager handles the automatic creation of JavaScript code for ASMX and WCF client proxies and renders those as registered scripts too.
This is what the <asp:ScriptManager><Services> collection is for. For each <asp:ServiceReference /> child element it will generate a <script> containing functions that wrap XMLHttpRequest calls to each [WebMethod] method.
[WebMethod] methods exist in .asmx classes, though your WebService subclass also needs [ScriptService] applied.
[WebMethod] can also be static methods on your Page subclass, though you need to set EnablePageMethods="true" to use those.
TL;DR:
ClientScriptManager is integral to ASP.NET WebForms and renders pre-registered <script> elements inside your <form>.
ScriptManager is an optional extension to ASP.NET WebForms (as a part of ASP.NET AJAX) and essentially extends ClientScriptManager to allow for removing registrations and also generates JavaScript to make it easier to call [WebMethod] methods defined in .asmx WebService or a "Page method" (which is a static method on a Page subclass, also with [WebMethod]).

Related

C# access element in master page from logic layer

I have a content page connected to a master page. I can access an element on the master page and modify it directly from the content page .cs file by calling a method on the site master. (this is probably the most standard bug people have in this type of area)
My problem is that I wanted to extend this functionality to update the site master page from an AJAX request as well. The ajax file calls a different page which in turns starts an instance of the logic layer which I use for all the calculations and connections. What I am trying to do is access the sitemaster directly from the logic layer (only a .cs file).
My current code is this:
SiteMaster sm = new SiteMaster();
sm.MyMethod("param1", "param2");
This successfully accesses the method called "MyMethod" in the site master but inside this method I have this code:
mySpan.InnerText = "this is a test";
which doesn't work because I get the "Object refernce not set to an instance of an object...." error. This is because mySpan is NULL. If I call it using this.mySpan.InnerText though, if I hover over "this" then I can see the ID "mySpan".
Does anyone know how I can get around this problem? Every search I have made is regarding people who want to access the elements from the content page which already works for me.
I believe you've got a misunderstanding here. If I understand correctly you've got a page with a MasterPage. On that aspx page you're doing an ajax call (perhaps to a WebService) which does something like:
[WebMethod]
public void UpdateText(string message)
{
var master = new SiteMaster();
master.mySpan.Text = message;
}
There are a couple of things wrong here.
When you use this approach is an aspx page you're updating that Page's master. For example:
public void OnSomeRandomButtonClick(object sender, EventArgs e)
{
((SiteMaster)this.Page.Master).mySpan.Text = "Some Text";
}
What you're doing here is updating the span on the master page before it's being sent to your browser. The other subtly is that you're not creating a new SiteMaster, you're using the Page's existing Master and casting it to a SiteMaster.
There are a couple of reasons you can't do this with ajax:
A webservice doesn't have a MasterPage
By the time you send an ajax request your Master page has already been created and sent to the browser.
So your question becomes how do we update a span in the Master without posting back to the server?
Lets look at the html which is actually on your box, it will look something like this:
<html>
<head>
<title>My Awesome Page</title>
</head>
<body>
<h1>This is my Awesome Website</h1>
<span id="mySpan">I'm sure you'll like it</span>
<div>
<p>Page Content</p>
<div>
</body>
</html>
Lets assume that everything here is generated by the master and only the <p>Page Content</p> is your aspx page (There will also be loads of ASP.NET junk added, we'll ignore that for the time being).
What you want to do is update the text in mySpan without posting back to the server. You can do this via the javascript - don't get ajax involved at all!
I'm going to assume you're using jQuery (mostly because I'm more familiar with it that plain old JS). You've got the ID of your span ("mySpan") so the rest is easy:
$('#mySpan').html('This is the updated message');
You can put this in either a click or a page load.
No. You can not simply construct an ASP.NET page and use its state.
ASP.NET pages (and controls and Master pages) are being constructed and initialized from inside the ASP.NET engine based on the Markup provided for them. There is for example no initialization for mySpan inside the codeBehind of your master page, that will be constructed when the code generated based on the Markup is invoked based on a user request.
So you define this in your class:
protected HtmlGenericControl mySpan;
But the ASP.NET engine will compile this markup
<span id="mySpan" style="color:green"></span>
to this code:
this.mySpan = new HtmlGenericControl();
this.mySpan.Style.Add("color", "green);
and that is why you can use this object inside your code.
So if you want to use a property of your Master page from your Business layer, you have so many choices. On of the fastest one to implement is to make your Logic class singleton inside the Session scope, store the value you want to use inside the master page into that singleton object and then read that value from the master Page. This is an example of what you should do, of course it is rough.
class Logic
{
public static Logic Instance
{
get
{
if (HttpContext.Current.Session["LogicInstance"] == null)
HttpContext.Current.Session["LogicInstance"] = new Logic();
return (Logic) HttpContext.Current.Session["LogicInstance"];
}
}
public string TextForSpan {get;}
// The rest of your implementation
}
Instead of the code to assign the inner text, write:
Logic.Instance.TextForSpan = "This is my text";
And inside your master page:
this.mySpan.InnerText = Logic.Instance.TextForSpan;

Page_Load is been fired when WebMethod is called through javascript PageMethods

I have an aspx page. I've added a ScriptManager to it, and set EnablePageMethods=true, and created a static method marked as [WebMethod] on the server-side.
I have always worked with WebMethods, and I've never seen this error before.
On javascript, PageMethods is accessible. But when I call my method, the Page_Load method is fired, instead of the WebMethod.
I've searched and found other people had this issue as well. But no answers.... Any ideas?
HTML:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
JS:
PageMethods.Test()
C#:
[WebMethod]
public static void Test()
{
}
So after founding the culprit of why controls in my update panel was calling post back twice I found it was because of a page method being called.
After finding LcSalazar solution I did disabled Friendly URLs and everything was working. But I find the Friendly URLs to be more clean so I found a solution .
On your master page add the following .
<script type="text/javascript">
$(function () {
try {
if (PageMethods.get_path().indexOf('.aspx') == -1)
PageMethods.set_path(PageMethods.get_path() + '.aspx');
} catch (e) {
}
})
</script>
Once the page methods path includes the .aspx the page_load doesn't fire again.
Alternatively look into using ASP.Net Web Api . Better practice as well when it comes to reusable methods instead of declaring the methods in you Base Page or every page you are trying to use it .
I discovered that the problem on my case is that I'm using friendly URL's. Since PageMethods references the server-side page by its address, there you have the issue. It's been discussed here, on CodePlex: http://aspnetfriendlyurls.codeplex.com/workitem/3.
Apparently there are workarounds for this, but I ended up making a manual ajax call to a generic handler (.ashx).
When you submit a form that has runat server it processes the full .net lifecycle. Which fires the Page_Load of your .cs class. If you want to make it strictly want to fire the webmethod I suggest using an ajax call to your webmethod.
Disable friendly urls. Comment this out in App_Start\RouteConfig.cs
routes.EnableFriendlyUrls(settings);

How to call javascript function and c# code on asp:button?

When a user clicks a button on ASP.net page, I need to
Save file from asp:fileUpload in a folder on a server - I guess this needs to be done in C#, like in How to correctly use the ASP.NET FileUpload control
Run a javascript function like in How to call javascript function from asp.net button click event
Is there a way to combine C# and Javascript to achieve what I need? If not, how should I do it?
Try using the onClientClick property of the asp:button element.
Ex, on your .aspx file:
<script type="text/javascript">
function myFunction()
{
alert('hi');
}
</script>
...
<asp:button id="Button1"
usesubmitbehavior="true"
text="Open Web site"
onclientclick="myFunction()"
runat="server" onclick="Button1_Click" />
And in your code behind (.aspx.cs)
void Button1_Click (object sender, EventArgs e)
{
if (this.FileUpload1.HasFile)
{
this.FileUpload1.SaveAs("c:\\" + this.FileUpload1.FileName);
}
}
More info at
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.onclientclick.aspx
Note that no JavaScript actually "runs" until the server-side code (C# in this case) has entirely completed and the resulting page is returned to the client. Once that page renders on the client, then JavaScript runs on the client.
So in order to execute your JavaScript code, all you need to do is include it in the page being returned to the client. There are a number of ways to do this, and the options depend on whether you're using WebForms or MVC.
You might use something like RegisterStartupScript in WebForms, for example. Or, you could just have the JavaScript code exist in a PlaceHolder control with Visible=false and only make the control visible in the response which intends the JavaScript code to run. (Roughly the same method is also easily usable in MVC by just wrapping the JavaScript code in a server-side condition to determine whether to render it or not.)
The main thing to remember is that you're not "running the JavaScript code from C#" or anything like that. There's a hard separation between server-side and client-side code. The server-side code ultimately builds the page that it sends back to the client, and that page can include JavaScript code to run on that client.

Including a Handler Response inside a Web Form

I am generating HTML in the Page Load method in more than 1 page.
All those generated HTML are the same across all pages.
I found that it's a pain to have the same codes in every page because once I need to change something, I need to change them in all pages.
Example:
I have a div in each of those page:
<div id="Questions" runat="server"></div>
In the Page Load method of each page, I generate the same HTML.
Questions.InnerHTML = "<span>...etc...</span>";
So I decided to make a page that generates those contents, then load this page inside the div of the other pages, means, if I ever need to change, I only change this page.
I created a Handler, Questions.ashx. This handler generates that HTML and sends back a response.
Now to include it, I know I can use JQUERY's .load() function, but I would like to generate those HTML from server side.
What I've tried:
Questions.InnerHTML = LoadControl("~/Handlers/Questions.ashx").ToString();
But I received this error:
Type 'Questions' does not inherit from 'System.Web.UI.UserControl'.
"LoadControl" is for "User Controls", not HTTP Handlers..
You will probably be better off creating a User Control, which is an .ascx file. This can contain HTML, ASPX controls and code behind, and can be referenced by any ASPX page.
More Info here:
http://msdn.microsoft.com/en-us/library/y6wb1a0e(v=vs.100).aspx

Element-Enhancing Javascript in ASP.NET Master Pages

I have run in to a bit of a problem and I have done a bit of digging, but struggling to come up with a conclusive answer/fix.
Basically, I have some javascript (created by a 3rd party) that does some whizzbang stuff to page elements to make them look pretty. The code works great on single pages (i.e. no master), however, when I try and apply the effects to a content page within a master, it does not work.
In short I have a master page which contains the main script reference. All pages will use the script, but the parameters passed to it will differ for the content pages.
Master Page Script Reference
<script src="scripts.js" language="javascript" type="text/javascript" />
Single Page
<script>
MakePretty("elementID");
</script>
As you can see, I need the reference in each page (hence it being in the master) but the actual elements I want to "MakePretty" will change dependant on content.
Content Pages
Now, due to the content page not having a <head> element, I have been using the following code to add it to the master pages <head> element:
HtmlGenericControl ctl = new HtmlGenericControl("script");
ctl.Attributes.Add("language", "javascript");
ctl.InnerHtml = #"MakePretty(""elementID"")";
Master.Page.Header.Controls.Add(ctl);
Now, this fails to work. However, if I replace with something simple like alert("HI!"), all works fine. So the code is being added OK, it just doesn't seem to always execute depending on what it is doing..
Now, having done some digging, I have learned that th content page's Load event is raised before the master pages, which may be having an effect, however, I thought the javascript on the page was all loaded/run at once?
Forgive me if this is a stupid question, but I am still relatively new to using javascript, especially in the master pages scenario.
How can I get content pages to call javascript code which is referenced in the Master page?
Thanks for any/all help on this guys, you will really be helping me out with this work problem.
NOTES:
RegisterStartupScript and the like does not seem to work at any level..
The control ID's are being set fine, even in the MasterPage environment and are rendering as expected.
Apologies if any of this is unclear, I am real tired so if need be please comment if a re-word/clarification is required.
Put a ContentPlaceHolder in the head section of the master page, then add a asp:Content control on the content page referring to the placeholder and put your script in that control. You can customize it for each page this way.
Also, the reference by ID may not be working because when you use Master Pages, the control IDs on the page are automatically created based on the container structure. So instead of "elementID" as expected, it may be outputting "ctl00_MainContentPlaceHolder_elementID" View your source or use firebug to inspect your form elements to see what the IDs outputted are.
Isn't it possible to do with clean javascript ?-)
-- just add something similar to this inside the body-tag:
<script type="text/javascript">
window.onload = function(){
MakePretty("elementID");
}
</script>
By the way the script-tag has to have an end-tag:
<script type="text/javascript" src="myScript.js"></script>
Why not use jQuery to find all the controls? Something like this:
$(document).ready(function(){
$("input[type='text'], input[type='radio'], input[type='checkbox'], select, textarea").each(function(){
MakePretty(this);
});
});
This way you'll get all elements on the page, you can wait until the page is ready (so you don't modify the DOM illigally). The jQuery selector can get the elements in a bit more of a specific format if you need (ie, add a root element, like the ID of the body div).
It'd also be best to modify the MakePretty method so it takes the element not the ID as the parameter to reduce processing overhead.
Once you use Master Pages, the ids of controls on the client side aren't what you think they are. You should use Control.ClientID when you generate the script.
When using master pages, you need to be careful with the html attribute ID, since .NET will modify this value as it needs to keep ids unique.
I would assume your javascript is applying css styles via ID, and when you are using master pages the ID is different than what is in your aspx. If you verify your javascript is always being added, your answer needs to take into account the following:
ALWAYS set your master page id in page load (this.ID = "myPrefix";)
Any HTML element in your master page will be prefixed by the master page id (i.e.: on the rendered page will be "myPrefix_myDiv")
Any HTML element in your content place holder id will be prefixed with an additional prefix (i.e. myPrefix_ContentPlaceHolderId1_myDiv)
Please let me know if I can clarify anything. Hope this helps!

Categories