I am using ASP.NET MVC 3 and am attempting to populate a list of editor templates dynamically based on the selection made in a dropdown. I have no code to post because I am not sure what is the best way to achieve my purpose. My question is not how to use editor templates, but how to use editor templates when the list of related objects changes based on a user selection of the "parent".
Background:
Employees need to complete training checklists for operations they are trained on. The employee will select a checklist template from a dropdown menu, and then checklist items will populate based on the selected checklist template. (Each template has a different set of related items.) Each checklist item is associated with a blank response that the user must mark was completed. The checklist item is for display only; the response is what is being edited.
I know I can populate the checklist items via AJAX & Json, but is there a way to do this using editor templates--with the result of checklist items dynamically displaying based on the checklist template selected? One solution is to use one page to select the template, and then another page to display the checklist items; I would like to avoid this and keep everything on one page if possible. The goal is to populate the checklist items (and blank responses) based on the checklist template selected.
Caveat:
Each checklist will have a predefined number of blank responses based on what items are related to the checklist template, so the list size will not change during the completion of the form.
Model:
[ChecklistTemplate] 1------------* [ChecklistItem]
[ChecklistTemplate] 1------------* [Checklist]
[Checklist] 1------------* [ChecklistResponse]
[ChecklistResponse] *------------1 [ChecklistItem]
Any and all help is appreciated. Thank you.
For those type of tasks Id suggest to look into: http://knockoutjs.com/
On client side you have tho options:
1. Postback to server (Stinky stuff IMHO).
2. Do some clientside JS.
Id prefer Knockout for clean MVVM approach with events on model change. Made some very complex editors with it and works like a charm so far.
Related
I would kindly ask for your help :) From couple of days I am trying to achieve "linked" custom field in content editor and dropdown in page editor.
Basically I want to have dropdown in page editor and content editor which are responsible for a same thing.
In my c# code i have enums which represent directions. I created custom field which accepts assembly and class with overridden onload method and successfully populate dropdown values in the content editor. So far so good but i have no idea how to create dropdown which will represent the same functionality inside page editor.
So please give me any ideas...
Judging from your reply to my comment you need to think of the following: How is my field value being rendered onto a page?
If you are always using 1 control to do this then you just need to ensure that this control has 2 different rendering modes depending on the Context.PageMode
But as I understand it you want this dropdown to also appear when someone renders your custom field using a <sc:FieldRenderer>. In this case you'll need to look into the RenderField pipeline of Sitecore. There you find a processor called RenderWebEditing. Possibly through some manipulation here you can get your dropdown appear as you wish.
I want to enable a pair of cascading dropdown lists within a form in an ASP.NET MVC3 / Razor2 application. Ideally the solution will meet the following goals:
Child list populated simply by changing the selection of the parent list
Both dropdown lists contained within the form as they need to post information on submit
Uses Ajax to avoid whole page round-trip
Uses Ajax Html helper for easy integration
Works even if javascript is not enabled
So, from a user point of view, when an item in the parent dropdown is selected, the contents of the child dropdown is refreshed to display items related to it.
Can anyone please suggest the best way to do this?
EDIT.
No takers ... suggests to me that there may be conflicting requirements in the above list of goals. The closest I got to the above was this article, which met all the goals except that it doesn't work nested within an Html form.
So, I will restate the problem in a different way: how can I make an AJAX call from a dropdown list within an Html form so that I can populated another dropdown list with related items?
Took some time to find a reasonable solution to this, although so far I still don't have a no-jquery fallback. This article shows you how to use AjaxHelper extensions to create your own Ajax-enabled controls. Works a treat, and very reusable.
I have a Magento product page producing static select elements, to which the price mechanism is tied in to backend, so i can't touch those dropdowns. I am using an angular.js radio element to recieve user input, which should in turn update the static dropdown's selected option.
I don't know how to link the two, I have recreated the problem here: http://jsfiddle.net/ldn_tech_exec/smBdC/1/
I want the radio button to update the dropdown, but I can only manipulate the dropdown after it has been created, perhaps using jquery to insert any angular directives required.
UPDATED again: Your select list needs an ng-model and the options should be generated with ng-options. When you select a radio button, the controller method you trigger should update that ng-model, which will cause the select list to update.
See http://docs.angularjs.org/api/ng.directive:select
Another way to do this is to use ng-selected. See
http://docs.angularjs.org/api/ng.directive:ngSelected
UPDATE #3: I missed the fact that you can't modify the select list initially. See my fiddle in the comments below for a working solution.
It sounds like you have some product where the price depends on the options set.
If this is the case then updating the drop-down from your radio button is relatively trivial - or at least depending on your prototype/jquery skills.
However there is a gotcha: once you update the drop-down in javascript with an 'invisible hand' there is a whole lot more javascript code to update the price and availability. To do this you need to bubble the event. This doesn't happen automatically if using prototype.
I hoped I could rustle up the 'bubble code' but I don't currently have it to hand, besides, you aren't stuck at that point, yet...
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.
Im new to MVC3 so please excuse me. I have the following situation: I have a simple order form and each order can have multiple products attached to it. I want this all to be on one form, so the user will be presented with a form to fill out all their information as well as select a product from a drop down list. They can then click "Add Another" and another dropdown list will appear from which they can select another product. My question is how do I access these dynamically created dropdownlist values from the controllers action? I come from Webforms and so am still trying to wrap my head around things.
Any help much appreciated.
Thanks
here is an excellent post for making master detail in mvc.net
http://zahidadeel.blogspot.com/2011/05/master-detail-form-in-aspnet-mvc-3-i.html
also model binding to a list by phil haack is a must read