How do I model different MVC levels - model-view-controller

I'm coding a menu, that might look something like this:
I wanted to code this using the MVC pattern. So I started drawing a UML class diagram for the model, and got this:
But I wasn't happy. I couldn't come up with a good interface for the controller to interact with. Then I realized that for example the NumberMenuItem itself could (should) be split up in to a model, a view and a controller. The model would be the number. The controller would be the - and + used to decrement and increment the number. And the view would be the label displaying the current numeric value. The other MenuItem subclasses can also be split up in MVC parts.
So now the question is:
How do I model this now that CommandMenuItem, NumberMenuItem, StringMenuItem, and SubMenuItem are actually MVC triads themselves but on a lower level?
P.S.
The implementation will allow for example a NumberMenuItem to come in the middle of a menu (showing only - # +, i.e. without any descriptive text), but my external API will make sure that NumberMenuItems and StringMenuItems are always the sole item in a submenu, like in the sketch I posted. Might hide the titlebar of the submenu though.

I think I've got something that could work now.
I made lower level MVC triads where the lower level model is part of the bigger model. Same for the controller and view.
Only thing I've been able to find about this on the web is this: http://www.purpletech.com/articles/mvc/mvc-and-beyond.html

Related

How can I take better advantage of Entity Model validation?

I currently have:
#Html.EditorFor(model => model.PurchasePrice)
I would like to split this into 2 separate fields separated by a decimal (for price input obviously). But if I do that using basic text boxes I will loose the ability to take advantage of ASP.NET's validation.
Is there a way to do this, in Razor or by using attributes, so that I am able to keep the JS and server-side validation against my Entity model?
I can easily do it somewhere else by creating my own functions within the viewmodel, but I'm new to MVC3 and not entirely sure if that would be the best route or there is a simpler method.
Edit:
This is kind of the direction I am thinking, I do not fully understand how this works.
I set 2 fields, 1 as ppDollar and 1 as ppCents. In the controller I have:
modelname.PurchasePrice = Request["ppDollar"] + Request["ppCent"];
But, I can look at that and tell that's not going to work. So, I guess the question really is how is user input validated against the entity model and how can I better take advantage of the built in functionality?
You can create custom editors for particular types that are rendered by EditorFor. You can find a lot of examples of how to do this online, most of them focusing on a custom DateTime editor but the same idea applies to any type. Just one example from a quick search:
http://buildstarted.com/2010/09/10/overriding-displayfor-and-editorfor-to-create-custom-outputs-for-mvc/
In short, the process is:
Create a partial view template, placed in the Views\Shared\EditorTemplates folder, with the same name as the type (e.g. Decimal.cshtml).
The view should use, as its model, the type you want to display: #inherits System.Web.Mvc.WebViewPage<System.Decimal>
Make the view display whatever you want, using some field naming convention or whatever.
You can also pass HTML attributes via the appropriate EditorFor overload, referenced in your template through the ViewData.ModelMetadata.AdditionalValues property.
One thing to note: once you define an editor template it will be used for every call to EditorFor. You can scope them to a specific controller by moving the EditorTemplates folder into the appropriate view subfolder instead of the shared one.

How do you design a text-based view using Ember.js or some other MVC javascript framework?

I have an homemade javascript which, among other things, do some kind of text-formatting work in order to emulate a retro text-based game:
When developing it, i tried to stick close to an MVC model, and this is what i did:
The data model basically consists of a list of objects mapping strings to very specific locations in the display, like this
[{
"value":"Hello!",
"color":"blue",
"row":1,
"column":13
},
{
"value":"What is your quest ?",
"color":"red",
"row":5,
"column":10
},
/* ... some other data */]
Then my view consists of a simple <pre> tag. When my controller draws the model on the view, it iterates through each string-location pair and create a <span> for each one that is appended to the <pre> tag. To keep the formatting consistent, it also adds "blanck" span each time it is needed.
<pre>
<span> </span><span class="blue">Hello!</span><span> </span><br>
<!-- ... other lines of the scene-->
</pre>
It's pretty simple, but it worked great until i had to dynamically change a span text value, without redrawing the whole scene each time.
So i took a look on the internet and realized that Ember.js existed, it really seems to be exactly what i could use to improve my whole code.
Now, i tried to redesign it using Ember.js, but as i don't fully understand yet its features i ran into a problem:
How do you represent a 'text-based' view into an Ember.js handlebar template ?
What am i missing here?
My data model contains both the value and the position in the display, so i don't exactly see how handlebars template could fit my needs. Or perhaps dynamically generating the template is an option ?
What do you think ?
Am I choosing the wrong framework or misunderstanding its use? is it my original MVC design that is wrong ? Changing the data model for something completely different is not an option i can easily consider as it would impact everything.
Do you have any ideas on how this could be implemented using Ember or some other framework?
Any advice will be appreciated :)
I made a rudimentary example on jsfiddle on how you could use ember for this.
Each row is an object and we have an ArrayProxy holding such objects. Thus if we have 10 rows, we have 10 row objects.
The view is binding one output line per row object.
Enjoy the flying bird:
http://jsfiddle.net/algesten/YMrW3/2/
Edit: Better to {{#if}} away empty rows as pointed out by ud3323:
http://jsfiddle.net/ud3323/92b24/

Chose implementation of the view controller of my non anemic domain model

The title might not be easy to understand but it seems to me it is a basic design question when dealing with smart models.
I have a hierarchy of model objects that represent different types of document.
Say I have a view with different buttons, each one opens the document of the underlying object model. When I click on a button I have to display a view whose controller implementation depends only on the underlying model object class. How do I get this implementation ?
(It could be in the implementation of the button but then the question becomes how do I get the implementation of the button)
Should it be a factory that takes as an input the type of my model and returns my view controller ? Should it be my model that knows how to build its controller (seems dirty nè ?) ? Should I use composition ? Something else ?
I hope I am being clear enough. I am a bit struggling with this !
Your question is too abstract to give a specific advice. MVC pattern appears in many forms and in many technologies. For a web page it will have one shape, for a WPF app it will have another. In general there are both "view-first" and "controller-first" approaches. You can start with any one and see if it comes natural for your problem, if not -- refactor.
One other area you can explore is the area of modern composite application frameworks which provide out-of-the-box modular MVC\MVVM solutions. If you're writing for web, read about ASP.NET MVC and its best practices. If you're writing for WPF, read about MVVM approach and take a look at Prism, for example. You might find that your problem is already solved by existing tools.

Partial View or HtmlHelper for displaying list of items

I have a model that contains an IEnumerable of a list of custom objects. Each item needs to be displayed with about 6 fields and an image. So, I won't be using a grid to display the items, rather a div and styling to achieve the look I want. With that said, I'm looking for the appropriate approach. In the book I have, Pro ASP.NET MVC 3 Framework by Adam Freeman and Steven Sanderson, they give an example of doing something similar in their Sports Store application, where for each item, they use this code,
#foreach(var p in Model.Products) {
Html.RenderPartial("ProductSummary", p);
}
Most other reading that I've done, and what seems to be a preferred approach to this, would be to use an HtmlHelper that does basically the same thing.
Which is preferred and why would I use one approach over the other?
Thanks
EDIT
I should have mentions that each of my items will be enclosed in it's own form and have a submit button. This may be the reason the authors of the book I mentioned used the partial view.
In my opinion, I would go the helper route if there is a chance that the code would be reused somewhere else. Could it be used on another page? Or in another project?
Something else to think about...
Helpers also help you to encapsulate view code so that you can keep your view clean and simple. How complex is that view? Would encapsulating some of the code assist in making the code easier to read and maintain?

MVC3, custom object lists and searching

I'm new to MVC3 (and MVC in general) and looking for a bit of advice. Pointing me in the direction of some good articles or tutorials would be good enough I think. I'm a bit familiar with the concept of MVC, and I've been a c# programmer (hobbyist and partly professional) for a while now.
The issue I have is that I have an object (call it "Game"), which has a List<T> as a property (call T "Player"), and I want the user to "select" the player to add them to the Game.
All players would be managed in another part of the application, so there is no need to think about "managing" the master player pool at this point.
I'm looking for a best practice for:
adding custom objects to a list that of n length while on a page.
Searching for and selecting a custom object in the first place.
I can do the standard pages for the database access so that's not a problem. In asp I would have just done something like a wizard and managed everything through postback on the page, but I want to try and keep to best practice where i can for this project.
Any pointers welcome, also looking for some good physical books to buy on MVC.
If I understand you correctly you want two elements within the page, a player search (over all players) and a list of players already added to the game.
For the player search you want to use a bit of jQuery to hook up an actionResult that returns a JSON result of your player results. You can then display these results without having to leave the page, in appearance much like an AJAX post in webforms.
You have more options for how you add the player to the game, depending on if you want to add more than one at once, or want a backout stage (so you can "add" players and then cancel out and they won't be added).
the option I think would give the most seamless interface would be a jQuery/javascript call to an action method which datawise adds your player to the game, and use jQuery to add the element to your players in the game on the page.
For the adding of a player in your controller you could return a bool in a JSON result, just you have confirmation that the player was successfully added to the list.
For reference: This is quite an old article but highlights the power of working with jQuery and MVC quite nicely I think http://andreasohlund.net/2008/12/21/asp-net-mvc-jquery-true/

Resources