I am creating a web user control for a simple poll. I am currently registering it on the page and then referencing it via tagprefix.
The form for the poll is in basic html (no server controls) and is in the front-end of the web control. How can I change the look of the user control depending on the settings passed into it? Is this possible without using server controls?
Update
Can I change the html layout of a user control? If so could someone post some examples. Please note I do not use asp.net form controls, so none of that please :)
You might be able to also use jQuery to replace existing css setting in your code. Create properties on for your user control, and then pass settings in the classes. Then use jQuery to replace them. This however requires jQuery to be linked to your page (or within your control) and you'd have to write the CSS classes out to the jQuery code (using server controls, but you could use the literal control so there's no excess code).
Personally I'd go with the option of using server controls instead of straight up HTML, you'd get alot more flexibility, and then passing through the settings would be pretty straightforward, put something like this in your controls backend code:
Private _TextBoxCssClass As String
Public Property TextBoxCssClass() As String
Get
Return _TextBoxCssClass
End Get
Set(ByVal value As String)
_TextBoxCssClass = value
txtBox1.CssClass = value
txtBox2.CssClass = value
End Set
End Property
You most likely want to have a property or event in the control that changes the css. It may end up best to add some server controls or javascript / jquery to make it easier.
If its only the styles you want to change, then you can expose a property to set the style attribuites of the respective control inside your User Control. If you want to control the whole HTML layout of the control then Custom Control is the viable option.
Related
I am needing to create a custom control.
Basically, I'm wishing to create a light weight(and better using jquery) Accordion control.
What are some good references for getting started with doing such a thing. I will be deriving it from a Panel because it's very similar(just needs a bit of JS tacked onto the end) but I want it to only be able to add controls of a certain type. I'm having trouble finding any information about custom rendered controls.
Can anyone point me to some references? Also, for the ID tag in HTML, would you use UniqueID or ClientID?
Any good ASP.NET book should have a chapter devoted to custom controls. If all you wanted to do was add some JS to Panel I would think you could just do this:
public class AccordianPanel : System.Web.UI.WebControls.Panel
{
protected override void OnPreRender(EventArgs e)
{
base.Render(writer);
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "accordianscript", ScriptText);
}
}
Or create a User Control with nothing but a Panel and the javascript in the ascx. Limiting the allowed controls is problematic at best...
As for the ID, always use ClientID to reference controls in client-side script.
I would consider using the AjaxControlToolkit, and look at the documentation there (on asp.net) for how to use that to create a custom control or extender. That makes it easy to create custom controls, and you can embed JQuery in those components. The ACT provides all the plumbing; there is less work for you to use the MS ajax framework and link everything together.
I've used it and it works well, though I must admit I've recently scrapped it for my set of AJAX components within my custom framework (http://www.codeplex.com/nucleo). That was for other reasons.
I missed part of your question; to validate for allowing only certain controls, you can override the AddedControl method, which is called when the control gets added. You can validate control types in this method.
Or, most controls implement a custom control collection, and I believe there is a CreateControlCollection that you can use to create a custom control. This custom control collection validates the control within the Add/AddAt method.
I have some user controls that I want to add some client side functionality to.
Let say 1 control has a hidden field and a bunch of checkboxes. When a checkbox is checked, it sets the hidden field to 'YES'. How could I $get that control in the hosting control or page, and call some function on it that would return the value of that hidden field?
If I have a couple of these on the page, I'd like to be able to do this:
var choices1 = $get('choices1_id')
if(choices1.dirty() = 'YES')
//do whatever
var choices2 = $get('choices2_is')
if(choices2.dirty() = 'YES')
//do whatever
I might be looking for something like this: http://jimblackler.net/blog/?p=23 but I'm not sure how to access the object(s) from the parent.
thanks,
Mark
I take it the problem you are running into is that ASP.Net can mangle the id of the control?
In that case What I normally do is either note how the id is mangled for simple pages, and write the javascript accordingly, or for more complex scenarios I'll check the .ClientID property of each control and put it into variables in a custom script that's easily accessible to the rest of the javascript on the page.
This should be easier than it is, and not having simple access to every control element from javascript is one of my complaints with the ASP.Net framework. They're doing a little to address this in the next version, though not as much as they could. In the mean time, you can find various components on the web that will help automate generating the script I described above.
This I can't work out
I have ASP.Net user control,which is basically two drop downs, that has a public property Index which is calculated from the drop downs, and works fine
I need to access the value of 'Index' from javascript, but accessing via getElementById was completely wrong, can anybody point me in a better direction
Cheers
The property you're talking about is a server side thing and has no presence in Javascript. Basically, whatever ASP.NET does on the server will generate a single HTML page containing a bunch of HTML tags. The browser is not aware of the user control being a single entity at all.
You should calculate the property on the client by looking up the ID of the drop down directly in Javascript. You can do find out the client ID of the drop down by getting its ClientID property.
Create javascript method as a string from server side and use index property to create script string.
register string on which event it is required.
you can take help from following link to register javascript:
http://msdn.microsoft.com/en-us/library/aa479011.aspx
If any server side control is used in javascript method, use ClientID property as ID of the control.
Hope, It helps
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.
Is there a difference in behavior between adding a control to the ASPX page directly and loading a control programmatically and adding to a placeholder?
The control inherits from System.Web.UI.WebControls.DataBoundControl.
The reason I ask is that I have a control that works when I add it to the ASPX page like so:
...
<blah:GoogleMap ID="GoogleMap1" runat="server" Width="640px" Height="600px" ... DataSourceID="_odsMarkers" DataAddressField="Address" DataTextField="Description">
</blah:GoogleMap>
...
But not when I use the following in a codebehind page:
GoogleMap map = (GoogleMap)this.LoadControl(typeof(GoogleMap), new object[] { });
//... set properties
this.placeholder1.Controls.Add(map); //add to placeholder
Anyone have any ideas why this might be the case?
The control tree ends up the same if you define in markup or add programmatically. However there is plenty of room for the control implementor to screw up along the way.
You can go look how ASP.NET compiles the aspx:
C:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files
The timing when the control is added to the page might be an issue. The usual pattern is add the control in an overload of the CreateChildControls method. If the control needs to resolve viewstate you need to make sure this is called during init, e.g. by calling EnsureChildControls.
Adding to ninja's debbugging hint. Does it make any difference if you add a label the same way. Does it show up?
Is this a user control or server control?
If it's a user control they should be loaded by their path and not their type:
GoogleMap map = (GoogleMap)this.LoadControl("~/Controls/GoogleMap.ascx");
If it's server control then you can just new up an instance:
GoogleMap map = new GoogleMap();
after you have the instance and add it to the control tree (by inserting it into the PlaceHolder) it should perform the same as when it would have been declared in the markup.
If you are setting properties outside of the LoadControl call, why are you making that new empty object array instead of just using the overload that has one parameter?
Also, if you attach a debugger to it and step through, do you notice anything weird about the control before you do your Controls.Add() call? Is there an exception being thrown? if so, which one? if not, what does the markup in the browser look like for where the placeholder is?
"Works" is kind of ambiguous, but if you mean, event handlers are never executed, you need to load it in the page onload event.
If the control requires the use of viewstate you must ensure that it is added to the page BEFORE the Page_Load event, otherwise viewstate will not be populated and most likely events and other items will not function properly.
One important difference is that if you create a control dynamically, you will not get, by default, any values from skins set. You must manually call control.ApplyStyleSheetSkin(page): http://msdn.microsoft.com/en-us/library/system.web.ui.control.applystylesheetskin.aspx