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
Related
I would like to use more client-side scripts on my aspx page. I'm not an expert in this area and I'm a bit overwhelmed at the options. First, let me spell out what the page is displaying and then what I am trying to accomplish.
The Page:
The page containts a GridView (on the left-hand side) which is pulling data from a DB for different types of products a user can request. For example's sake, let's say we have table, chair, and couch.
What I want to Accomplish:
When the user clicks on a row of the GridView (let's say "table"), the ID of that selected row and the title is copied over to the right-hand side of the page into an accordion pane (or a similar display). The header of the accordion pane will be "Product: Table". When the accordion is expanded, the user has the option to specify the color and size of the table (via check boxes, text boxes, etc.). So essentially this is shopping cart functionality on the right-hand side of this page.
I should also point out I would like a "remove" button for each pane in the accordion so it can dynamically be deleted.
What is the best option for this situation? Should I use jQuery, AJAX (AJAX Control Toolkit?), a combination or a different tool? Thank you in advance for your help.
I would use knockoutJs because it's easy to use, has reasonable documentation and good online support. At a glance it looks easy than backbone as well (I don't know backbone).
I would not use the AJAX Control Toolkit unless I had too. I HATE the ajax toolkit as everything happens 'by magic' and once you step off the path shown in the simple demo's you are dead.
Knockout does require a little investment of time, but I consider it a great framework for web apps that require moderate javaScript use.
I have an ASP.NET page with a Wizard control containing several pages of form fields. The data is collected and inserted to a database from the code behind page. I need to set this form up so you can not only insert, but edit a record as well. Since the form is long and complex, I would rather use the existing one and not make a duplicate one for editing, especially since I want to keep both forms exactly the same and any edits would have to be made to both. But it looks like this is what I need to do if I'm going to databind it. But this would also involve putting the Wizard inside of a FormView, and then I'd have to use FindControl to access any of the fields which would mean altering all my already-existing code (which of course would be time-consuming). So should I manually enter all the values from the code behind instead of databinding it? Which is better, to use a FormView and have duplicate forms (plus have to go in and redo the way I access the fields), or to do everything from the code behind?
I cheat in this circumstance. :)
Create each screen as 2 separate user controls
One for edit, and one for view
Then you get access to all you usual coding
Then embed the controls into the Wizard/FormView
I would suggest you to Go Ahead using FormView, as using DataBind control you have more control the functionality and layout Insert/Edit/View template. Since you have specified that your form is very complex and long, if you control from code behind you have to do lot of work to handle this in code behind and lot code required.
Since I have personal experience to develope very complex form using FormView and it was easy for me bind the Value in directly in formview instead if you assign/Get Values of each conrol in code behind and sometimes you have to hide.
I have a user control which contains a number of child controls. I want to be able to change the layout of the control (i.e. change the markup surrounding the child controls) via a property of the user control, but I don't want to have to duplicate the child controls themselves. This precludes using, say, a MultiView with different versions of the layout in each view, since in that case I'd have to duplicate the controls. I'd also rather use markup than emit the code for the control directly (as you'd do in a server control).
To give a contrived example, say I have a label and a textbox. In one layout, I want the label and textbox to be contained by divs and laid out on top of each other. In an alternate layout, I want them to be contained side by side in a table.
Should I just go ahead and duplicate the controls between each view? It seems like a violation of the DRY principle, but I'm not sure if I have much choice. A partial solution would be making the views of a multiview into naming containers so that I could at least save myself the time of having to prefix the duplicate control IDs with something to make them unique.
Thanks! Please feel free to ask if the above doesn't make sense.
You could use a templated user control to define header and footer templates for each section of the user control. From there you can use CSS and/or public properties on the user control to style the pre-defined (non-templated) components of the control.
It really sounds like maybe you should go ahead and create a server control instead of just a user control. You'd have to create the markup in code, but it would allow you the best flexibility.
An idea is to create a second user control, that is clone with the first on the design file but have the same code file.
FileLayout1.ascx
FileLayout2.ascx
both of this have
CodeFile="FileLayout1.ascs.cs" Inherits="FileLayout1"
FileLayout1.ascs.cs
You can load the 1 or the 2.
The limitations/problems are that both ascx must have the exactly same control names, and you have the same control 2 times (but the code is only one time)
From my point of view the good think is that you free to design the layout as you like on both way.
I am trying to create a form that is made up of controls with values that represent an entity with multiple child entities.
The form will represent a product with multiple properties where the user will then be able to create options with multiple properties which in turn be able to create multiple option-items with multiple properties.
My question is what is the best approach? Can i use ajax to avoid postbacks and having to rewrite the controls to the page? If i dynamically add the controls in the form of table rows or grid rows will the data/control values be available in the code-behind when i submit?
This is an age old question.. the last time i had to do this was .Net 2.0, pre-ajax (for me) and i was forced to recreate all the controls on each post back. thanks!
If I'm understanding your question correctly, you want to dynamically change form elements depending on some kind of selection criteria without refreshing the page? Javascript can do this for you. If your elements rely on data from somewhere, such as options for a select menu, then yes you will have to use an ajax request to populate those. If they are static options, then pure javascript will work for you. And though the source won't indicate your generated elements, they will indeed be available for a submit. I hope this 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.