I have just started playing with the ASP.Net MVC framework, and today I created a simple UserControl that uses some CSS. Since the CSS was declared in a separate file and included in the View that called the UserControl, and not in the UserControl itself, Visual Studio could not find any of the CSS classes used in the UserControl. This got me thinking about what would be the most appropriate way of dealing with CSS in UserControls.
Declaring the CSS in the View that is using the UserControl gives more flexibility if the same control is used in different contexts and needs to be able to adapt to the style of the calling View.
Having the UserControl supply its own CSS would lead to a more clear separation, and the Views would not need to know anything about the HTML/CSS generated by the UserControl, but at the cost of a fixed look of the control.
Since I am totally new to the framework, I'm guessing people have already come to some good conclusions about this.
So, would you have the UserControl handle its own CSS, should it depend on the CSS declared in the calling View, or is there another, better solution?
If you look at a skinable toolkit like Yahoo UI it documents the classes used by each control and then provides a single skin file for the entire toolkit. By swapping out the single skin file you can change looks for your entire site.
I would assume that 99.9% of the time you would want to custom skin your controls and not have them come predefined with a look and feel.
As an example here are the CSS defines for Yahoo's TabView control
It should always be in your global CSS really. If you pass this on to a designer, you dont want to have to explain which control defines x style, etc.
A quick point... it's ok for your Views to be aware of HTML... that's what they are for. What I would recommend (if you want to be ubber cool), is to add a parameter to your "MVC UserControl" that specifies the class name. Example:
<%= MyHelperClass.Marquee("This text will scroll!!!", "important-text") %>
I'm of course pretending that "important-text" is the class name that I want to add to my control.
I am assuming that when you say "UserControl", you're referring to an example like in that link above.
Related
I have been looking for an solution for structuring my MVC5 project, but have not found anything yet.
What i look for is. I have an Main Website, which off-course has it's own Views, Scripts and Controllers, but what is special is that i like to have sub Website projects which add an menu point in the main page, but the sub website also contains it's own Views, scripts and Controllers( I have tried to draw a picture of what i'm talking about ).
The point of this is to have an structured in a easy way. But also to reuse the same views in a framework way.
You should be able to define an area in another project, found an article that explains in detail how it is done in MVC3, it should not be very different in later versions since areas and routing haven't changed a lot.
http://nileshhirapra.blogspot.no/2012/02/aspnet-mvc-pluggable-application.html
Update: you do not actually need to set up the project in the Areas folder, but you need to copy all content like views and scripts/css into there before being able to use it in the main application.
If you want these sites to actually be separate websites but only look similar, then that is what you'd need to set up. You'd probably want to decide on a single-sign-on scheme for that.
A little bit of context
We have a recent MVC4 web application used by a lot people that we would like to port to Orchard CMS. Even though this is an "admin" type of application, we don't want it to be part of the admin section of Orchard. This application is currently live and we would like the move to Orchard to be as invisible as possible to the end-user.
Where we are now
We followed this answer as how to Integrate existing ASP.NET MVC application with Orchard CMS but we use layouts (Razor not Orchard) and it is not working (by default) with the way Orchard renders pages (the views returned by the controllers actions are displayed without the layouts - _ViewStart.cshtml is ignored). I have tried to specify the path of the layout in the View method but it doesn't work or the path is not good since we are in a module. Is there a way to tell Orchard to use a _layout.cshtml file and bypass Orchard theming?
It is possible to bypass Orchard themes. Note that I am doing this with MvcMailer, so the outputted e-mail is "templated" HTML with a Layout. I cannot definitively say this works on regular pages, but you can try it. Just slap this in your view:
#inherits System.Web.Mvc.WebViewPage<object>
#{
Layout = "_Layout.cshtml";
}
Caveat: you cannot use the newer #model directiv. I just fall back to the old style and put my model where "object" is:
#using Namesapce.ViewModels
#inherits System.Web.Mvc.WebViewPage<MyViewModel>
Otherwise, it's pretty straightforward to create a Theme and override any of Orchard's shapes. There are two ways I do it:
Create a straightforward theme, override shapes (say you want a
different Login, just create Login.cshtml in the Theme's ~/View
folder), use alternates (use Layout-homepage.cshtml to override the
layout for the homepage), have your .css, etc.;
Use a couple of tricks to override the theme with code from a module, and create
your own views and shapes in a theme folder. You can, for example, have a Layout.cshtml file in your theme with code that displays a shape. However, the shape itself (.cshtml file) lives in your module, which is great for using a dashboard type theme that will
call a shape that is named the same in your different modules but
shows different content. The code for this is a bit more in-depth. Just ask if you need samples.
tl;dr No, it is not possible.
I don't like answering my own questions but since Bertrand Le Roy commented my question instead of answering it (no hard feelings) and he is part (or was?) of the Orchard team, I will answer with what I know, until someone comes with a better answer.
From what I understand, to be part of an Orchard project is to embrace it all the way, there is no in between. The custom (Orchard) view engine (which works with zones, layouts, widgets, shapes, etc.) cannot be bypassed (fallback to default MVC engine) in a module. As Bertrand suggested, I should convert my project to Orchard theming.
Are there any recommendations for a design surface (or design tool) that could be used by a designer (the dude/dudette with the black turtleneck) in the process of building an ASP.Net MVC application?
Such that once there is agreement on the structure of the Model, and the interactions required by the app, then the designer goes away and builds out the UI (V in MVC) using this design tool, while the developer goes away and builds out the code (M&C in MVC) using Visual Studio.
As I understand it now, this designer person would also need to use Visual Studio and build the Views using Razor (or other view engine) syntax, instead of having the ability to build the Views using a design surface with drag-drop layout and property settings and the like.
I think you could ask them to give you a harcoded HTML for each view... then, you replace the harcoded data once you place it in Razor.
That is the beauty of Razor... it is very easy to pass from fixed HTML to a razor view.
Razor requires programming, and creating views is not an arbitrary task. I'd let the designer work in whatever program they like where they can excel about design and let the programmers worry about how best to create the views and programming in Razor (which is really just C#/VB with some extra syntax).
It depends.. what kind of skills does your designer have? Are they a true designer (no JS/jQuery/etc knowledge.. they live & breath PSDs) or are they a designer/front end engineer (they know js/jQuery, the diff. between IE7 and IE9 from a rendering pov).
If you've got a true designer then the best thing to get would be HTML. A PSD would be okay as well but if they can convert their design into HTML they've done a lot of the hard work for you (unless you love figuring out floats and margins and all that jazz). That said if you're using something like Twitter Bootstrap or Blueprint CSS then they would obviously have to know how to use that as well.
If you're lucky enough to have a designer/front end engineer then it's well worth your time to teach them some basic razor synax like #Url.Action and #Html.BeginForm. They can tell you the actions they need and you can work together by giving them a fake data/response version first which they can use while you create a real version. And in this case they can either use Visual Studio OR you can set it up so that they have your site hosted via IIS on their machine and they just use your source control to get latest which automatically gets placed in the right directory. Then they can just continue working in whatever editor they prefer as they should only be working in html which will get updated live. That said if you're using ASP.Net MVC 4 bundling you'll have to decide how to maintain bundles.
I'm implementing a solution in ASP.NET MVC that later can be applied to couple of other fields. To do so it will require to re-brand the UI even though the underlying business logic wont need to change. I'd like to write the code in such a way that will allow other developers to only develop code that will only changes the UI. This is similar to the way that themes can be written against Wordpress Blog software.
Can any one suggest how to organize my project to make such feature work?
http://pietschsoft.com/post/2009/03/ASPNET-MVC-Implement-Theme-Folders-using-a-Custom-ViewEngine.aspx
I would not use bult in Themes (not actually sure if these still exist in MVC) But you could multiple sets of CSS (with related images) in a Themes folder with a separate path per theme eg: Themes\Default, Themes\Classic, etc where the only configuration is the Path element. This would split the styling from the core code and you would'nt need to use any Theme "Engines" etc.
In your MasterPages/Pages/Views you could just set the path to the stylesheets dynamically.
Have you tried using MasterPages?
Trying to create a MVC User Control in the Release Candidate and I can't see to make one with a codebehind file. The same is true for MVC View pages.
Creating Views in the Beta would produce codebehinds...am I missing something?
Code behind kind of defeats the purpose of the MVC Framework. Functionality should be kept separate from the view, the MVC team felt that code behind pages went against this ideology and therefore removed them.
Your can create a custom helper method to create your control. Also I'm not sure if MVC has view components (Monorail/Castle) but that could be an option as well.
From ScottGu's Blog post:
*Views without Code-Behind Files
Based on feedback we’ve changed view-templates to not have a code-behind file by default. This change helps reinforce the purpose of views in a MVC application (which are intended to be purely about rendering and to not contain any non-rendering related code), and for most people eliminates unused files in the project.
The RC build now adds C# and VB syntax support for inheriting view templates from base classes that use generics. For example, below we are using this with the Edit.aspx view template – whose “inherits” attribute derives from the ViewPage type:
One nice benefit of not using a code-behind file is that you'll now get immediate intellisense within view template files when you add them to the project. With previous builds you had to do a build/compile immediately after creating a view in order to get code intellisense within it. The RC makes the workflow of adding and immediately editing a view compile-free and much more seamless.
Important: If you are upgrading a ASP.NET MVC project that was created with an earlier build make sure to follow the steps in the release notes – the web.config file under the \Views directory needs to be updated with some settings in order for the above generics based syntax to work.*
I answered this question here:
How to add a Code-behind page to a Partial View
Seems this wasn't particularly tricky, and is quite do-able
This answer worked for a Partial 'ViewUserControl' but the same should apply
Ok.
First: Add a Class file with the convention of .cs (i.e. view.ascx.cs)
Second: Add "using System.Web.Mvc;" to the class
Third: Change the Class to Inherit from "ViewUserControl<>"
Fourth: Add the following to the View's header:
CodeBehind="View.ascx.cs" Inherits="Project.Views.Shared.View"
Fifthly: Copy the files out of the solution and drag back in to reassociate the two together
Note: For this to work with a Normal MVC View you just need to inherit the class from "ViewPage"
The whole idea for ASP.Net-mvc was to get rid of the codebehind files...thats why asp web controls didnt matter that most didn't work.But with the changes of getting rid of the code behind comes with a different programming style..The idea is codebehind files are EVIL:
http://stevesmithblog.com/blog/codebehind-files-in-asp-net-mvc-are-evil/
the whole idea is to make sure people remember they are using asp.Net-mvc and not asp.et web pages. take alook at this link ,it explains it a little better:
http://blog.lozanotek.com/archive/2008/10/20/Visual_Studio_Templates_for_MVC_Views_without_Codebehind_Files.aspx
I think this tutorial is what you are asking.. but not really sure what you want..