Developing a mobile site using Visual Web Developer 2010...

LordSinclair

Hi folks,

I've been building websites using ASP.NET webforms for a few years. I want to develop a mobile website but I'm told I need to use MVC to do this. Is it possible to develop a website solution using a template available in VWD 2010? I want to install Visual Studio 2012 which seems to have more to offer in terms of mobile website development, only I'm currently using a desktop that is running Windows XP and I can't install Visual Studio 2012 until I have Windows 8 and I'm going to get a new laptop in the near future to accommodate all this. Only wondering can I use what I have at the mo, (Visual Web developer 2010) to start learning MVC and also to do so using a mobile site? I've good .NET & C# skills, but MVC is new to me as is developing mobile websites, so trying to merge the learning curve for both, into one.

Thanks in advance for any help...

LS.

rossc007

Hey LordSinclair,

You're a bit all over the place here dude, MVC has nothing to do with building a mobile website, its simply a design pattern.

Are you building a website only for mobile? I assume your site needs server side functionality?

One thing I can assure you of, whatever you need to do you can do it without MVC.

Regards
Ross

ChRoMe

rossc007 wrote: »

One thing I can assure you of, whatever you need to do you can do it without MVC.

You can also use a steering wheel with your feet, doesn't make it a good idea though.

LordSinclair

rossc007 wrote: »

Hey LordSinclair,

You're a bit all over the place here dude, MVC has nothing to do with building a mobile website, its simply a design pattern.

Are you building a website only for mobile? I assume your site needs server side functionality?

One thing I can assure you of, whatever you need to do you can do it without MVC.

Regards
Ross

Well I've used MW VWD 2010 to develop my website using web pages, and it works fine, there is a lot of databinding used and SQLdatasources and GridView & DetailsView. I was told I can't use the same approach to develop a mobile site, that I had to use MVC??? I've developed a good skillset using asp.net & C# to develop my website using web pages. It is true that I can't use the same platform to develop a mobile site? I just want a few pages for my website for mobile users, nothing too sexy, maybe a login and an overview of orders outstanding, an order tracking kind of thing that I have already developed and deployed on my desktop website...

colm_c

LordSinclair wrote: »

Well I've used MW VWD 2010 to develop my website using web pages, and it works fine, there is a lot of databinding used and SQLdatasources and GridView & DetailsView. I was told I can't use the same approach to develop a mobile site, that I had to use MVC??? I've developed a good skillset using asp.net & C# to develop my website using web pages. It is true that I can't use the same platform to develop a mobile site? I just want a few pages for my website for mobile users, nothing too sexy, maybe a login and an overview of orders outstanding, an order tracking kind of thing that I have already developed and deployed on my desktop website...

You can use exactly the same approach for a mobile site as a desktop site.

The main difference is the UI, which needs to be catered for mobile rather than desktop. Also some of your controls may not render correctly on mobile, it will need to be checked.

You'll probably want some kind of device detection also.

As was said previous MVC hasn't got anything directly to do with mobile, but it is very useful in both desktop and mobile applications.

LordSinclair

colm_c wrote: »

You can use exactly the same approach for a mobile site as a desktop site.

The main difference is the UI, which needs to be catered for mobile rather than desktop. Also some of your controls may not render correctly on mobile, it will need to be checked.

You'll probably want some kind of device detection also.

As was said previous MVC hasn't got anything directly to do with mobile, but it is very useful in both desktop and mobile applications.

As far as I know, I can write a bit of c# on my landing page that determines whether the device is mobile or desktop and can redirect on that basis, but finding anything on the web in terms of tutorials for developing a mobile site using VWD 2010 seems to be like looking for hens teeth! This is how I learnt to develop using .NET and C#, I did loads and loads of video tutorials on sites like asp.net, and asked loads of questions on their forum when I ran into problems on the technical aspect of the code I was writing.

stevenmu

You don't need MVC to do do this, you can just build pages like you always have, but just design their layout and client side functionality with mobile in mind.

With that said, you do want MVC to do this. MVC is basically just a design pattern that gives you a structured way to separate out your Data (Model), UI design (View) and Logic (Controller). This makes it very easy to add mobile functionality because you are just adding new Views and keeping the same Models and Controllers. Of course to get the full benefit of this, you're existing web site needs to have been done using MVC

Microsoft's MVC framework helps a lot with this, it will generate a lot of the basic code and stubs for you, and gives you nice templates and stuff to use.

LordSinclair

stevenmu wrote: »

You don't need MVC to do do this, you can just build pages like you always have, but just design their layout and client side functionality with mobile in mind.

With that said, you do want MVC to do this. MVC is basically just a design pattern that gives you a structured way to separate out your Data (Model), UI design (View) and Logic (Controller). This makes it very easy to add mobile functionality because you are just adding new Views and keeping the same Models and Controllers. Of course to get the full benefit of this, you're existing web site needs to have been done using MVC

Microsoft's MVC framework helps a lot with this, it will generate a lot of the basic code and stubs for you, and gives you nice templates and stuff to use.

That's the thing Steven, it's taken me 3 years of tipping away at it, to fully develop my website to where it is at the moment using asp.net webforms, especially the admin/reporting structure that I've built around controlling stock, sales activity, etc.

To have to "upgrade", if that is the correct word, maybe more accurately, rebuild the whole site in MVC, is too much of a project at the moment, although I do want to try the MVC, I've a whole up and running ecommerce website that has been developed using webforms and the resources are just not there to transpose this functionality into MVC.

However I do want to get a few mobile pages for my site, is there anywhere I can grab a few .css pages or aspx pages that would be pre-formatted for a mobile UI and could fiddle around with the background colours, logo's etc?

I've created a new project/solution within my VWD environment, it builds a ready made mobile site using a pre-built solution using MVC 4, I have uploaded the entire solution to a spare domain I have for testing software, and have been fiddling around with it, (it does render properly on my iphone), but even changing the background colour seems to be difficult.

I think what I'm really looking for is a template for a mobile website, using asp.net webforms as opposed to MVC. I can't find anything along those lines though. This is how I went at learning .NET and C#, found a template and started pulling it asunder and toying around with it...

EDIT: I'm think that as I really should be doing this using MVC, I may as well merge the two projects (learning MVC and building a mobile site)...

ChRoMe

LordSinclair wrote: »

However I do want to get a few mobile pages for my site, is there anywhere I can grab a few .css pages or aspx pages that would be pre-formatted for a mobile UI and could fiddle around with the background colours, logo's etc?

You have the right idea, however you will need to do the mark up yourself.

Regarding not having time to do MVC. Read up about the concept of "technical debt", its extremely relevant to the situation you are describing.

LordSinclair

Basically I'm on a transition here from asp.net webforms to asp.net MVC, and I'm looking at the preb-built solution I've created here using VWD 2010 and it's kinda scary the way there are no aspx pages where I would usually be putting my content. Is there any particular reason for this?

Before I started using .net, I wrote lines of code and put them into a .html page. Then with .net, I put code into an aspx page with a different set of controls that were available to only aspx type pages using asp markup. Now as I look at MVC, am I right in saying that if you want to put a logo on a page, you have to go back to using a html page with html markup?

Sorry if these questions seem stupid, but this does seem a bit like going backwards instead of forwards, this move to MVC.

LordSinclair

Could someone tell me how I just change the background colour on the VWD MVC4 mobile website template? I've a folder called Content/Themes and I have the following files:

jquery.mobile-1.1.0.css
jquery.mobile-1.1.0.min.css
jquery.mobile.structure-1.1.0.css
jquery.mobile.structure-1.1.0.min.css
jquery.mobile.theme-1.1.0.css
jquery.mobile.theme-1.1.0.min.css

I have this running on a test domain, but I just can't find out how to change the background colour which is a light grey, to black! Previously using webforms, I'd just have changed my body background colour from #999 to #000 in my stylesheet.css file, (to change from light grey to black), but there are a few thousand of lines of css code here across 6 css files, none of which seems to set attributes for the body of my mobile page! The site.css file also doesn't seem to have anything to do with the page theme.

ChRoMe

LordSinclair wrote: »

Could someone tell me how I just change the background colour on the VWD MVC4 mobile website template? I've a folder called Content/Themes and I have the following files:

jquery.mobile-1.1.0.css
jquery.mobile-1.1.0.min.css
jquery.mobile.structure-1.1.0.css
jquery.mobile.structure-1.1.0.min.css
jquery.mobile.theme-1.1.0.css
jquery.mobile.theme-1.1.0.min.css

I have this running on a test domain, but I just can't find out how to change the background colour which is a light grey, to black! Previously using webforms, I'd just have changed my body background colour from #999 to #000 in my stylesheet.css file, (to change from light grey to black), but there are a few thousand of lines of css code here across 6 css files, none of which seems to set attributes for the body of my mobile page! The site.css file also doesn't seem to have anything to do with the page theme.

Read some jquery tutorials. Its an extremely popular javascript framework, its used a lot in modern web development. Do you have the FireBug extension in Firefox installed? If you don't,get it done, its an essential tool in web development.

LordSinclair

ChRoMe wrote: »

Read some jquery tutorials. Its an extremely popular javascript framework, its used a lot in modern web development. Do you have the FireBug extension in Firefox installed? If you don't,get it done, its an essential tool in web development.

Nope don't have. I've found a website that lets you set up a theme using a UI and it builds the CSS file for you. The CSS end of MVC looks far too complicated. Thousands of lines of code, and in the middle of it somewhere, a few lines that control the main theme of the site. I appreciate that all this code is needed, but why the code for the general site theme isn't better organised in a single file is a bit confusing.

It's great the way VWD builds the project for you, but it's not like asp web forms where you can just sit down with it and start using it, even if you are just a beginner. I'd have intermediate developer skills now & web forms was easier to understand as a complete beginner, than MVC is now for me to understand, with a few years of .net/C# dev behind me.

ChRoMe

LordSinclair wrote: »

Nope don't have. I've found a website that lets you set up a theme using a UI and it builds the CSS file for you. The CSS end of MVC looks far too complicated. Thousands of lines of code, and in the middle of it somewhere, a few lines that control the main theme of the site. I appreciate that all this code is needed, but why the code for the general site theme isn't better organised in a single file is a bit confusing.

It's great the way VWD builds the project for you, but it's not like asp web forms where you can just sit down with it and start using it, even if you are just a beginner. I'd have intermediate developer skills now & web forms was easier to understand as a complete beginner, than MVC is now for me to understand, with a few years of .net/C# dev behind me.

Trust me, invest an hour or two in http://getfirebug.com/ and you are sorted. Editing that CSS will be extremely easy.