EditorTemplate as a dynamic form - ajax

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.

Related

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.

Using view model in Partial View defined in Layout

This is all hypothetical, and wondering how and if this is possible.
I have two different strongly-typed views that use two different models. For example, I have a View1.cshtml, and View2.cshtml. Each has it's own model: View1Model.cs and View2Model.cs. Each of the view pages uses a common layout (_Layout.cshtml) that has a PartialView (_WhoAmI.cshtml).
In the View1Model.cs there is a UserID field (with various other fields) and the View2Model.cs also contains the same UserID (with different fields than View1Model.cs).
The partial view will lookup the UserID and display the User's information in a small display .DIV.
What is the best way to do this and keep the PartialView strongly-typed? Is it even possible when both models of the view are so different (other than the UserID)? If so, if I use this PartialView again in the _Layout, how do I keep it from doing the User lookup two times in the Layout page for each time the partial is called?
Thanks in advance!
Instead of Html.Partial you could use Html.Action and have a child action rendering the partial and doing the necessary lookups.
I assume that if partial view has model of type dynamic then what you ask might be possible, but haven't tried it myself. At least MSDN says that dynamic variables are bypassing static type checking and at runtime they are only checked for existence of specific methods that were called from code.

How to Handle Mutiple Model Bound Forms

I am buiding a UI screen for editing the details of an Ecommerce Order. The model for my view (OrderModel) has everything I need (in properties that are also ViewModels), but the UI isn't designed to be able to edit all of it at once.
For example, one part of the UI is for customer data..another for order details, and another for tracking information, each having their own "Save" buttons.
I realize that I could use one giant form and use hidden form fields to populate the non-editable fields, making each "Save" button post all the data, but that smells bad.
I'd like to segment the editable chunks into smaller ViewModels that are posted and validated individually while retaining the strong typing but I'm unsure of how to achieve this in MVC3. Will I need partial views that are called from the primary view?
FYI, I'm using ASP.NET MVC 3 with Razor syntax and client side FluentValidation.
Partial Views are a good solution. You can pass different ViewModels to each partial view. But if only sections of the overall view are updated at a time I would not do a post back on the whole page. Instead I would use Ajax calls using JQuery/Javascript to update the individual information back to the controller. I would also look into something like Knockout.js to handle the data binding on the page.

Dynamic editable table/grid generation with postback in MVC

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

How do I process a complex graphical UI element in a django form?

I have a few complex GUI elements (like a custom calendar with many days that can be highlighted) that appear along with standard django form input fields. I want to process the data I/O from these complex forms along with the Django forms.
Previously I would use AJAX requests to process these custom GUI elements on my HTML form after the Django form was saved or rendered, but this leads to a host of problem and customized AJAX coding. What is a good way to handle complex interactions widgets in a Django form?
Not sure if I understand completely, but you could have the value of your UI saved into a hidden element on the form via javascript. This can either be done as they select the values in the UI or when they submit the form. Pseudo-code assuming JQuery using submit() to save before the submit data is sent:
$('#myForm').submit(function(){
// get the value of your UI
var calendarValue = calendarWidget.getValue()
// #calendarData is the hidden field
$('#calendarData').val(calendarValue)
})
This obviously requires JS, but so does using your UI element.
Your question is very vague so I suggest you read the Django documentation on writing a custom field and hopefully that will help you get started. You might also want to investigate writing a custom widget. Unfortunately the documentation is bit lacking on that, but a Google search brings up several useful blog posts, including this one.
You have three options depending on how you output your Django Form subclass to the HTML page.
The first doesn't involve Form at all. Any html form inputs will end up in request.POST, so you can access them there. True, they won't be bound to your Form subclass, so you would have to manually inject the value either using a custom form constructor, or by setting some property on your Form object after instantiating it with request.POST. This is probably the least desirable option, but I mention it in case your use-case really doesn't support anything else.
The second is an option if you manually output the form fields in your HTML (ie: using {{ myform.field }} rather than just {{ myform }}. In this case, make a hidden variable to contain the value of your calendar GUI tool (chances are, your GUI tools already offer/require one). Add this hidden field, with the right name and ID, to the Form subclass itself, making sure it has a hidden django form widget. If necessary, use javascript as Rob suggests to populate the hidden field. When the form is posted, it will get bound to your form subclass as normal because, this time, you have a field on your Form subclass with that name. The machinery for clean() will work as normal.
The third, and best option, is to write a custom django field; Andrew's post has the link. Django fields have the ability to specify js and css requirements, so you can automatically encapsulate these dependencies for any page that uses your calendar widget.

Resources