I've created a Windows Forms Application in C# which allows users to add controls to a TabPage which they can resize and reposition. Now I want to do the same thing only in ASP.NET.
I managed to add the controls dynamically following this tutorial. I use jQuery UI to make them resizable and draggable. The problem I encountered is that when I add a new control all the others are reverted to their initial position and dimension.
I assume I have to save their position and size and apply them to the newly created control on LoadViewState. Is there a way I can view this attributes from code-behind? I've managed to get these info using Javascript but I don't know how to get it into code-behind.
Can someone please point me in the right direction? Thanks in advance.
[EDIT]
Thank you for your answers. Here's the code:
HTML C#
You need to store the positions and dimensions of the controls and pass those values to the server when you click the add control button.
You have a few options of how to do this.
Query String
Hidden Form Fields (<input type="hidden">)
Hidden Text Box (hidden with style="display: none;")
You can use JavaScript to set these values, then apply the positions in your code behind after adding a new control.
Related
I'm writing an ASP.NET app in which a table of objects is created by the user client-side.
I envisage them clicking "Add item" and a new 'row' is created in the table with textboxes for them to enter their stuff.
I can do this fine by adding HTML with jQuery. The problem is that one of the fields in the row for the user to fill in needs to be a colour picker.
I have an ASP.NET web user control for my colour picker. How do I add an instance of it to the page within my html row? Or am I barking up the wrong tree here - is there a better way of encapsulating the functionality of my colour picker so that it can be put on every row?
No, you can't add a server-side asp.net control to a page that has already been rendered using client-side techniques (aka Javascript)
Two options:
Firstly, switch to using a client-side colour picker. You can then have the data from this included in the post-back by dynamically adding hidden fields to your form.
Secondly, have a single editing panel which includes your colour picker. Users then select a row to edit, which updates the edit panel with current values etc. Values are stored in hidden fields created when you dynamicaly add rows to your table, and included in the post-back
Without seeing your UI, I can't comment as to which would be best. The asp.net control might look nicer, but it might be difficult to work into your design. A pure client-side solution might fit your designer better, but might not look so good. You also need to consider what happens if / when a users adds lots of rows (this might be 10, 50 or 100 depending on your app /code). Lots of dynamically added controls (the first solution) might cripple the performance of the page.
I'm not sure what version of ASP.NET you're using, one approach that would work is to turn your usercontrol into a custom control. You'd then need to implement ICallbackEventHandler (the first way to do Ajax on asp.net); for sure it's a bit more work but it does give you a good level of control.
Alternatively, you could try this
You can't add ASP.NET controls with jQuery (at least not easily). You could, however, perform a postback when you need to add the colour picker to the row.
In the code in front declaratively define a template of what the new row should look like, then hide it using css.
When the user clicks the 'Add new button' select and cloen the contents of your hidden template and write that into your target div. Just make sure to remove the hiding css when you do this.
You will, of course, just be copying the rednered html of your server controls, but htis apporach may give you a quick and easy way of doing what you need
I am building a modal box as a custom server control and I want to have a property on the modal box TargetControlID that specifies the element that will show the modal when clicked. I've set the property up in the modal box and in the code behind I use the following code block (which I've tried in several different places
If (_targetControlId <> "") Then
Dim targetControl As WebControl = Me.Page.FindControl(_targetControlId)
targetControl.Attributes.Add("onclick", "test1();")
targetControl.Attributes.Add("onclick", "test2();")
End If
What happens is that targetControl always winds up to be NULL, and causes the page to crash when I tried to add attributes to it. I've double checked the spelling of the targetControlId and I am specifying a control that is runat="server". What is the proper way for a server control to access other controls on its containing page?
Thanks,
Mike
First of all, I should point out that the behavior you're looking for already exists in the ModalPopupExtender that comes with the free, open-source AjaxControlToolkit. I'd recommend you just use that. If you're still sure you want to write your own, then I'd recommend at least taking a look at their code to see how they go about it. ExtenderControlBase.FindControlHelper is a good place to start.
iam into problem of reading the value of the control which i alterd using javascript
the sequence goes like this
i got the text box control by using its id
cleared the value of the text box
make the control disabled.
when i tried to retrive the value of the textbox in aspx.cs
iam still getting the old value of the text box which i actualy cleared in the javascript
kindly suggest me to over come this issue
Thanks
Disabled input controls don't get their values posted back so ASP.Net doesn't know you changed the value. You need to enable the control.
With ASP.NET Web Forms, IDs for elements get assigned automatically by the Page on the server side. It is tricky, but possible, to manipulate element values using javascript. One way to avoid this would be to use ASP.NET MVC where the HTML would be rendered as is and javascript or jquery can be easily used to "play" with the HTML elements. We need more information to help you with the details of your request.
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 am developing a form using all asp:textbox and asp:label. Currently, I am using the RequiredFieldValidator to validate text boxes and display an error inline. What I am trying to do is to change the color of one of the asp:labels after validation fails for one of the textboxes fields. Would I accomplish this with javascript, or is there any commands that can do it within asp to modify labels. I would really appreciate any help and code examples.
I'd say that javascript is the way forward here if you don't want to postback to the server. If you use ASP.NET only the page will normally have to be posted back so that the server can change the properties of the label - not very user friendly. A colleague of mine has accomplished this very nicely using JQuery (a javascript libraray) but unfortunatly I don't have a copy of the code to hand. He's an SO user too so I'll pass on a link to this post for you.