Drawing a part of a page only after another part was "submitted" - asp.net-mvc-3

ASP.NET MVC noob here
I was writing a quiz application where a user can select her preferences (e.g. difficulty, number of question etc.), and once she hit a submit button - she got a new page with questions.
The preferences are represented as a "Preferences" object, and the questions are IEnumerable of Question.
This all worked well.
Now I decide both parts should be in the same page - and I don't know how to accomplish that:
Should I have a new model class that is a composition of these two parts?
And also - How will I make the "questions" part appear only after the user completed filling up her preferences and clicked a button?
Should I use AJAX?
I also read a little about partial views and RenderSection.. But I really couldn't understand which approach is the most appropriate for my scenario.
So how should I draw two parts of a page, where the second is only displayed after the first is submitted?
Thanks.

How familiar are you with AJAX? If I had to guess I would think a good way to do what you want to do is to have an AJAX call which is linked to an action when the user submits their preferences. The action can then return a partial view which you can have appear on the page without a reload via AJAX.

Related

Which resources method should handle this view?

I'm currently using Laravel but i assume this question could also be asked with any framework in any language.
If i have a simple form to create an user, with the most basic fields (firstname, lastname, email...), the resource method i'll use will be create to display the view and store to handle the post logic.
After that, the edit form will be displayed in the edit method and the update managed by the update method.
Eventually, the user sheet will use the show method.
Now, imagine i have a view that combine both the edit and show purposes, i mean like a page with multiple tabs, where each tab display information about the user, some charts, some tables, a lot of stuff... but also an edit form in one of these tabs.
Which method should be used to display this view ? edit or show ? Since it acts like a show but also have a form to edit the user... i'm always asking myself and sometimes i have a hard time to figure out which method i should use.
This case often happens in back offices, where some edit pages looks like a dashboard more than a simple form, i'm sure you see what i mean ;)
Is there a convention about this ? Something like "if there is a form it's an edit, even if it mainly show information" ?

Can I create quiz GUI with Django-Forms?

I'm new to django, and I'm working on a quiz project. The idea is to create something similar to this (http://www.stylemint.com/quiz). Basically, there will be a question on each page and the user clicks on an image with the answer. I was planning on using a django form with a radio select input type, however, I'd like the image to act as the radio button (ie, be clickable) and also a click on the image will take you to the next question (instead of having to click submit after each). Is this possible with django, or do I need java?
it's perfectly possible - if you just want a series of images, and clicking on them to take you to the next question you might achieve that by:
Having multiple input fields of type "image" which all submit the form. If you go down that route you'll have to template the forms out yourself or make your own widget.
Using javascript to replace radio buttons with images dynamically. If you do that, it'd be a good idea to make it fall back to a straight list selection for people who don't have javascript.
Ignoring forms altogether and just using a view with a parameter of what the choice is.
Yes, it's completely possible. My suggestion is if you want to save the result in the db use model and model form in django. So, my next suggestion is you can customize model field for combine radio button functionality and image together. But actually you must programming and use a little jquery and javascript to do it.
You may want to see:
https://docs.djangoproject.com/en/dev/topics/forms/modelforms/
https://docs.djangoproject.com/en/dev/howto/custom-model-fields/

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.

MVC3: Showing entity relationships in a view

I am new to ASP.NET MVC and I have a question regarding viewing entity relationships.
Say I have an entity called 'Person'. This holds the usual data relating to a person (Name, Email, etc). I also have a 'Notes' entity. Under EF, a 'Person' can have many 'Notes'.
I have a Person controller where I can view and preform CRUD operations on a Person object.
I can show the notes in the view easily but what is the best way to allow a user to add/edit/delete these notes from the Person view? I am hoping to do this using AJAX and not have the user move to a completely different page to add/edit/delete a note.
Thanks in advance,
ViperMAN.
When they edit a note, popup a jQuery dialog pointing to your URL to edit or have a separate Ajax.BeginForm() on the page that the details go into. When they finish the edit call a method to refresh the notes.
So:
1. In your Notes grid (or whatever)
you have an edit link for each note called "edit"
this link looks something like the following:
This one actually uses 'notes' : )
http://www.iwantmymvc.com/dialog-form-with-jqueryui-and-mvc-3
ASP.NET MVC | Problem about showing modal dialog using jQuery dialog widget
ASP.NET MVC modal dialog/popup best practice
Also beware of this scenario for multiple links:
MVC3 - Only first row link works well with Jquery Modal Dialog
Now the urls you use to populate the dialogs would be for example
/Note/Edit/10
One thing to note - jQuery validation needs to know about these new items that are being loaded via ajax into the DOM , so in your partial view you need to tell jQuery validation to include the new items - I'll edit in a bit to add this, have to grab it from another machine.

Updating data with information received from the view (Grails)

I am writing a Grails app and I have a quick question about the best way to do something. My controller has 2 lists of data, both of which are displayed on the view in separate HTML tables. What I want to do is to have a button that will allow you to move an item from one list to the other. What is the best way to do this?
I have done some research and using some form of AJAX seems to be the general consensus on the best way to do this. Is there any other way? The heart of the problem is that I can't figure out how to update the data contained in the contoller based on the button the user presses in the view.
Thanks
I solved this by just updating the model to reflect the new lists and rerendering the page

Resources