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.
Related
I have built a 'dynamic' site. Basically, there is a configuration database, where users specify the field type, layout, etc. The controls are then added to screen dynamically based on this configuration.
I have wrapped the web controls inside my own controls.
So for example, I have myTextControl, myNumericControl etc.
Then in the code behind, I use a helper that reads the configuration and adds these controls to the screen.
Now, we would like to move from webcontrols to plain html controls + knockout (for a number of reasons such as performance, better ui etc). However, I am a bit confused on this.
For example, should I still use an approach of creating myTextControl, myNumeric etc ... that are plain html controls. For example I could inherit from my own base class and then add the html of these controls to a place holder or literal. should I try to use a viewing engine such as razor?
I know there is MVC but we are not prepared for this step yet.
Any assistance would be greatly apprecaited.
I would just use stripped down asp.net controls:
<%# Control Language="C#" ClassName="classname" %>
<div>...your html here...</div>
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.
I've built a ascx control and I would like to be able to keep adding new instances of it using JavaScript instead of having to do a AJAX callback. Is this possible? I am basically building a web form for a query control and should clause X be filled in, I want to generate a control for the next clause below. I would like to learn how to do this without doing a callback.
Thanks
ASCX are server side user controls and, to my knowledge, can only be loaded by a server event. This can be accomplished through a full page postback or using UpdatePanels and ASP.net AJAX.
If you don't want to use these options and stick with a full JavaScript solution, you're looking at probably doing DOM manipulation and dynamically adding straight HTML.
If the ASCX controls don't change their appearance and all you're doing is showing and hiding them, one last alternative could be to load all of them into DIV tags that have their display style set to none. Then when the user clicks on a checkbox or whatever, you can use JavaScript to show that DIV tag containing the next control. This is how many JavaScript tab setups work.
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.
How can i access html control from code behind in asp.net. I do not want to use "runat=server" as it is causing problems.
I have made an empty html table and from my code behind, I want to add <td> to it.
Please help.
Thanks,
Prachi
This is not possible without runat="server".
You say this was causing problems. Please say what problems it was causing.
You say you were accessing the table using getElementById? The ID of a server control changes based on what controls it's inside of. You need to get the changed ID to use:
var tab = getElementById("<%= myTable.ClientId %>");
or something to that effect.
You should use runat=server attribute if you want to access it at code behind.
But maybe you can generate some javascript code that adds the td/tr to your table at codebehind. and you can register it yo your page to run at startup.
runat="server"
to the table and the tr elements, there is no way the code behind can access them (as this tells the frame work to expose the elements to the server).
What are you actually trying to do? Have you looked at either DataGrid, GridView or simple Repeater control? These allow you to define a table structure and dynamically add controls to it (usually through data binding, although there are ways to add items to thier ItemCollections).
one way that you could do this is to add some inline scripting and a public string variable. in your code behind, make a public class-level variable:
public String myColumns
then in your Page_Load event, create your HTML as a string and save it in your myColumns variable:
protected void Page_Load() {
//do stuff
myColumns = someStringWithTDTagsInIt
}
Then in your .aspx page, do the following:
<table id=maintable"><tr><%=myColumns %></tr></table>
It should render your HTML as you wanted it to in your Page_Load event (or whatever event you want, if you want it to load on a button click or something) without using a "runat=server" tag.
Please note that this is not the recommended way to achieve this (controls are typically more efficient) but this should be a valid solution to the question you posed.
simple example.
just you place the runat="server" then you can access .
html controls are cannot access at server side. if you place runat server then it access in the server.