I have created a user control. I want to use CSS classes in this, but no CSS is working here. I tried registering CSS in master page, user control. But nothing worked.
As your usercontrol gets rendered in the containing page, you can use css on it like on any other tag on your website.
The only thing you need to do is add the css file to the header of you masterpage.
When using css selectors tho, remember that the ID's of the controls on your usercontrol is not this one you should use as your css selector.
fe.
<input type='text' id='txtName'/>
in your usercontrol will be rendered to something like
<input type='text' id='ctl00_phMain_MyUserControl_txtName' />
so make sure you use the correct id to apply your style or use the class tag
Related
Having the code below for a button, can I add an id to it so I can add CSS to the button?? Or I can put only a class??
<asp:Button ID="registerLink" runat="server" Text="Create Account">
</asp:Button>
In WebForms, the ID="" attribute of controls is transformed into something of the form ctl0__ctl1__registerLink (where ctl0 and ctl1 are the ID="" values of parent controls). This means the rendered id="" attribute is (generally) unpredictable and cannot be relied upon for styling or Javascript uses.
There are three possible solutions:
Use ctrl.ClientId to get the final rendered id="" attribute value, this works when you want to reference the rendered HTML from a client script on the same page, however it isn't of much use for styling unless it's an inline <style> element.
Use the clientIDMode setting to override how the id="" attribute is rendered. This requires ASP.NET 4.0 or later. You can set this in web.config, in your <%# Page declaration, or on each element. Set it to Static so the value is verbatim (with exceptions).
Implement your own Control Adapters that override how attributes render.
Ditch WebForms and use ASP.NET MVC ;)
I have built a form in Grails. I have used the g:submitToRemote button which dynamically creates a Html <input> tag. I want to apply a dojo style to it like to all other elements in my form like this <g:submitToRemote dojoType="dijit.form.Button" /> but the style doen't get applied. Can you help me out to figure the problem?
<input onclick="createLoader(); dojoType="dijit.form.Button" try{//some Ajax calls};return false" type="button" value="Search">
There are several things you need to check:
Are you sure the button is being parsed? Look at the HTML source and validate whether or not the HTML code of the button is still the same as the code you provided. When Dojo parses the HTML code it will usually change the HTML code to something more complex. If you don't have that complex code, your widget is not picked up by Dojo.
Did you import the correct CSS file? You need to make sure you imported the correct CSS file, for example claro.css.
Does any of the parent elements have the theme class name? If you use the claro theme (for example), you need to make sure you have the classname claro somewhere, usually in your body-tag.
EDIT:
More things to check:
Do you have dijit/form/Button in your require()? Assuming you're using Dojo 1.6 (because you're using the old dojoType) the code you need is:
dojo.require("dijit.form.Button");
Is your button loaded asynchronous or not? If it is loaded async, your node will not be parsed when your page loads. This means you have to async it manually by wrapping your button in a <div> and manually parse that div, for example:
<div id="toParse">
<input onclick="createLoader(); dojoType="dijit.form.Button" try{//some Ajax calls};return false" type="button" value="Search">
</div>
And in JavaScript:
dojo.parser.parse("toParse");
I have a div element in my HTML. I added a id and runat attributes to the element:
<div id="footer" runat="server">
After rendering, viewing the HTML shows:
<div id="ctl00_footer">
However, I cannot access it from the page's .aspx.cs code:
footer.InnerHtml += "test";
How do I access that element from the C# code?
you can use FindControl("footer"), and cast it to HtmlGenericControl.
HtmlGenericControl footer = (HtmlGenericControl)FindControl("footer")
One of the reasons can be that you don't have designer file for that page. So you can't access element by it's ID.
Just add class with name [your page name].aspx.designer.cs, open it, remove all code, save it, go to your view and click save - designer must generate code of all elements from your view. After this you can access element by ID.
There should be no problem accessing <div id="footer" runat="server"></div> the way you are doing. Strange though, my generated markup keeps the div id unchanged as footer.
Make sure you don't have any compile errors, and that you can access other elements running server-side in the same scope you are trying to access this div.
You need to set the ClientIDMode property of the page or control to Static:
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
This will prevent the "ctl00_" from being appended to the ID which is what is causing you the problem.
I have encountered this problem before. You may have the target div inside another div that does not have the runat="server" attribute. All nested divs should have the runat attribute in order to be able to access the inner elements.
<div id="divContainer" runat="Server">
<div id="yourDiv" runat="Server">
</div>
If you're going to code ASP.NET and you want to access the control from the server-side, you may as well use the provided controls.
Use a Panel instead of a Div. The ASP:Panel control renders as a div in the generated html anyway. The Panel doesn't have a .Text property, but you can add controls to it from code-behind (such as a Label or a LiteralControl.
Is there possibly a chance that the page was copy/pasted when being created? If so, make absolutely sure that all references to the old page are changed to the name of the new page. I've done this before within the code at the top of the ASPX page, as well as the namespace of the designer page.
I had the same problem and found out that due to a "copy" and "paste" my function had a "static" declaration.
Removed it since static functions can't access non-static identifiers and it was fixed.
I have the same issue.
My solution was to have 'ID' instead of 'id' for the div element (i.e. the casing was the reason).
I am trying to create a product review web page. The product review has product image, title, description, etc, in a SQL database. How can I load this datas into an HTML div tag, using ASP.NET?
Add the following to your div
<div runat="server" Id="dataDiv"></div>
And then in your CodeBehind you can call your div with its Id
dataDiv.InnerHtml= YourData;// this can be anything from database or a variable
hope it helped.
Thanks,
Aneef
You can add an ID property and runat="server" to <div> to be able to reference it from code behind, and add HTML using the InnerHtml property.
You can also use an <asp:Panel> control, which emits a <div>, and insert your HTML by adding a Literal control from code behind that contains your markup. That approach also allows you to add controls to the <div>, should you need to.
Using jQuery I want to be able to click an element which will also checks it's related radio button. I had this working fine until we had to add runat="server" to the radio buttons.
When I apply this it prevents my jQuery function from working and I cant figure out how to get round it, heres a simplified version of the code:
HTML
<input type="radio" runat="server" id="sector1Radio" name="SectorGroup" title="Sector1" />
jQuery
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
I've found out that when its converted to a .net control instead of checked="checked" (as it would be usually) it is just Checked, so I changed that but on inspecting the DOM in multiple browsers, none of my radio buttons are being checked :-(
Are there any other ways I can use jQuery to check a radio button that has runat="server"?
Cheers!
I think that Your problem is that the id of the input is no longer sector1Radio but rather ctl00_sector1Radio or something similar. This happens if Your input control is inside e.g. a ContentPlaceHolder control (when using master pages).
Can You check the generated HTML code (in the browser) to verify if this is the case? What is the id of the input control?
If this is the case, You need to generate Your js jQuery code
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
from codebehind so that SomeThingElse is replaced with the ClientID of the control.
.is(':checked') works on ASP.NET radiobuttons and checkboxes
$('#SomethingElse').click(function() {
$('input[title=Sector1]').is(':checked');
});
try using
$('input[title=Sector1]').attr('checked',true);
and
$('input[title=Sector1]').attr('checked',false);
or maybe
$('#SomethingElse').click(function () {
$('input[title=Sector1]').attr('checked',!$('input[title=Sector1]').attr('checked'));
});
As suggested by others, ASP.net will not generate the html with the same ID you specified.
Quick solutions:
You can keep using the id but asks jquery to check the end of the id instead, example:
$("input[id$='sector1Radio']").is(":checked");
Or check against the title and name as Nico suggested
Use the class element which is not effected by ASP.net, example
<input type="radio" runat="server" id="sector1Radio" class="sector1Radio" name="SectorGroup" title="Sector1" />
$("input.sector1Radio").is(":checked");
Best thing is to view the generated html code and see what id is giving you, then you can use the appropriate jquery selector, because the generated id could have different extensions depends whether you use master pages, etc.
If you are using a MasterPage or are creating the controls dynamically then it is probable that the control ID's are being renamed #SomethingElse becomes #MainContent_SomethingElse.
The easiest way to check this is to use the WebDeveloper plugin for Firefox or Chrome.
Go to Information -> Display Element Information and then select the object in question. It will give you it's ID, class, as well as ancestor and children information.
Check to see if the ID is being changed dynamically by the .NET.
If that's the case:
To prevent this, in the server side code you can use the following attribute to create static ID's
SomethingElse.ClientIDMode = ClientIDMode.Static;
You can then reference in you jQuery
$('#SomethingElse').click(function() {
if ($('input[title=Sector1]').attr('checked')) {
//execute event
});
I think what happens is that in ASP NET Checkboxes and Radio Buttons generates an "input" and a "span" after the input. So you need to select the input only.
You can try:
$('.classname input[type=checkbox]').each(function() {
this.checked = true;
});
Two things here: finding the control and executing the check. In ASP.NET, your control's actual ID and name will end up getting changed based on the runat="server" containers in which it appears, even if those containers have no Ids.
Rendered ASP.NET controls always end with the same name as you started with, so a tag like:
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
might end up being rendered as
<input type="radio" runat="server" id="ctl0$ctl0$sector1Radio" name="ctl0_ctl0_SectorGroup" title="Sector1" />
You can find this element, even after it is rendered if you use the "contains" selection syntax in JQuery. So to find this element, once rendered, you could use:
$("input[type='radio'][id*='$sector1Radio']")
This syntax will find any radio button whose id contains "$sector1Radio"
Once you have the element, you can check or uncheck it using the following code, which you'd call from the click event of your other element.
// check the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', true);
// uncheck the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', false);
One last thing... if you just want a block of text to click the button when pressed (wrap it in an tag and set the AssociatedControlId property to the control name of your radio button, like this...
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
<asp:label runat="server" id="lblsector1Radio" associatedControlID="sector1Radio">clicking here clicks and unclicks the radio button</asp:label>
I had the same problem. To use the jQuery UI to make your radiobuttons nice one has to write:
<div id="radio">
<input type="radio" id="radio1" runat="server" />
<label for="radio1">The label of the radio button</label>
...
</div>
<script type="text/javascript">
$('#radio').buttonset();
</script>
The id of the input tag must be correctly referenced by the label's for attribute. If the webpage is inside a master page then the id of the input tag will be modified to something like ctl00_Something_radio1, and suddenly the label's for attribute no longer references the input tag. Beware of this in ASP.NET!