.NET Webforms => MVC, General Discussion...

LordSinclair

Hi Folks,

I decided to go at building a mobile site for my company website, and for my desktop site, I developed that using .NET webforms and got used to working with controls such as asp:button, asp:label, and those sort of controls, also GridView & DetailsView, etc, etc. My website involves a lot of data display and transactional sort of information, so I've become fairly adept at binding filtered data to GridViews, etc.

Anyway, back to the current matter at hand, over the weekend, I downloaded a sample mobile website, which was developed using MVC. I've been able to edit the css files and the content files to give myself a really handy looking mobile website.

The only thing I'm not "getting" at the mo, is the way the solution doesn't contain any aspx files or controls such as asp:Label or asp:Button, instead it comprises of a chtml file and what I would consider to be "old" html controls such as <a href>...

On first exposure to MVC, I'm just not "getting it", I'm not seeing how I can use the experience I have with .NET, as in accessing controls programmatically, from a codebehind page etc, and managing what controls and what data the user can see and use, I'm not seeing how it all hangs together using MVC. Even something as simple as putting a text label on a page and controlling it with a button, doesn't seem to be as easy as it was using webforms and an aspx page?

I guess I'm asking would anyone have any advice for an MVC virgin?!?

John_Mc

I'm not being smart, but no reply on here is going to give you more information that the ASP.net MVC site

LordSinclair

John_Mc wrote: »

I'm not being smart, but no reply on here is going to give you more information that the ASP.net MVC site

I've watched 2 hours of video tutorials here on that site and I haven't seen a single thing that looks familiar to me from building a .NET website previously using webforms. Not giving out but it is a bit daunting!

Giblet

You don't need to access controls at all any more, you are instead responsible for the data these controls use.
You need to build up the model of the pages you want to render, and pass them to the views (which act as templates that use the data).
There are helpers which can render controls for you (ie: @Html.Checkbox), but most of those are used in the context of forms.
You can also pass data back to controllers using forms, querystring, JSON and much more. The idea of UserControls moves to the idea of Partials which are snippets of HTML which can be reused.

In WebForms, you have one giant form, and every control posts back it's state to the server and you have a mess of JavaScript and other things to support this. In MVC there is no requirement to use forms, except when you actually need a form. A button is now a link to a href, or a submit action for a form, radio buttons really only need to exist in the context of forms, or can have their behaviour overridden in JavaScript (which you write) to perform some other action.

The MVC framework also goes a lot further in allowing you to take complete control of the pipeline of events in a request, and allows things like Dependency Injection and IOC to work out of the box.

If you need some specific examples on how to perform similar tasks to WebForms, feel free to post here and I'll try rustle something up.

jimmycrackcorm

Op, you should be using JQuery UI for example instead. you'll then get plenty of super options that far exceed web form controls.

John_Mc

I agree with you Jimmy, but might be better to let the OP get his head around the MVC pattern and framework first.

Once he does and combines it with the likes of Bootstrap, jQuery, Knockout etc, he'll start to shudder when he thinks of Webforms!

LordSinclair

John_Mc wrote: »

I agree with you Jimmy, but might be better to let the OP get his head around the MVC pattern and framework first.

Once he does and combines it with the likes of Bootstrap, jQuery, Knockout etc, he'll start to shudder when he thinks of Webforms!

Thanks for the replies lads, I started off in this world back in the late 90's with very simple HTML form type markup. Then I started rummaging around with ASP when it came along and the transition from building a website using HTML code, to developing more complex data driven websites using ASP.NET (if that makes any sense), that transition from HTML code (buttons and hyperlinks and textboxes, etc!), to ASP.NET user controls and data management in the form of GridViews, etc, it seemed a bit more intuitive or something. In that I used very basic forms when I started HTML, and then used more a more complicated framework in .NET, but it was easy to see how one followed the other.

Many years later, moving from .NET webforms to MVC seems to be a very different type of transition. As a poster said above, I should immerse myself into it a bit more and maybe for the moment, not try to carry anything over from how I developed using webforms.

LordSinclair

Right, I've fallen at the first hurdle! How to create a new view (I would have called it a new page previously!), and navigate from one view to another, which I would have previously referred to, (using asp.net webforms), as creating a link and navigating from one page to another!

So what did I do, well I downloaded a sample project from the web and uploaded it to my sample web domain that I use for testing, and the index page for my mobile view loads perfectly, and actually looks great on my iPhone after I edited the background CSS, and added in a company sample logo, etc...

I then created a new view (copied and pasted it from the Index.Mobile.cshtml file), and renamed it AboutUs.Mobile.cshtml

I then updated my Home Controller to as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MobileSiteTest1.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
[COLOR=Red]
        public ActionResult AboutUs()
        {
            return View();
        }[/COLOR]

    }
}

I then went into my View for Index.Mobile.cshtml and updated it to put in a link into my new AboutUs view, as follows:

@{
    ViewBag.Title = "Index";
}

<div class="logo"><h1><a href="index.html"><img src="~/Content/mobile/images/logo.png" alt="logo" /></a></h1></div>
<div class="menu">
    <a href="/Home/AboutUs"><b>Bring me to the About Us Page</b></a>

</div>
<h2 class="head"></h2>
<div class="content">
<p>Some text goes in here</p>
</div>
<div class="footer">
    <p>Some more text can go here...</p>
</div>

I've rebuilt the solution and uploaded the entire project (just in case some DDL files needed to be updated), and I'm getting a 404 error saying cannot find the page?

I'd have thought after a few evenings of asp.net/mvc tutorials I'd have been able to manage this much?

The logic in my head here is that I have created a new view, and updated the HomeController to call & display my new view (AboutUs), when the link is clicked in the Index.Mobile.cshtml file?

The AboutUs page is definitely there...

Sadly I tend to trip over the simple stuff and the stuff down the road falls into place easily enough!

Any suggestions?!?

Giblet

That's the framework tripping you up.
When you use a View.Mobile.cshtml file, you need a View.cshtml file.
Make a file named AboutUs.cshtml

The .Mobile is an override for mobile only, you don't need it if you are doing mobile first, or responsive.

LordSinclair

Giblet wrote: »

That's the framework tripping you up.
When you use a View.Mobile.cshtml file, you need a View.cshtml file.
Make a file named AboutUs.cshtml

The .Mobile is an override for mobile only, you don't need it if you are doing mobile first, or responsive.

Hi Giblet, I did that, it's there and all I can see it, AboutUs.cshtml

this is a mobile site though, the Index.cshtml is rendering fine on my phone but the other AboutUs.cshtml is generating a 404 error...

Colonel Panic

Have you made an AboutUs view?

The framework uses convention over configuration so it expects files in certain places with certain names for it to all work. That's the key to getting it, I think.

Behind the scenes there's a lot going on that you only need to worry about later.

LordSinclair

Colonel Panic wrote: »

Have you made an AboutUs view?

The framework uses convention over configuration so it expects files in certain places with certain names for it to all work. That's the key to getting it, I think.

Behind the scenes there's a lot going on that you only need to worry about later.

Yeah I created a file called AboutUs.cshtml in my Views/Home folder, isn't that the "View"? I would previously have called this a "new page" but am trying to get into the habit of looking at MVC very differently than how I've looked at webforms...

Colonel Panic

Yeah, that's the view. If you put a breakpoint in the AboutUs method of the controller, does it get hit? If you step into the view method, what view does it try to load?

LordSinclair

Colonel Panic wrote: »

Yeah, that's the view. If you put a breakpoint in the AboutUs method of the controller, does it get hit? If you step into the view method, what view does it try to load?

I haven't got that far with MVC yet and as I haven't yet put a mobile emulator onto my laptop, I'm using my iPhone to "debug" the thing, as in just see if it is working, which it is until IO add my view. I downloaded the Safari mobile emulator which for some reason that I can't understand, doesn't have the iPhone in the list of mobile devices that it can emulate?!?

Colonel Panic

But it's not a mobile specific framework and debugging isn't MVC only either.

Is there an AboutUs.Mobile.cshtml file? Does it work on a desktop web browser?

LordSinclair

Colonel Panic wrote: »

But it's not a mobile specific framework and debugging isn't MVC only either.

Is there an AboutUs.Mobile.cshtml file? Does it work on a desktop web browser?

There it is in all its glory, do you think I can get it to open though lol, not a chance! The Index.Mobile View will load on my iPhone, but I can't get any of the mobile views to display on the local computer, or on the remote server, even though the Index.Mobile page displays fine...

Colonel Panic

How about if there's an AboutUs.cshtml file too? Just thinking of the convention over configuration thing, I've never made separate views for mobile myself!

Giblet

I don't see AboutUs.cshtml there, is it included in the solution?

LordSinclair

Giblet wrote: »

I don't see AboutUs.cshtml there, is it included in the solution?

Well I just copied & pasted the Index.Mobile.cshtml file into the same folder & renamed it AboutUs.Mobile.cshtml, the working assumption bring that if this file loads on my iPhone, then a copied version of it would load, I just changed the content text to differentiate them. I'm just trying to start my mvc journey here by creating a new page & a hyperlink to it, it should be easier than "hello world" lol!

Have to say it just feels plain wrong going back to using old HTML markup like <a href>, etc.

LordSinclair

Colonel Panic wrote: »

How about if there's an AboutUs.cshtml file too? Just thinking of the convention over configuration thing, I've never made separate views for mobile myself!

I didn't create this solution myself, I just downloaded it to fiddle with it and see if I could start getting my head around mvc, it would be easier I think if I was coming at it cold rather than coming at it from an aspx/webforms direction.

John_Mc

Why not start from scratch? That's better than jumping into a solution someone else has created. The boiler plater MVC solution is easy to follow and structured in the way M$ recommend

ChRoMe

John_Mc wrote: »

M$

:rolleyes:

John_Mc

ChRoMe wrote: »

:rolleyes:

Location: Facking London Bruv :rolleyes:

stevenmu

John_Mc wrote: »

Why not start from scratch? That's better than jumping into a solution someone else has created. The boiler plater MVC solution is easy to follow and structured in the way M$ recommend

+1, MVC is all about being guided by the framework and doing things it's way. When I first tried MVC I started with an existing project and tried just adding my own stuff to it randomly and I got more and more confused.

It's much better to start from scratch and follow a basic tutorial or two. It'll click in no time and then you can jump straight to the more advanced stuff.

Giblet

LordSinclair wrote: »

Well I just copied & pasted the Index.Mobile.cshtml file into the same folder & renamed it AboutUs.Mobile.cshtml, the working assumption bring that if this file loads on my iPhone, then a copied version of it would load, I just changed the content text to differentiate them. I'm just trying to start my mvc journey here by creating a new page & a hyperlink to it, it should be easier than "hello world" lol!

Have to say it just feels plain wrong going back to using old HTML markup like <a href>, etc.

Index.Mobile.cshtml has an Index.cshtml too, so AboutUs.Mobile.cshtml needs a AboutUs.cshtml to work as well.

If i were you I wouldn't use the .Mobile views at all, you don't need them, even if you are creating a mobile application, it's just some scaffolding to allow multiple html to be output depending on if you use mobile or not, you can just output your mobile view by default in AboutUs.cshtml.

There's nothing wrong with "old" html controls, sure isn't that what the browser uses? HTML is just a view, you don't need backing logic to dictate how it renders, that is a front end concern only, you only care about how you get the data to the frontend in MVC, not what happens after. You can't even delete controls from a page in WebForms without changing the code sometimes!

LordSinclair

stevenmu wrote: »

+1, MVC is all about being guided by the framework and doing things it's way. When I first tried MVC I started with an existing project and tried just adding my own stuff to it randomly and I got more and more confused.

It's much better to start from scratch and follow a basic tutorial or two. It'll click in no time and then you can jump straight to the more advanced stuff.

Well, my prob is that I have a fairly active aspx/webforms/desktop site that I manage and it takes up a lot of my time. I downloaded this solution just to see if it would upload to my remote test domain and actually run/load from there. I was surprised when it did so successfully, then I started editing the CSS and content and within 30 minutes and uploaded the changed code, was amazed to find that I had basically cobbled together a mobile (simplified) version of my site, it obviously had no functionality or logic, but I was very happy with the front end.

On the back of those small victories, I decided to stick with what I had downloaded and see if I could continue tinkering around with it, but adding a view has kinda gotten in the way of that. I remember running into the same kinda frustrations when I moved from HTML simple mark up back in my .htm days, onto aspx pages, the C# codebehind page at first actually frightened the shyte out of me haha, now generating controls progmatically, etc is second nature to me.

LordSinclair

Giblet wrote: »

Index.Mobile.cshtml has an Index.cshtml too, so AboutUs.Mobile.cshtml needs a AboutUs.cshtml to work as well.

Gonna give this a shot now...

Giblet wrote: »

There's nothing wrong with "old" html controls, sure isn't that what the browser uses? HTML is just a view, you don't need backing logic to dictate how it renders, that is a front end concern only, you only care about how you get the data to the frontend in MVC, not what happens after. You can't even delete controls from a page in WebForms without changing the code sometimes!

Ah I hear ya, it just seems counter intuitive when coming at it from aspx controls, naming a label or a text box without giving it an ID, etc, it feels like I'm doing it wrong, I know I'm not, it's all in me head as the man says!

LordSinclair

Ok my AboutUs desktop page is now loading on my local dev environment, but my AboutUs.Mobile view is not loading on my remote domain, the only view I actually need to see...

My HomeController doesn't need a different view for my mobile view, for the mobile view for the index.cshtml, it just has this in the file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MobileSiteTest1.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult AboutUs()
        {
            return View();
        }

    }
}

Can't work out why something as simple as just adding a view is so utterly convoluted?!?

stevenmu

LordSinclair wrote: »

Can't work out why something as simple as just adding a view is so utterly convoluted?!?

It shouldn't be really, I think you're just bypassing the MVC way of doing it by copy-pasting. You should be able to right-click in solution explorer to add a view that way, and it should add everything that's needed and wire it all up correctly.

http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-view

LordSinclair

stevenmu wrote: »

It shouldn't be really, I think you're just bypassing the MVC way of doing it by copy-pasting. You should be able to right-click in solution explorer to add a view that way, and it should add everything that's needed and wire it all up correctly.

http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-view

Gonna give this a shot, looks like I may have done wrong for trying to do right with my copy & pasting... :rolleyes:

LordSinclair

This just gets better and better, I have 2 views now that WILL OPEN in ViewInspector, independently of one another, but when I try to open the second view (OurTeam), from the main page (Index), hyperlink, it says view not found. I would expect this if I put in the hyperlink myself, however I let intellisense do it ( (I mean I let intellisense let me pick it out of the list of files/views that it can link to)?!?!?