Can ASP.NET pages be as "lively" as a page done with just HTML? - asp.net

I've never created a web page and I'm just learning ASP.NET now and all the examples I see are mostly with filling out forms etc. So I'm wondering if the lively, colorful, and snazzy web sites can be done with ASP.NET. I have also been playing with a trial of Expression Web. It seems to be for the "fancier" side of things. Are the two sides of the web mutually exclusive or can an ASP.NET page be just as colorful? Keep in mind I'm new to doing anything on the web.
Thanks for your help?

Yes, you can make an ASP.NET page look just like a static web page. The look and feel of a web page is done completely on the client side, using HTML, Javascript and CSS. ASP.NET lets you use all of these things, but it provides the ability to generate output to the page on the server side before sending it to the client's browser. Once it gets to the browser, the HTML, Javascript and CSS will apply just as if the client was loading a static page.

Absolutely yes!
You may be confused with the tutorials which are focused on teaching backside technology and poor on page design. Isn't microsoft.com colourful enough?
Asp .Net just outputs html.

ASP.NET is simply a web application framework. What is sent to the browser is *usually** HTML, so anything that you can do with a static HTML page, you can do with ASP.NET.

In my personal experience, I have had better luck with producing "lively" pages using ASP.NET MVC, since I have better control over the markup, and I don't have to contend with ViewState or munged control IDs. Subjectively, the pages feel less sluggish than those of ASP.NET, and I can use JQuery to improve the user experience.

Yes you can, just do not use Web Controls. I have written several Blogs on this so far this year. http://professionalaspnet.com/archive/tags/Thin+ASP/default.aspx

Ultimately, html is sent to the browser irrespective of the server side technology, so question is a bit awkward.
But for aesthetics side, asp.net provides features called master pages, themes, skins. By providing these it goes beyond css.

ASP.NET can be used to produce very lively and colourful pages, but you need to understand how to create the pizzaz. Mostly that's going to be media and javascript. For that, you need to understand HTML, and then what the ASP.NET Server controls render as in HTML so that you can control and manipulate it in your javascript more easily.
The reason that ASP.NET tutorials feature data and forms is that the need to manage data (and dynamic content deriving from it) is what makes people use ASP.NET rather than static html.

Related

Why can't I use server controls in ASP.net MVC?

I'm getting ready to be responsible for leading the development of a small ASP.net MVC application. This is my first time creating an MVC application, so I am excited!
I've carefully read over the documentation and I feel like I have the general idea of how MVC works. However, if I understand correctly, server controls (like GridView, for instance) are not part of MVC.
My question is: Why? At my development shop, I'm so used to using controls like GridView and the MS Chart Controls that I'm almost at a complete loss as to developing without them. It seems almost like starting over.
Why are the server controls unavailable? How does Microsoft expect me to work without them? What are the alternatives?
My question is: Why?
Because most of them depend on things like ViewState and the Postback models which are part of the classic WebForms model and no longer exist in ASP.NET MVC. Those server side controls rely on events that will perform postbacks to the server persisting their state in hidden fields (ViewState). In ASP.NET MVC you no longer work with events such as Button1_Click. In ASP.NET MVC you work with a Model, a Controller and View. The Controller is responsible for receiving user requests, querying the Model, translating the results into a view model and passing this view model to the View whose responsibility is to display it under some form.
In ASP.NET MVC there are HTML helpers that could be used to generate some reusable HTML fragments between views. You may take a look for example at the Telerik ASP.NET MVC suite of such helpers. They call them controls but they have nothing to do with classic WebForms server side controls. They are just HTML helpers.
Basically classic WebForms are a leaky abstraction of the web. What Microsoft did back in the time when they designed this framework was to bring existing Windows developer skills to the web which was getting more and more momentum. But since the web was still a new technology that most developers weren't yet familiar with, they created this abstraction to hide away the way that the www works. Those developers were accustomed to drag and dropping controls on their Windows Forms, double clicking on buttons that was generating some code for them in which they put their data access logic and so on. This model was transposed to web application development thanks to WebForms. The HTTP protocol was successfully hidden behind this abstraction called WebForms. For example you don't need to know HTML, nor Javascript, not even CSS in order to create a website using WebForms which is really great because the framework abstracts all those things for you. Unfortunately by doing so it prevents you from easily utilizing the full power of lower level web technologies which some people might need when developing web applications.
What ASP.NET MVC does is basically remove this leaky abstraction and bring the www to the developers the way it was intended to be by its creators. ASP.NET MVC is not mature enough compared to classic WebForms so you cannot expect to find the same range of available controls and widgets but things are slowly shifting.
I would recommend you start here with ASP.NET MVC: http://asp.net/mvc. Go ahead, watch the videos, play around with the samples and see if ASP.NET MVC is for you or not. And of course if you encounter some specific difficulty or question don't hesitate to come back here and ask it.
I'm so used to using controls like GridView and the MS Chart Controls that I'm almost at a complete loss as to developing without them. It seems almost like starting over.
In this case, starting over is good.
I've gone through a similar journey. If straight HTML scares you, try working with the System.Web.UI.HtmlControls namespace. This will allow you access to standard HTML controls, but you'll still have the comfort of turning them into server controls if you need to (either by specifying the runat="server" attribute, or by converting them into equivalent ASP.NET controls.
In addition to Darin's answer, there's another problem with ASP.NET: you're bound to Microsoft's view of the web. That GridView you love? It's generating bad HTML. The Paging controls it provides? Even worse. Even if you know very little about HTML compliance, nested tables should give you the chills. In a way, everyone who uses a GridView is lucky that legacy web supported by Microsoft (and to a lesser degree, Google and Mozilla) came from such a god awful starting point.
Finally, to summarize: my suggestion is that you try to rewrite your pages or develop new web applications (as best as you can) using HtmlControls only. You'll probably have to learn some JavaScript/jQuery, and might have to venture into the world of AJAX to make your controls operate the way you want them to.
Use this as a stepping stone into the world of MVC. You won't use the same technologies (and may drop a lot of JavaScript/jQuery), but it will help you change the way you think about web development in much smaller, and perhaps easier-to-absorb chunks.
Ultimately, however much you like your ASP.NET controls, you'll have a much greater degree of freedom, and you'll also be developing websites that make use of newer technologies, which will provide added value to your websites.
At the core of this is Model View Controller (MVC) which promotes decoupling. The idea is that you feed your View (web page) a Model with all the data that it needs to be rendered. Server controls are tightly coupled. There is no concept of state in MVC or 'should' be no concept anyways.
That's kind of the point of MVC. It takes away the high level of UI abstraction that server controls provided and leaves you with html and javascript. (It also adds some really cool model binding features)
I am new to MVC and have found using Partial Views to be similar in creating small, reusable UI elements that do not fit into the _Layout. For example, sliders, slideshows, navigation, featured sections although you can use #section for this I find partial views to be more beneficial. This concept enables me to create reusable libraries that I can switch out easily and use in other projects. To me this is similar to controls, although there is a debate both for and against this analogy.

How can ASP.NET generate HTML5 code?

I'm feeling a bit lost with my question about HTML5 code generation, and despite having put some efforts into my research I don't really feel much wiser.
I use VS2010 for the creation of ASP.NET pages, and I do know that there is an (unofficial) "Web Standards Update" for VS2010 SP1. Using this update I can change the settings of the "Target Schema for Validation" in the ASPX editor window to HTML5. The new elements / tags and semantics are then available via Intellisense, and I can nicely code away manually using all the fancy new stuff.
What I don't understand is how to get something like the ASP.NET controls to generate HTML5 code (where it makes sense). Is this at all possible or am I completely going in the wrong direction here? I would have expected that I do not have to "hand code" HTML5 as long as I use the existing controls (which tend to generate a lot of JavaScript in the background when the page is delivered to the client's browser).
Thanks in advance for a clarifying answer
G.
Some controls generate slightly different dialects of HTML based on the particular User-Agent. However, not all of them know about HTML 5 yet, and there's no specific property to enable HTML 5 generation, just as there isn't a property to enable other dialects of HTML.
If you want to generate HTML 5, you can do one of three things:
Create a new control that overrides the existing one, and either use it directly or replace the original with it everywhere in your app with tag mapping
Create a control adapter and modify the control's output as it's generated
Create a custom control
The controls you are referring in ASP.NET are what is commonly known as "webforms". They are basically server side controls that generates the javascript code needed to postback the data to the server, mantain the state of the controls between postbacks, and stuff like that. As you said, those controls generate too much code and a excessive number of roundtrips to the server, so it is not very recommended to use webforms.
HTML5 is mainly client side, so it has very little to do with the webforms server controls. It's a different approach than the old ASP.NET webforms. Because of this, ASP.NET is including on its newer versions the MVC framework, the razor engine, JQuery and another javascriprt libraries. MVC includes some helper classes and templates that helps you generating the client code, and many other features to support HTML5 enabled webs. So, I would recommend to start reading about it.
Anyway, now that jquery is fully integrated in Visual Studio, javascript coding is not so difficult.

Customizing asp.net webforms markup

I'm a new comer to the asp.net world. I hear a lot about asp.net mvc and it's advantage over webforms about the ability to customize the markup and css. I also heard that asp.net is much easier to learn than asp.net mvc so I decided to go for asp.net and webforms. My question is: what's the level of customization a web developer/designer can get with webforms concerning the markup and css?
You can have as much customisation as you like in the html output! You can customise everything in web forms. However, with customisation brings time, effort and room for error. All of these things is what web forms is trying to save you.
However, since you are just starting out I wouldn't worry. Just make your web forms how you want and forget the customisation of output (it is much better with ASP.NET 4 anyway). In a few years when you are more experienced then worry.
If you were going to customise everything then you should have gone with ASP.NET MVC - it is one of its main arguments. But there is nothing wrong with web forms. Particularly if you are beginning with asp.net in general I'd say it is better.
Standard ASP.NET WebForms uses server controls that generate the markup for you, so the level of customization is limited to what the controls you are using provide. There are techniques that allow you to override what is rendered by the controls and thus customize the markup and also write your own controls but it requires some coding. It is possible to achieve almost complete customization of the markup but it IMHO requires more efforts than a web developer should need to put into something like this.
While it is definitely possible to have a SEO friendly, unit-testable, maintanable, standards compliant application using classic ASP.NET WebForms, the efforts it requires will be significant compared to ASP.NET MVC. But if you don't care about those things you will be able to pretty quickly develop web applications.
ASP.NET comes with a set of built in user controls - things like text areas, buttons etc. These mimic winforms in how they are supposed to work (events etc), however this is a rather leaky abstraction (you must always remember you are working with HTML and HTTP).
The user controls allow reuse and when a page is built they emit HTML - you have little control over the emitted HTML (unless you override the rendering, which kinda defeats the point), hence the perception that they are harder to customize. It is not easy to get right either and requires more work than I think is worth.
There are also different compromises in the way pages are rendered out (ids for example end up as a long string of concatenated container control names) which make MVC a better choice if you are looking for control over your HTML.
Microsoft suggests that you pick the technology based on your needs:
While ASP.NET offers rich controls and produces quick results without great control over the markup (as mentioned: it can be done but somehow beats the idea behind ASP.NET and creates a lot of additional code), it suffers from the flaws mentioned by the other posters.
In MVC, there is a limited set of "out-of-the-box" controls and you'll have to code more on your own (including clientside JavaScript) but you do have more control over the rendered markup of your controls. In addition to that, your project will generally have a clean separation of concerns which benefits (unit) testing and maintainance.
Another aspect that hasn't been mentioned yet: In ASP.NET a page undergoes the so-called "ASP.NET Lifecycle" every time the client communicates with the server. The Lifecycle consists of several events that are fired in a special (and sometimes confusing) order. Handling those event in the right order in complex web applications is one of the biggest difficulties in ASP.NET and often leads beginners to forfeit. In MVC you don't have to deal with that kind of problem.
Therefore I strongly recommend that you take a look at the ASP.NET architecture before you start to code. Here is a very basic start: http://www.asp.net/learn/videos/video-6558.aspx
Personally, I started with WebForms and am now moving to MVC after I worked with the similar MVVM pattern in Silverlight and WPF for my bachelor thesis. This kind of did it for me so that I now understand the benefits and ideas behind MVC a lot better. Once you are used to WebForms, switching won't be that easy though.

Tips for developing an ASP.NET application that doesn't depend on JavaScript

Not sure if this belongs in community wiki...
Can somebody give some general guidelines on how to successfully build an ASP.NET site that isn't dependent on JavaScript? My understanding is that I should build a functional site initially without JavaScript, and use it to enhance the user experience. That is easier said than done... how can I make sure my site works without JavaScript short of disabling JavaScript and trying it? Or is this something that comes with experience?
Try ASP.NET MVC! sure most of the examples use JavaScript for the AJAX functionality, but it's easy to build a fully functioning site that doesn't use JavaScript.
Since ASP.NET MVC doesn't use server controls with all their embedded JavaScript, it's a great way to build a site with very minimal and lightweight HTML, while still writting your data access and business logic in C#, VB.NET, or any other .NET language.
I've built working ASP.Net sites with little or no JavaScript, so it's definitely possible (just a royal pain.) The trick, and this sounds silly, is to use as few <ASP:> type tags as possible. Those all spawn various levels of JavaScript. Regular old-school HTML elements work just fine with no scripting.
So, on the extreme end, you write, say, your form using all plain-vanilla HTML elements, and then you have that form submit point at another page that accepts the form submit and hands it off to your server-side scripting.
To put it another way, pretend that all you get with ASP.NET is a snazzy server-side programming language and you're writing HTML in 1998.
Now, having done this, I can tell you that what this ends up as is a classic ASP webpage with cleaner programming syntax. ;) Most of the features that make ASP.NET "better" than classic ASP hang on JavaScript, so writing a JavaScript-free ASP.NET system is an exercise in shooting oneself in the foot repeatedly.
However, the one thing you should absolutely do is make sure the first page or two do work without JavaScript. Unlike 10 years ago you can safely assume that any browser hitting your page has JavaScript, and unlike about 8 years ago, your visitors probably don't have JavaScript turned off for speed reasons, but they very well might have something like the NoScript plugin for Firefox dialed all the way to 11. So, your first couple of pages need to work well enough to a) tell the new visitor that they need JavaScript, and b) still look and work good enough to make it look like adding your site to the white list is worth it. (In my experience, most people get the first one done, but in such as way as to totally drop the ball on the second. To put it another way - if your super fancy web 2.0 mega site starts looking like craigslist if noScript is fired up, I'm probably not going to bother letting you run scripts on my machine.)
If you want to use many of the ASP.NET controls (i.e. the DataGridView), ASP.NET pages are generated with lots of JavaScript in order to handle the events on the controls (i.e. selecting a row in the DataGridView). I think you're going to lose so much of ASP.NET that trying to have ASP.NET work without JavaScript enabled is impractical.
Disabling Javascript is the best way to test how a web site performs with out it. Good news, IE8's developer tools provide a quick and easy way to do just that. Now, having said that, often times the only thing that you can do is put up a message with a noscript tag to the effect that your site requires javascript for best function.
Many ASP.NET functionalities & controls won't work when JavaScript has been disabled. Think of LinkButton's onclick event which contains a call to a JavaScript function.
LinkButton is just an example. But there are many other things too.
If your concern is with JavaScript being disabled in user's browser then you can check for that and handle your site accordingly.
If you do decide to build the site without JavaScript then you will end up building a somewhat static web site. If your need is just to build a static website then you can go on with this approach.
Write everything with basic html forms and css, and then you will know that it works without javascript.
Once you are happy with it, then look at unobtrusive javascript, so you can modify the way the application works when javascript is enabled.
Last time I looked at some stats about this around 1% disable JavaScript, so why spend hours and hours on this when what you should do is show a message telling the user that your site requires javascript.
Use your time to be productive instead of trying to write around perceived limitations.

Feeding .NET MVC Views the jQuery UI way

I've seen a few blog posts and tutorials overviewing mixing in jQuery and the UI elements for Views in a .NET MVC web app. But usually targeted at developers with a comprehensive grasp of the full dev cycle and variations of back/middle tier technologies.
As the front end developer I'm pitching a jQuery-only UI to the back-end dev - he cautions against a non-webforms interface for sake of the code maturity pov.
I'm trying to hit back with "well...it's your pattern ...isn't it elemental to MVC? No logic in the view? I'm reading that to be 'server-side stuff'. You just serialize the properties i'm asking for, or better...let me easily discover what you _can send me...i'll be able to implement the UI via jQuery UI."
So how valid is my position?
Can jQuery's grid be expected to handle at least the bottom 85% of .net's native control (low-to-moderate capacities # of rows)?
How about in-line editing? ...from the grid?
Would working exclusively in Web Services simplify his life at all? and if so, wouldn't that be logical way to build a .net-to-jQuery relationship? - ajax liaisoning twixt server (.net WS methods) and client?
mny thx
--steve...
Don't fight the platform. That way lies pain and suffering.
The MVC view objects are vastly different than asp.net webforms with server controls--you get straight up html. You get jquery and ajax basically for free, with (almost) magic server side ajax call processing.
They are designed to do what you ask. Writing your own jquery ui is reinventing the wheel.
Not only would it be a ton of extra work for no gain. You would be the only developer around trying to do that, and when you needed help, few could offer advice.
If this is an admin interface, and the client has agreed that users must have javascript enabled then I think using javascript to build widgets on the page is a better option than using the asp.net server controls. If however this is a public facing website I would argue that a pure html and css approach is much better, and then use javascript to progressively enhance the page!
Now I dont ever advocate using asp.net server controls, because they spit out poor markup and they are overly complicated to use. Instead I have been using jQuery to do the grunt work and dom querying and traversing. I also dont advocate using jQuery UI because they are missing some very essential widgets, for example no datatable, no treeview etc. I know that there are lots of plugins for jQuery but they are not componentised and therefore each plugin needs to reinvent the wheel to achieve everything it needs. Once you have included all your plugin libraries and css you often end up with a very large page footprint. Also each plugin often has a different home page and documentation that may or may not be up to scratch.
I think that the best UI library is YUI, and you can easily combine it with jQuery. Because each widget is made up from core components the overall weight of download is smaller. Also you have all the documentation in one place with 100's of working examples. Also it means working with the same set of javascript patterns across the board, so with each widget you learn more and more about the library. Hopefully jQuery UI will catch up, but personally I am looking forward to YUI 3 which for me might mean dropping jQuery altogether...
jQuery is a very mature library. It is used by thousands of people across the internet, and I dont think I have ever encountered a bug. YUI is dogfooded by YAHOO so it too is battle hardened.
One thing I did not mention to you is that I am using the default webforms view engine with asp.net mvc. I think it is still the best option as you get intellisense and also Resharper refactoring even searches your views, and the static solution anaylsis can find code errors in your views.
For building my markup I have been using MvcContrib Fluent Html but you could also checkout this article that advocated the DRY principal very well.

Resources