Dynamic editable table/grid generation with postback in MVC - asp.net-mvc-3

I need to generate a table in MVC that can have a variable set of horizontal columns (years). I need to render a textbox in each cell and I need to postback the values to a action method. I have seen examples where the editable cells are generated but the columns are fixed (using partials). I have also seen examples where the table can be rendered with dynamic columns but without the editable cells/textboxes. Can anyone suggest an approach?

I would recommend creating the dynamic table with a textbox in each cell with an onchange action to send the data via ajax to the controller for the update.
You will probably need to pass a multidimensional array within the model and use it to create and load your table.

The question is though how are you expecting to handle this on the server side?
If you name them all sequentially and know the # of columns ahead of time the model binder CAN bind to a list for you if they are all named in the appropriate format. Do you want to generate the list from a model or some other method?
Phil Haack covers how the naming format is, although the EditorFor will handle this automatically in some cases. If it doesnt work in yours, simply naming them in this scheme should work.
http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

Related

Generate Table dynamic inside a form

I am having a little problem with the form system in Symfony 3.3.
I do want to generate a table of form-fields inside a form, depending on the data the user is selecting inside the form.
For example, I have one field with a daterange, that I want to use for the days beeing displayed on the x-axis. On the y-axis I want to display the data the user has selected from a multiselect, that has 1..3 different categories.
The goal is to generate a table after these fields are selected, that has an integer formtype for each cell, that can be changed by the user.
I am quite new to symfony and this really makes my head hurt.
My question is, what would be the easiest or at least most clever concept to achieve this goal in Symfony 3.3?
Have a look at Symfony Form Events: https://symfony.com/doc/current/form/events.html you might be looking for preSubmit or postSubmit.
You could also look at a data transformer: http://symfony.com/doc/current/form/data_transformers.html
Finally based on you wanting to render a table, you could probably do this just in twig templates: https://symfony.com/doc/current/reference/forms/twig_reference.html

Cocoa bindings issue with three tableviews

im a osx-dev noob that is trying to build an application with three table views that will show the content of a core data store entity. But each table view is filtered on the attribute "status" of the entity.
the problem occurs when i also want to show the selected entity in textfields. I'm using three different array controllers with different fetch predicates. But in a textfield i can only bind the value to one array controller.
should i ditch the bindings and do it all programaticly or is there a simple solution to this? :)
here is an screenshot so you can grasp my app description.
Keep bindings to populate the text fields if it satisfies what you want to do with this GUI. I'd add an NSObjectController to control the one entity those fields represent. If you want the user's changes to those fields persisted, bindings are still awesome.
But I think with three tables that might control what's displayed in the text fields, you're going to need to have some sort of non-binding glue code that determines which of the tables wins. You can probably do everything you want by implementing some of the NSTableViewDelegate protocol.
If the text fields should display the last entity that the user clicked in any of the tables, simply have each table call the same tableViewSelectionDidChange delegate function. All three tables could have the same delegate. You can then call setContent on the NSObjectController from that function.
You could also use similar glue code to prevent more than one selection in any of the three tables, by having the same delegate function deselect everything in the other tables either through the view or the controller. But that's up to you and needs consideration of whether you want multiple selection, etc.

Loading an EditorFor template dynamically via Ajax

I have a Model object with a List collection of sub objects. I need to load the form fields for the sub object to the page, and provide a link to dynamically add form fields for a second object. So in other words, multiple sub objects can be created via one form and one post back.
My first thought was just to put the form fields in a partial view and load the view via Ajax.ActionLink. This worked but the problem comes in when trying to uniquely identify each object in the collection and bind the collection of objects on postback. For this it seems the correct usage would be to use an #Html.EditorFor() helper, but I don't know how to call that via Ajax to dynamically add the object's editor template to the page when the link is clicked.
It sounds like you were on the right track with regards to a partial view, you'll just need to sort out the name property of your inputs so you can correctly bind to a collection of objects.
Have a look at this article by Phil Haack explaining how binding to lists works, or google for something more up to date with razor syntax.

EditorTemplate as a dynamic form

I have a form that will load some fields when the page is requested and some other fields that will be loaded as the user choses one option in a dropdown. The fields that should be loaded upon selection are EditorTemplates. Is there a way I could make it work without the need to refresh the page (i.e a partial view requested via ajax) and keeping the "binding" to my viewmodel?
Yes, this is possible as long as you respect the naming conventions of your input fields so that the default model binder can understand them. Here's an example of those conventions for lists. And here's a great article illustrating how you could implement editing a variable length list.

How to pass rows added client-side in MVC3 webgrid back to controller?

I have a Model that contains some string fields and a List. In the view I use EditFor for the fields, and want to use WebGrid for the List.
Display works fine. But then I use jQuery client-side to let the user add rows to the table generated by the webgrid, which also show up fine on the UI.
However these rows don't appear to be tied back to my model's List upon a submit. In the controller I see that the posted model's string fields contain whatever was entered by the user. But the model's List is empty - it doesn't contain the original values nor the newly added values.
How can I cause the model posted back to the controller to be fully populated, including whatever the webgrid-generated table looks like now, just like fields are?
I see several other questions like this for webgrid on the forum, but none with an answer.
I suppose you are comming from WebForms world. Well this is different in MVC. Here you are back to plain old html and its input fields. No viewstate to hold your rows. Check this link: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx.
Basically you need have consecutive index (or ID) for each row.

Resources