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.
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>
The advantage of razor syntax over asp.net syntax just using on short tag "#" instead of "<%= %>"??
Is it any other feature or data binding method razor can do, but asp.net syntax not?
Razor is pretty cool, it can often detect if you are writing HTML code in your code blocks. So say that you are declaring a big block of C# code, by using #. You then write a foreach-loop in that, and write some HTML that should be echoed out. In ASP.net markup, you'd have to end the C# code block with %> and then reopen it with <%. Razor, on the other hand, can detect when you are writing HTML and does that for you. It will also detect where you put the bracket that closes the loop, without you having to put it within <% %>. Very handy, and a timesaver.
For more information: Click click.
#section, #model, IntelliSense, inline C#, what else?
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 just started using JQuery in VS 2008, and so far I like it! But, I'm confused about how I should be using JQuery in order to select asp.net controls on a webpage.
For example, I have the following code (just a mock-up):
<asp:textbox id="txtSomeData1" runat="server" text="Some Data!!"></textbox>
Now, if I want to use JQuery to select the textbox and change it's text to "Some More Data!!", then I would have to do something like:
$('input#ctl00_ContentPlaceHolder1_txtSomeData1').val('Some More Data!!');
Which, quite frankly, is annoying because I don't want to mess with having to figure out what the id of the control is after it's rendered to the webpage (ctl00_ContextPlaceHolder... blah blah blah).
Is there a way that I can select the textbox without having to use the id of it? Also, I know that you can select by class name, but that doesn't help much if the control that you're selecting doesn't have a class.
Am I just missing something here?
JUST TO REITERATE: I do not want to use a class to select the input tag!! I would like to use the id "txtSomeData1" and not the long id that is rendered to the webpage.
What you want to do is either:
$("input[id$='_txtSomeData1']").val().....
or you could add a class or custom attribute to the textbox that you can select on
if the javascript is on the same .aspx file, you can do:
$('<%= txtSomeData1.ClientID %>').val('Some More Data!!');
This is a big complaint the community has with ASP.Net web forms. In ASP.Net 4.0 you get control of your IDs back so it's like you're wrote it in raw HTML. Alternatively, without .Net 4.0, you could use ASP.Net MVC which, for the most part, doesn't use server controls, so you wouldn't have the issue.
But like happytime harry says, adding a class may be want you want if you're working with web forms and jquery.
If you are going to externalise the JavaScript to its own .js file you are stuck with either hard coding in the id (most efficient), some regular expression selector or using the inefficient by class name selector.
However if it is in the same file as the .NET control you could always use $('<%=txtSomeData1.ClientID %>')
There are lots of selectors to use... maybe adding a class is what you want to do.
http://docs.jquery.com/Selectors
jQuery Wildcard Selectors are what you may be missing here.
You can add 'marker' classes to any control whose sole purpose is for use in a jQuery selector.
That, along with navigating the tree heirarchy (something like "$(element).children('.myClass').show()" might be a good way to do this without IDs.
Btw, http://visualjquery.com/ is a great way to view the jQuery APIs etc.
You can use the element[id$=Identifier] notation, which looks for the id ending with the text you specify (it's the ID you specify in ASPX markup). Here is an example illustrating how you can use it (see slide #30): Building intranet applications with ASP.NET AJAX and jQuery.
Please use the following syntax :
$("[id*=txtSomeData1]") to reference any asp control
For ASP.NET Web Forms, you can use ClientIDMode="Static" to prevent the id from changing:
<div id="MySection" ClientIDMode="Static" runat="server"></div>
which means you can then reference the element in a separate plain JavaScript file if required, without having to embed the JavaScript in the .aspx file:
var mySection = document.getElementById("MySection");
and even add classes:
mySection.classList.add("hidden");
And the CSS used above for reference:
.hidden {
display: none !important;
}
I have some HTML that will need to be duplicated in a number of places. If I externalize this to a text file and include it in the ASPX page, it would work but I will need to pass a parameter to this HTML (ClientID)
Without having to create a User control, is there a lighter way of doing this?
I would use a master page for this. Depending in the version of the framework(2.0+) Nested Master Pages are also an option.
You could just have a raw aspx file with the HTML inside:
<%
If (Request.QueryString["ClientID"]) {
// Do Something
}
%>
<p>HTML File Contents</p>
Then you could either server-side include the file or server.execute the file.
You may want to clarify how you pass a ClientID to "HTML", because it sounds like you're doing server-side processing to generate your HTML, which is a classic case of Ajax. I would recommend using JQuery to achieve this.
Perhaps standard #Includes still work, but TBH I haven't found any downside to master pages (as yet). This is what they were designed for.