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>
Related
I am trying to use underscores templating system in my project. Now the issue is that we have a lot of server side (ASP.NET) controls as well that I would like to use. Is there any way to use the ASP.NET controls together with underscore templates?
I tried simulating a template as an aspx page to get the rendered html from there and then use the result but that seems like an overkill.
I am pretty new to templating so I have no idea about what to expect.
EDIT:
What I meant was, is there any way I can have e.g. an ASP.NET button inside an underscore template?
The issue isn't with ASP.NET Controls (which use the runat="server" attribute), but with ASP.NET's Render function syntax <% %>.
See this earlier QA: How to use underscore/javascript templates in ASP.Net MVC views the solution is to configure underscore.js to use a different delimiter:
This:
_.templateSettings = {
interpolate: /\{%=(.+?)%\}/g,
escape: /\{%-(.+?)%\}/g,
evaluate: /\{%(.+?)%\}/g
};
...will let you use {% %} as delimiters instead of <% %>.
I just thought that it might help someone. One of the controls I wanted to use was a devexpress grid in my view. Now I could have done a "view source" on the grid and copied the rendered html to generate the view. However, I decided to create an aspx page and did an ajax call to the aspx page and displayed the resultant html in the view. I was hoping there would be a better way to do this.
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.
I generally prefer to add controls dynamically, like table and generic html controls, to the ASPX page, rather than add them in the ASPX page and set the properties dynamically.
Which approach is considered "better practice"?
Also is using generic html controls dynamically a better practice than outputting formatted html strings to an asp:literal?
Keep them in the .aspx
Adding them dynamically leads to view state issues and they must be added in each post pack. I ran into this when building a user generated forms app. I Broke down and used the controls visibility property as a work around. That said if your eliminating view state and post back from your app these may not be issues for you.
https://web.archive.org/web/20211031102347/https://aspnet.4guysfromrolla.com/articles/092904-1.aspx
Since in both approaches you end up with a set of code that adds controls and assigns values to their properties then the best practice is the approach that is the most readable.
Due to complex decision logic it may be better to do it all yourself on the hand for fairly static control layout where only the properties need modifying placing the control in the ASPX would be more straight-forward.
I am comparing the two base classes of each namespace and am a bit confused.
System.Web.UI.WebControls.WebControl
System.Web.UI.HtmlControls.HtmlControl
I see small difference between the two. For instance, HtmlControl has much fewer properties while WebControl has a lot of properties like the CssClass property. Other than just extra properties the WebControl base class seems to be more robust in the way it handles rendering.
Why the need to have two namespaces and two sets of almost Identical Controls?
The controls in System.Web.UI.HtmlControls are just a thin wrapper around actual HTML controls. System.Web.UI.WebControls.WebControl are your standard ASP.NET controls.
To expand on this a bit:
The System.Web.UI.HtmlControls
namespace contains classes that allow
you to create HTML server controls on
a Web Forms page. HTML server controls
run on the server and map directly to
standard HTML tags supported by most
browsers. This allows you to
programmatically control the HTML
elements on a Web Forms page.
RadioButtonList is an ASP.NET WebControl. But no such control exists in HTML - in HTML you'd have a group of INPUT controls with type "radio" which share the same name attribute value.
So, WebControls are ASP.NET controls that render to HTML controls. HtmlControl is the actual representation of an HTML control on a page.
From w3schools:
Like HTML server controls, Web server
controls are also created on the
server and they require a
runat="server" attribute to work.
However, Web server controls do not
necessarily map to any existing HTML
elements and they may represent more
complex elements.
Web controls are usually a little more powerful, but also require a little more resources to dynamically generate the corresponding HTML.