Question

I am attempting a single page application. I understand the main concept of how mvc is used to some extent and am using a lightweight framework called backbone.js. My issue however is not with backbone. I actually am having a problem figuring out how to structure my user interface. I have a bar at the top of the page with 4 buttons. Each button opens an instance window within the application. Within Each of these instance windows html, css, javascript will be utilized. Any suggestions on how to structure the core concept of this user interface.

Considerations on my part:

1. Each window instance has it’s own
   div with a unique ID (display:
   none).

2. On-load, the application should
   already have necessary html, css,
   and javascript loaded into dom. The
   html should be inside each unique
   div pertaining to its instance
   window.

3. Each menu button should modify its divs
   display: to block, bringing the
   instance window for that button to
   front, but hiding all others.

4. Each instance window has to be
   flexible enough to run javascript
   within it, so I must be able to
   create additional mvc’s within each
   unique div.

5. Okay, last comment. Should my user
   interface utilize mvc or is
   it not neccessary. Also, If it did use mvc
   whats the best way to acomplish
   this. There many different concepts
   with mvc, like creating a view for
   each instance window and listening
   for clicks. It just gets confusing.

You think any of my considerations will effectively get the job done, and can you offer suggestions?

Answer 1

If I understand correctly, you want to have each button display a popup window, and be able to change the content of each popup window based on some action? I can only speak for how I would use ASP.NET MVC…

I would use jQuery UI Dialog to handle the popup windows, and have a form tag within each popup that uses its own MVC controller using ajax (I prefer the jQuery ajax command). Using ajax rather than a standard submit button allows you to send/receive data to/from the server without refreshing the webpage. You’ll need the .serialize to convert your form into the correct format for sending. Each controller action can either return a JsonResult (which gives you back a javascript object you can use) or a PartialView (which gives HTML)…

Hope some of that made sense…

EDIT:
To answer your last point, I would have a model, view and controller for each window… but I am fairly new to the MVC pattern…