I'm trying to add an attribute to a SharePoint web control:
Microsoft.SharePoint.WebControls.BooleanField which basically renders as an html input checkbox control.
How do I add an attribute to this? such as an event?
Normally for an asp.net web control, you can just do:
sampleControl.Attributes.Add("onclick", "alert('test');");
Any Ideas? thanks.
Attributes attached to an asp.net control don't necessarily get copied to the rendered html control. If setting an attribute on the control doesn't have the desired effect, you'll need to use javascript to find the rendered html control and add the attribute clientside - quite easy with jQuery.
Related
I am trying to use existing functionality which is embedded in a asp.net aspx page. So I have controls on this page and code behind for it. What is the best way to reuse this functionality in a new ascx control? Or do I just have to copy everyting into the control?
Can you not just take the controls you want to use from the aspx page and turn those into a control? Then you can use that control wherever you like.
To access the page parent just written this.Page in your control. But for access to these methods, you must apply an interface to the aspx page.
Page_Load generates a string of HTML for a dashboard. (html)
What control on an aspx page to bind that "text" to so when the page renders you see the tables, and buttons within?
Tried
With dhtml.Text = html but I don't see the buttons. I do see the tables as well as the borders of cells that I expect.
Any ideas?
TIA
You can inject any text/html into your ASPX page using: <% =GetMyText() %> where "GetMyText()" is a public or protected method in your code behind that returns a string.
You can also drop a Literal control onto a form and set the text via its "Text" property.
But if you want to do things the ASP.NET way, you might use a Gridview or Repeater to display tabular/repeating data, and Databind to it with some data.
If you are starting out with ASP.NET, you would probably be better off learning ASP.NET MVC as it is easier to get your head around if you are used to writing HTML. ASP.NET Web Forms, which you are using, generally tries to insulate you from HTML, CSS, and Javascript by giving you controls that you drop onto the page and bind data to. The controls do a lot of work for you, but take away almost all control of your HTML, CSS and Javascript.
I use javascript to dynamically create html elements. Your page_load function could register a javascript function which creates the elements you need.
Not sure why you were downvoted, but a very simple one to use is the HtmlGenericControl.
Basically, just add a span or div to your .aspx file and give it an ID and the runat="server" attribute.
Then, in your code behind just set the InnerHtml property of that control to your generated html.
I would like to understand how can I use jQuery to work with asp.net and css.
When I'm writing asp.net code and for example I'm adding to a page DropDownList, I can't see it in the source when I'm opening source of a page in web browser. Instead of dropdownlist I can see select tag. When does the "magic" is done to change asp.net tag to select?
What is more I can't see my CSS classes names added to asp.net tags. There are some kind of differen CSS class names. But when I'm opening developer tools in IE, I can see CSS class names, which are same as in my definition.
And the last thing. What names of a tags sould I use in jQuery to traverse page which was developed in asp.net. Shoud I use a tags which I see in the source code of a page in a browser or can I ask jQuery about asp.net tags? What about CSS classes? Why I can't see them in a source of a page in a browser? Can use my names of a CCS classes under jQuery queries?
Please, can anybody explain me how does this three technologies work together?
When does the "magic" is done to change asp.net tag to select?
Most of "magic" you're wondering about is done by ASP.NET controls, which are designed to generate the markup that is sent to the browser.
When a request is received, the application iterates over each control, calling its Render method (inherited from the Control class), which allows each control to generate the markup they represent.
Following your example, the DropDownList control generates a <select> tag. As a ListControl, it uses the ListItem controls to create the <option> tags within.
Another would be the GridView, which generates a <table> using GridViewRow controls for <tr> and various HTML Controls, such as TableCell for <td> and <th>, to create the rest of the markup.
Shoud I use a tags which I see in the source code of a page in a browser or can I ask jQuery about asp.net tags?
No, jQuery/JavaScript have no knowledge of server-side control names, only the markup they generate. So, rather than searching for $('DropDownList'), you'd search for $('select').
What is more I can't see my CSS classes names added to asp.net tags. There are some kind of differen CSS class names.
By "CSS Names," do you mean IDs? I'm sorry to ask, but CssClass attributes shouldn't change in value from server-side to client-side, just in name -- CssClass to just class.
IDs, on the other hand, are prefixed to ensure their uniqueness throughout the page, including a prefix of the MasterPage and ContentPlaceHolder names, if they're used. For this reason, I'd steer away from trying to use IDs to apply CSS to server-side controls, using classes instead.
Now, the end of the ID should remain as the ID you gave in server-side, so you should still be able to find the element in jQuery using the Attribute Ends With Selector [name$='value']:
# ASP
<asp:DropDownList ID="AnyGivenDropDown" runat="server" />
# HTML (generated)
<select id="ctl00_PageContents_AnyGivenDropDown"></select>
# JavaScript
$('select[id$="_AnyGivenDropDown"]');
Otherwise, I'd stick to classes to find the controls you're looking for:
# ASP
<asp:DropDownList ID="AnyGivenDropDown" CssClass="anygiven" runat="server" />
# HTML (generated)
<select id="ctl00_PageContents_AnyGivenDropDown" class="anygiven"></select>
# JavaScript
$('select.anygiven');
# CSS
.anygiven { }
The "magic" happens in the render event of the asp.net page lifecycle. Asp.net server controls all render as standard html element(s). The most important difference is that you can access them and their values on the server side. WebControls also have a CssClass property that when rendered becomes the class attribute of the HTML element.
The id can be a bit tricky when working with jQuery and CSS. This is because depending on the controls hierarchy they may have a clientID such as ctl100_containerID_myControl instead of myControl. To overcome this in jQuery when you reference a control you can refrence it by its ClientID like so:
$('#<%=myControlID.ClientID%>')
This is serverside that will write the client side ID of the control after it is rendered.
ASP.NET: High-level web development framework. When you create a web form in .NET, the framework will work together with the IIS handlers and create (hopefully) valid HTML that will work with your server-side code during postbacks.
JQUERY: This will allow you to perform client-side scripting such as calculation, validation, and most notably AJAX, etc. This is basically just a wrapper for a simpler and easier-to-read version of javascript.
CSS: Takes the HTML and makes it pretty.
All three technologies work very well together if you know what you're doing.
I'm not sure if that's what you're looking for, but it sounds like you might want to invest in some beginner's literature.
As a test, I wanted to have an ASP.NET page rendered without the auto-generated javascript. Is this possible?
Assuming you're referring to ASP.NET UserControls, I would imagine that the javascript and css rendered with ASP.NET User Control is built in and cannot be prevented out the box. You may be able to override the render and prevent it?
If you are after to remove __dopostback and so on, you have to change the ASP.NET standard control behavior (like LinkButton). IMO, you can use ASP.NET MVC that gives you more controls on the markup.
document.getelementbyid('txtbox') is not working when I used in content page as it is working in the normal web page. The value is null when it is used in contentpage. Plz anybody help me
The id will have changed, you can use something like:
document.getelementbyid(<%=txtTextBox.ClientID%>).value
or you can view the source to get the id in the hopes that it will not change again.
If you have the option I'd switch to some other engine, such as asp.net mvc where you have control over the HTML.
When the page renders, if the textBox is under another control, the Id tends to change.
You can use the ClientId property:
document.getElementById("<%= txtbox.ClientID %>")
Read this article
Control ID Naming in Content Pages
ASP.NET allows certain controls to be
denoted as naming containers. A naming
container serves as a new ID
namespace. Any server controls that
appear within the naming container
have their rendered id value prefixed
with the ID of the naming container
control.
Naming containers not only change the
rendered id attribute value, but also
affect how the control may be
programmatically referenced from the
ASP.NET page's code-behind class. The
FindControl("controlID") method is
commonly used to programmatically
reference a Web control. However,
FindControl does not penetrate through
naming containers. Consequently, you
cannot directly use the
Page.FindControl method to reference
controls within a GridView or other
naming container.
Master pages and ContentPlaceHolders
are both implemented as naming
containers.