I'm a beginner with MVC4. Is it worth spending time on learning how the site.css is structured? How can I render HTML from my views that the site.css picks up?
Or would it be easier for me to just make my own CSS and use my own HTML for all my views and totally ditch all the pre-generated layouts.
What MVC features do I miss out on if I decide to go all with my own CSS and HTML coding? Or is it a bad idea to start with?
CSS only controls how the page appears, you will not lose any MVC features if you decide to build your own CSS.
You might lose some features when you change the HTML, if you're not paying attention. For example, the validation summary won't be rendered if you get rid of the #Html.ValidationSummary() statement from your HTML file.
Since you are a beginner, I would advise editing the current site.css with your own styles...no need to create a new one..by adding and changing the existing one, you can see how it is working.
And once you change it enough, it will have become your own version.
Yes you certainly should use your own HTML and CSS, rather than trying to make existing samples work for you. It is a template, a guide, to give you an example project and I think it should be used just for that.
Create your basic HTML markup and look into how you can use the html helpers that MVC provide in your markup. Doing it this way we give you a much greater understand of how the MVC framework works.
There are plenty of good examples out there, don't worry if they are MVC3, they are still relevant. Here are a couple of links to get you started.
MVC4 Sample
MVC3 Music Store
Related
I am just learning ASP.NET MVC 4 and getting unfamiliar with control placement and design form. Actually i don't like to create the default way of placement of controls in my view. I need to have a group of controls into divisions in which it look great. How do i achieve this please guide me. I need something like below...
Thanking you in advance.
My best recommendation would be to look at something like Twitter Bootstrap and using the horizontal form CSS and markup.
Using something like Bootstrap is going to allow you to concentrate on writing your application and less time on fiddling with CSS, at least initially. Obviously, if your intention is to fiddle with the CSS then please disregard my answer. However, based on the fact that you are just learning ASP.NET MVC 4, there is a lot of functionality to learn as well as how the application is going to look.
Once you feel comfortable with the techniques involved, you can start to modify/remove the Bootstrap CSS to better suit your needs.
Our organization has dedicated designers who design the page and cut it up in Dreamweaver. That's worked well in the past with ASP and PHP sites. Now we're trying to make it work with .NET, but are struggling because of the structure of a project in ASP.NET. How does everybody collaborate with developers? The specific points I am looking for are:
-Transferring Dreamweaver content to Visual Studio
-Changing HTML inputs to server controls
-Giving designer access to finished Visual Studio product so they can tweak layout
Thanks!
Obviously, there will be a slight learning curve for your designers. But with that said, I have worked quite often with designers (none of whom used Dreamweaver, btw, so that may be part of the problem) on asp.net sites. Usually, they will create the HTML exactly how they want it on the server like a static HTML page, then I will go in and replace form fields manually with asp.net controls.
On an aside, I have found that I have the best chance of matching the design using controls that spit out the least HTML, such as Repeaters instead of DataGrids.
Once the site is up on the server and programmed, they can go back in an tweak things if need be.
Also, just like we have to adapt to them a bit (making our server controls spit out html how they like it) they also have to adapt to us a bit and not rely as heavily on id attributes in their stylesheets as some items id attributes will be controlled by hte .net runtime since they are controls.
MOre often than not, a designer new to asp.net will feel very threatened by this new way of doing things, specially with user controls instad of include files, but its really not that different than classic asp/php development is.
The key to the solution of all your problems in this matter is quite simple, and yet so hard to fulfill: it's usually called semantic markup. If you can make sure that the designers to start with make their html semantic, and that the .Net programmers keep rendering the same markup but with their server controls where needed, the tweaking won't be a problem - the markup is the same.
So what is semantic html, then? you may ask. Well, it's not always as simple as one would like it to be. A good start is to make every page pass XHTML validation.
In my experience, designer-created HTML almost always needs to be at least refactored, if not rewritten. So, open a browser with the original HTML on the left, and try to match it as closely as possible in VS on the right screen.
Giving designers access to ASP markup is not a good idea, imho. Too much can go wrong if you only understand half of the tags you are manipulating.
How about using one of Microsoft Expressions line of products? I've heard they are to .NET what dreamweaver is to PHP/ASP.
I am a c# developer.
Recently I had to design a web UI in asp .net 2.0 .I had strange problems with aligning controls in Visual studio UI.
I have used Div, table tags to align asp .net controls(labels, textbox, grid etc).
But the problem was what I saw in design surface of visual studio was entirely different (most of the time) when I view the page in browser.
The gap between controls and alignments was never perfect .I have seen other developers also doing trial and error methods without a proper guidelines.
C# coding I am pretty good and I have lots of Microsoft articles and help materials to guide me.
But I haven’t found proper articles and guidelines for UI design of asp .net pages.(may be its out there and i havent found yet?)
Can anyone through more light on this subject. Any good books ,suggestions etc?
Thanks in advance
SNC
If you want granular control over your HTML/XHTML output then I would recommend switching to ASP.NET MVC. The problems you've described are those typically encountered when using ASP.NET WebForms. As Anton mentions, you do need to gain a good understanding of XHTML and CSS as well.
While I definitly +1 everyone suggesting that you get a better grasp of CSS and positioning in general and ditch the drag and drop method of building your controls, I figure you need something sooner rather than later.
For that, I give you Yahoo!'s CSS Grids (JQuery, MooTools and other libraries also have grid layout tools) which will help you to get your UI done quickly. In the mean time read up on CSS.
(X)HTML is compositional - not unlike XAML (which is actually modeled on HTML/CSS). When building WinForms you can drag and drop your controls onto the window willy-nilly, but not so with the web. One thing the drag and drop designer misses is that (X)HTML components have a hierarchy to them. The designer tries to overcome this by using position: absolute; which is a precarious crutch.
Your controls need to be composed with their positional relationships more or less intact already and that means you'll have to edit the code by hand to put things in the proper order.
It's not the UI design per se. What you need is solid understanding of how CSS and generally styles work on the web (in short: they do poorly). So what you need is a good CSS book. Plus, you'll have to dump WYSIWYG ASP.NET page editor.
I'm curious if you feel your HTML skills are on par. Could you create this same page in HTML without visual studio and get the results you expect (using notepad)?
Regardless, start spending more time in the HTML markup and less time using the designer surface in Visual Studio. The more you understand the output that ASP.NET creates the better a web developer you will become.
A trick I use quite often is knowing that you don't need to recompile to change aspx code. Make your changes to the aspx file, save, and then refresh your browser. Also, use firefox and get the webdeveloper plugin. I use the outline block level elements quite often to understand where some of my html flow problems are occurring.
Read up on Web Design. I'm a bit behind but I've always loved zengarden and zeldman.. I'm sure there's better out there now.
I'm an ASP.NET web part novice. I've built a few simple ones using only a class that derived from WebPart and overriding the CreateChildControls method, but nothing really very substantial. My question is whether it's possible to have a web part that also takes advantage of a separate html/asp.net markup file that will help provide some structure to the web part's output. In the past I just created server controls and added them to the controls collection, but this seems like a silly way to try to create a non-trivial layout. Can I do this? Do I have to use an ascx user control or can I bypass that step? There are a lot of hello world tutorials on web parts out there, but none seem to go past the CreateChildControls override. Thanks!
Yes, there is. Go here to learn about templated web parts, and go here to see all of the info he has on WebParts. I used this technique back in 2004/2005 and it worked very well.
The links in the above answer are no longer working, but here is an alternative one:
http://www.a2zdotnet.com/View.aspx?Id=95
In VS 2010 we also have visual web parts, that I think do pretty much the same trick but it's wrapped in a project item. I've only seen this in the context of SharePoint so not sure how it works for ASP.NET projects. Here is an example:
http://msdn.microsoft.com/en-us/library/ff597539.aspx
I know Microsoft has made efforts in the direction of semantic and cross-browser compliant XHTML and CSS, but it still seems like a PitA to pull off elegant markup. I've downloaded and tweaked the CSS Friendly Adapters and all that. But I still find myself frustrated with bloated and unattractive code.
Is elegant, semantic CSS with ASP.Net still a pipe dream? Or is it finally possible, I just need more practice?
The easiest way to generate elegant HTML and CSS is to use MVC framework, where you have much more control over HTML generation than with Web Forms.
See this question for more discussion, including use of MVC. This site uses ASP.NET and the markup is pretty clean. Check out the HTML/CSS on MicrosoftPDC.com (a site I'm working on) - it uses ASP.NET webforms, but we're designing with clean markup as a priority.
As long as you use the Visual Studio designer, it's probably a pipe dream. I write all of my ASP.NET code (all markup, and CSS) by hand, simply to avoid the designer. Later versions of Visual Studio have gotten much better at not mangling your .aspx/.ascx files, but they're still far from perfect.
A better question is: is it really worth it? I write web applications and rarely does the elegance of the resulting HTML/CSS/JavaScript add anything to the end goal. If your end goal is to have people do a "view source" on your stuff and admire it, then maybe this is important and worth all of the effort, but I doubt it.
If you need the semantics, use XML for your data. I do believe in the idea of the semantic web, but my applications don't need to have anything to do with it.
As DannySmurf said, hand building is the way to go.
That said, you might look at Expression Web. At least it is pretty accurate in how it renders the pages.
#JasonBunting - Yes, it's absolutely worth it. Semantic and cross-browser markup means that search engines have an easier (and thus higher rankings) time with your content, that browsers have an easier (and thus less error-prone) time parsing your content for display, and that future developers have an easier time maintaining your code.
Yes - it's a pipe dream. Since working with a professional web designer on a joint project who HATED the output of ASP.net server side controls I stopped using them. I essentially had to write ASP.net apps like you would write a modern PHP app. If you have a heavy business layer then your page or UI code can be minimal.
I've never looked back since. The extra time spent writing everything custom has saved me a great deal of time trying to make Visual Studio / ASP.net play nice with CSS/XHTML.
i can't believe nobody has mentioned css adapters. many of the common controls used in asp.net (gridview and treeview for example) can be processed through an adapter to change the resulting html that is outputted to the browser.
if going the mvc route isn't a viable option, it is possible to write your own adapters for any of the built in asp.net controls.
http://www.asp.net/CssAdapters/