I have to build a page which contains some text boxes and a grid layout. There is an add button next to the grid, clicking on which should results to creating a blank row in the grid where user can fill the required data. User can continue adding data to the grid as per the wish and finally click the submit button on the form. This submit should post the entire data(data from the text boxes and grid) to the server. I am using MVC2 with VS2008.
Please let me know how should I proceed to achieve this in MVC ways. As it involves lots of client side handling i.e. building the grid item collection and validations I want to know which approach I should take.
Thanks in advance.
I went with KnockoutJs grid editor.This perfectly suited my requirement. http://knockoutjs.com/examples/gridEditor.html
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'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.
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
And this was supposed to be so easy...
I have existing business and data access layers that handle the retrieval and update of the data in question. These work great with the existing Winforms application (.Net V2.0)
Now, in trying to write a new web-based UI, I'm running into all sorts of problems (last time I wrote asp.net code was in 1.1). Specifically, I can't data bind a text box to a business object. Oh, sure there's the ObjectDataSource but that wants to know how to do CRUD operations on the data.
What I'm looking for is something that acts like the classic binding objects so that, in my code, it's as simple as retrieving the object and doing a a refresh. The data component like FormView and DetailsView are so generic-looking that it's ridiculous. The existing application would have tabbed dialogs, text boxes grouped by panels, etc.
On top of that, I have a directive to use master pages and unless one control causes it, I can't seem to get the content section to expand. I can't just put a text box below the bottom of Content1 and have it re-size the content section - which gives me the same results as an earlier question I posted when the footer wasn't being pushed down - relative position solved that but doesn't seem to solve it with placing small text boxes in the area.
What I want is fairly simple. Something like:
bindingobject.datasource = businessdataobject
bindingobject.refresh
...and have the text boxes refresh with the new values. Likewise to have businessdataobject properties updated as the user enters new data.
I was able to do this with the GridView (grdRequests.DataSource = lstRequests) by making a list of asp:BoundField tags inside the <Columns> collection of the GridView.
Am I tilting at windmills here?
Why don't you give the Patterns and Practices (1) ObjectContainerDataSource a try? It's part of the Web Client Software Factory which is available (2) here.
I've used it a few times, it gives you the ODS-style design experience (design time binding) but full control over how you provide the data source. You just implement the events you are interested in (e.g. Selecting event). It also has server side paging and sorting support so it's quite useful for GridViews.
It might not be flexible enough for what you aretrying to achieve, but it's probably worth checking out if only as a PoC.
[ (1) http://www.codeplex.com/websf/Wiki/View.aspx?title=Object%20Container%20DataSource ]
[ (2) http://www.codeplex.com/websf ]
Any ideas on how I can acheive 'Hierarchical' gridview?
Basically I want when the user clicks on the '+', i "expand" and insert new rows without a full page post back.
Does this sound like a lot of AJAX stuff? Or should I read on ASP.NET MVC
Please point me in right direction
Another way to do this is the old Grid view inside a Grid view Trick. The basic concept is to have the [+] and the parent data as the Item data in a single templated column. Attach the to click event of the button and set your grid to edit/selected mode. when its in edit mode, render a second grid view with the child data. Although its a gridview inside a gridview, visually it will accomplish a "hierarchical" view.
Sample source code for Hierarchical GridView
with [-] and [+] to collapse and expand as in VB6 Hierarchical Grid
You have two options I suppose:
You can render out those rows you want to insert, and the [+] shows them and hides them
You don't render them out, and they are sent to the browser via AJAX, and then inserted into the table.
I've done it both ways, and the more gridviewy way to do it is the first, in my opinion. You can create a new templatefield for the [+]; define a child relationship name, and then call GetChildRows (or an equivalent) on each row as you render, having those rows render hidden.
#bnkdev - GridView inside a GridView sounds like a total mess.
#Jandwenyi - I suppose you're doing this for a certain scenario and you'll need to reuse it at some point, as unprobable as it may seem now. My suggestion - find a third-party Grid control that would do what you want - there are so many out there.