Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Getting Started with WebMatrix and ASP.NET Web Pages

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Microsoft] [] Hi folks. Joe Stagner from Microsoft here, and welcome to this video series on building web pages with Microsoft WebMatrix. Now before we get started there are 2 concepts that I want to cover. One is what are the pieces that combine to make the WebMatrix stack, and the other is what's unique about WebMatrix that you might choose it instead of other web development technologies? So here you can see a visual representation of the 4 basic parts that combine to make the WebMatrix stack. The first is the WebMatrix Tool. Now the WebMatrix Tool is an IDE. It's not Visual Studio, and it doesn't replace Visual Studio. You can and probably will use WebMatrix and Visual Studio side by side, but you don't need Visual Studio. In fact WebMatrix, like all of the other pieces of the stack, are completely free, and that might be an incentive for you. So WebMatrix is an IDE, but one of the things that the WebMatrix Tool Team has done is they've heavily leveraged the work that we've done with the web platform installer and added the ability inside the WebMatrix Tool to let you browse the web applications gallery and choose an application to download and configure and use that as the starting block for your custom website. So using the WebMatrix Tool I can say find the category of open-source application that I'm interested in starting with. Maybe I'll choose the Orchard project. The WebMatrix Tool will go get the Orchard project and download it from the web, help me configure it so that the WebMatrix's project is there, installed, configured, and ready for me to go, and then I can start doing building on top of that open-source application. The WebMatrix Tool, through this installer process, is not restricted to any particular technology, so you don't have to use ASP.NET webpages. You could use PHP for example. You can go download WordPress and get started that way if you chose to. Now another interesting installer technology that's available from inside the WebMatrix Tool is NuGet. NuGet is a package manager, and you can access NuGet from the command line, but for WebMatrix Tool users you have access to the NuGet Package Manager from inside an application that's running inside the IDE. NuGet is for development technology. You can find and download, install, and configure bits of technology that you can use during your development process. We'll obviously demonstrate both of those as we progress. Now the last thing that's interesting in the WebMatrix Tool is this concept of default templates. There are a collection of templates. These are not open-source applications per say. They're just templates that you can use to jump-start your development. Now, for example, the basic WebMatrix template gives you some directory structure, a basic page template. It gives you some basic functionalities like ASP.NET membership. One of the other nice things is that most of the templates use both jQuery and are HTML5 compliant, so you're really starting with a modern sort of page-centered development model that embraces the new technology of the web. Let's next talk about webpages themselves. What are ASP.NET WebPages? Well ASP.NET WebPages is a term that we use to describe this model of development where you have a single file, and you can use either VB or C# as your development language. So for C# you would have a file that's .cshtml. For VB you would have a file whose extension was .vbhtml. In that file is a collection of your markup, your client-side code, and your server-side code. The Razor syntax is a very elegant model that lets us pretty intuitively switch between markup and server-side code. One of the things that the Razor syntax exposes is a simplified collection of APIs. Even though it's full .net under the coverage, so if you have to you can get to anything that's available on the .net framework that's appropriate for web development. It's a collection of simplified APIs to make things like database access much easier from a syntactical perspective. There's also a really interesting concept at helpers. Now helpers are these objects that you can create that wrap really more complex functionality and allow them to be called from your CSHTML page with a single line of code. One of the cool things about helpers is that they're available—you can create them and use them both in CSHTML or VBHTML pages as well as ASP.NET MVC 3 applications. Of course another thing to note is that ASP.NET webpages are built on top of ASP.NET MVC. So even though you don't have to do anything MVC-oriented, it's nice to know that MVC's under the coverage and I can get down there if I need to. Next the database that is embedded by default—that's used by default by the WebMatrix Tool—is SQL Compact. Now there's some interesting things about SQL Compact. Unlike some of the other embeddable databases that you might use, SQL Compact is compatible with the full-blown enterprise version of SQL, but it's file based. So I can run it from my bin folder which means that if I'm using a shared hosting environment I don't have to get a SQL add-on. The code that runs the database engine, if you will, actually is part of my application. It's file based so I can move the actual files that store the data easily when I deploy them. I don't have to do backup and restore, or I don't have to script the database and then populate it with data. I just move that file from my development scenario to my production scenario. There's a SQL Compact designer that's built into the WebMatrix tool which makes things easy and productive. Of course lastly when you deploy, you can decide to deploy your SQL Compact database, or you can easily migrate to a full-blown version of SQL if your application would require that. Last let's look at IIS Developer Express. Now unlike the Visual Studio web development server, sometimes referred to as Cassini, IIS Developer Express is a fully compatible version of IIS. This is really important because there are lots of things that we couldn't do with the built-in web server of Visual Studio. But it still has the security attributes of the Visual Studio web development server. So things like it fires up on demand, so it starts itself when you need it. It can run against a dynamically allocated port, so you don't have some of the security concerns that some environments have when running the full-blown version of IIS on multiple development boxes. It can run as non-admin, so this works the same as production. In fact it goes in the programs—installs in program files. That makes it really convenient for doing development, and we can get into some of the more advanced things that we can do with the full-blown version of IIS because we're no longer restricted by the limited feature set of the old development server. So hopefully that exposes what all of the various pieces of the WebMatrix stack are. Now, again, the reason that you might choose this is now from Microsoft and from other vendors there are a collection of choices that you could make when you're deciding how to build your web application. WebMatrix—first of all there's a low barrier of learning entry, so it's easy for folks that have some knowledge about HTML to get started with, but it doesn't stop there. There are lots of folks that I've been talking to that are actually starting to build full-blown websites using WebMatrix because of this page-centric model. Where this fits relative to other Microsoft technologies, at least from my personal perspective, is that Web Forms abstracts all the plumbing of the web, and that was great, especially early on and even today. If you don't need to have access to that, the Web Forms abstraction makes things really productive. So if you're doing forms-oriented application development, Web Forms is still the right choice for you. After Web Forms Microsoft released MVC which uses the model-view-controller gang-of-four pattern and provides you with easy testability. You can use test-driven development as your development process if you want to. It has really strong separation of concerns; however, for lots of websites that have some functionality that's overkill, and there's a level of complexity that can either retard productivity depending on what your needs are, and also some folks don't want to be bound to the constructs of the MVC model. So the page-centric model can be uniquely appropriate if you're building a website that is page oriented that has—but you still need some programmed functionality in that website. So with that, let's go ahead, jump into WebMatrix, take a tour of the Tool, and see how we could get started. So the first thing you need to do is actually download and install the WebMatrix stack. So you can do that by going to then clicking on the download now button. When you do that you get redirected to the installer page. It will fire up the web platform installer. Now you're going to click on yes. I'm not going to because I've already installed the product. You're going to walk through all of the steps. Basically you'll get a screen that gives you a list of things that you can install. You're going to click the add button next to WebMatrix. The platform installer will figure out what the dependencies are, install the entire stack, and then in your start menu and all programs you'll have a folder for Microsoft WebMatrix. Now one of the things that's cool that you can do once you've installed WebMatrix is if you have a directory that has CSHTML pages in it or just HTML pages you can right-click on that folder and say open as a website with Microsoft WebMatrix. So you can actually just open an HTML site and rename that HTML page to CSHTML, or VBHTML if you're working with the VB syntax, and then start working with that as a WebMatrix website. So that's pretty cool. I can also fire up WebMatrix, and we're going to take a look at the ways that we can start. So one of the things I can do is I can say show me my sites, so these are sites that you've already created, or I can just browse and go find a folder that has either a WebMatrix site or just an HTML site if I want to. But then the more exciting parts are first we could say start from the web gallery. So what's that going to do is via an RSS feed it's going to go out and actually fetch the collection of applications that are available in the website gallery. So notice here, one of the interesting things about this is these are all different kinds of applications. DotNetNuke is an ASP.NET application. WordPress is a PHP application. Let's see. What else do we have here? Subtext is a blogging engine written in ASP.NET. So there's a whole collection. We're going to say—maybe we'll choose CMSs here. Right? There's Drupal. There's Moodle, Sitefinity. Dropthings is interesting. We could add Microsoft Orchard if we wanted to. So the interesting thing here is I can pick, and it doesn't matter what technology it is. Anything that is supported inside IIS I can select here from inside the gallery. The other thing that I could do though is I could say let's start from a template. I'm going to build really a custom application. I could create an empty site. Starter site is the one that's more commonly going to be used, or I could pick one of the other templates. So let's select the starter site. I'm going to call it Joe's Starter Site. Go ahead and click on ok, and we'll just take a tour of the IDE a little bit and look at some of the syntax. So note here, first thing this tells me that the site started successfully. That means that IIS Express is running, and I can say go ahead and fire up the site. Here you can see this is my default page. If you've been working with ASP.NET technology before you sort of know this look and feel. Note here I've got a couple of pages. I can go to the about page. Membership is wired in by default, so I can go ahead and register for the site if I want to. So in basic site. Notice here there are 4 selections here: Site, files, databases, and reports. Let's explore some of the features that are available here. First we're looking at site. Notice here it gives us some information. Here's the URL that we're running on, so this is the dynamically assigned IP address, 4480. Here's the physical path to the directory where my site lives. I can quick start. I can go to browse your files or manage databases from here. I can also set up remote publishing for my location. If I don't have a hoster, I can say hey, go find me a hoster, and I can see one of the hosters that's available as part of the hosting program that supports ASP.NET WebMatrix hosting, and that's useful. Or I can also tell the WebMatrix ASP.NET Team what I'd like to see them add or make feature requests or bug notifications all directly here from inside the WebMatrix Tool. So one of the cool things I can do also is I can look, and I can see the history of the requests. So from a debugging perspective, I can look at actually what's happening when I'm interacting with that application. Lastly I can work with the settings for this particular website. I might want to change the port number. I can work with SSL. That's really interesting from a test and debugging perspective. That can be more difficult to do in other environments. I can also turn PHP on if I want to, and then of course I can look at the specific pages. Now if I switch to files mode I can see the directory of files. Notice here I've got some organization. App data is where the .sdf, the SQL Compact repository that includes my membership, etc. Here's the secure directory for account information. Notice here we have these layout pages, so we're going to explore all the syntax as we move forward. I can add a file to my site very easily. Notice if I right-click I can open the default, cut, copy, paste, rename. So for example, if I wanted to rename my database file I could do that simply by right-clicking rename, or I can go into databases. Notice here I have my starter site. So this is my database designer. Notice these are the tables that are available. If I double-click I can see the actual table itself, and I can make other connections if I want to so I can connect to a remote database either in a SQL server instance on my machine or somewhere else in my development environment if I choose to. So notice as I change—my launch bar changes—the menu items change as well. Notice if I don't have SQL server I could just install it, or I could migrate easily using the Tool. So you'll see there's a lot of functionalities built into the Tool that's pragmatic for page-oriented website developers. Lastly reports is kind of interesting. I can run, for example, an SEO report for my site, and we'll do that in another video, but the point here is that there's this extensible reporting mechanism so we'll build additional reports over time, and third-party providers might build them. You might even provide custom reports that you want your developers to be able to run inside your WebMatrix project. So that's a tour of the WebMatrix Tool itself. Now let's go ahead and start doing a little bit of development looking at some of the basic syntax. So let's go back into the Joe's Starter Site application that we generated from one of the default templates and look a little bit at syntax, and then we'll run the site. We'll see what's interesting from there. So here we're in the default .cshtml page, and you'll notice this text. ASP.NET webpages make it easy to build powerful .net-based applications for the web. Let's go ahead and run this and see here's that text, but where did all the rest of this stuff come from? Well note here 2 things. First of all page.title=welcome to my website. So there's this interesting thing. There is a page object, and there is a title attribute, and it can be set here in the code block of my CSHTML page. Now notice here the code block, so we don't have to do sort of [email protected] or whatever. It makes it very elegant to just hop into and out of code, and we'll see this throughout all of our WebMatrix development. The other thing we have here is this layout object which we're setting to _sitelayout.cshtml. So if we look over here we can see there's a file_sitelayout.cshtml, and if we open this up we'll see there's the layout for our page. So for example, this is where we output the page title using page.title which we set here in default.cshtml. Notice here we're just saying the @href, so this is a little bit of code. We're going to resolve this CSS file. We're also going to resolve this icon file that we want to use for our page. These all take place in the header, and then down here we're using this same sort of format, but notice the code here. So we have an @—we just put @, and then we start coding. If websecurity. is authenticated, so a very easy API to access ASP.NET's membership, we could just find out is the current user authenticated? If they are then we're going to give them access to some of the account functionality by adding hrefs, basically links, to either change the password or log out, or if they're not logged in, so if web security is authenticated is not true, then we're going to fall to the L statement where we're going to output a couple of links for the user to either log in or register. Down here at the bottom notice we're picking up the current year calling @, so going into code mode, That's going to be output as part of the copyright. Then right here it says @renderbody, so what that basically does is say all the stuff that exists in the page that included me should be inserted here. Super. If we look at the about page, we have a similar construct. Now another thing to note here, if we look at this also file _appstart. So in our case setting up the connection to the database so starter site user profile, user ID. So if, by the way, you went to change the name of that file, so you didn't like starter site as the SDF file name, you'd want to change the name here as well. Notice there's no use of an extension. It defaults to the SDF extension. That makes migration easier. That's the basic construct for the page syntax, and we'll be exploring the page syntax in much greater detail as we move on. You can also, if you want to, go in and look at all the CSHTML pages for the account functionalities, and that's a great way to really sort of jump-start your learning of the CSHTML syntax. Now let's go ahead and run this again. So I'm going to highlight the default.cshtml page because that's the page that I want to run. Notice here there's something else that I might want to do. I'm just going to let you know about this, and we're going to explore it in some additional detail later. Notice the first thing here it tells us is I've gone to _admin, and it's defaulted to this register.cshtml page, but I just went to myapplication/_admin. Now it's telling me that in order to access the admin pages for this application I need to create a password, so I'm just going to create a password. Next it's going to tell me that it's created a file. So this says for security reasons your password hash is saved in a file name _passwordconfig in the appdata/adminfolder of your site. To fully enable site administration, rename the password file by eliminating that underscore at the beginning. Now the reason for this is it's just a security feature. You don't probably want to deploy this functionality, or you want to at least not have it deployed as activated by default. So if we refresh, we can see that we now have an admin folder, and I want to rename that password.config file by getting rid of that leading underscore. Now once I've done that I can switch back to my browser, click on the click here link, enter the password that I just set up, and now I'm in the Package Manager. There are no packages that are installed. I can install from an online feed if I want. Let's go ahead and click on that. Now notice these are the default packages, so ASP.NET Web Helpers Library. Package contains web helpers such as Captcha validation, Twitter profile, gravatars, etc. A quick edit helper, a Twitter helper, a URL shortener, Azure Storage Helper. We'll look at these. We just click on install if we want to use them in this particular WebMatrix application. Now we're looking at the ones that are online. So we can check for ones that might have been updated or see the ones that are already installed. Notice here the source is default, so these are ASP.NET WebMatrix specific things. I can just pick one, choose install. In my case I'm going to choose cancel. If we change source from default to default all wait until you see what we get. Now if we scroll down a little bit look here. We can see 34 pages of things that are available. Now some of these might be application specific, they might be specific to ASP.NET MVC or some other technology but interesting to know that they're all there. We can filter them just by selecting source default instead of default all to look at the ones that are WebMatrix specific. So we can also add additional sources, so for example, if your company wants to create a repository on its own intranet, you can just add that package source and create your own repository, or you can use third-party ones. Whatever you like. So it's very flexible. That's the basics of the syntax and of the Package Manager. Now let's move on and see what else we have in developing this ASP.NET page. So before we conclude this introductory video, let's just add one bit of functionality. I'm going to go ahead, and I'm going to right-click and say copy the default.cshtml page, and I'm going to paste it just to have a look at how we might start extending on the default site. Let's add a page named contact. Now I'm going to open contact. We're not actually going to implement the contact form yet, but we're going to add it to our site. I'm going to change the page title to contact us, and then I'm going to say please send us your thoughts on our website. Now of course we want folks to be able to get to this, so I'm going to go into site layout. You'll notice here we have these menu items. I'm going to grab one of them and make a copy. Oops. Instead of about it's going to be contact. Now notice that there's some routing intelligence that's already built in, so I don't have to specify the file name extension in my href. All right. I'll go ahead and save that and then go and run the default page again. Now you can see there's a contact us link because we added it to our layout. If I click on that you'll notice we've picked up the page title, and the page title has been echoed by virtue of the retrieval in the site layout. So that's just a quick look. We just added one page and added that page to our menu. Throughout the rest of these videos we'll see about using the various functionality both coding in the ASP.NET WebMatrix way as well as using the helpers and other features that are available in the entire ASP.NET WebMatrix stack. [Microsoft] []

Video Details

Duration: 27 minutes and 7 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 6
Posted by: neudesicasp on Sep 20, 2013

Video accompaniment to the Getting Started with WebMatrix and ASP.NET Web Pages tutorial

Caption and Translate

    Sign In/Register for Dotsub to translate this video.