Adding tutorials section

Moved your-first-aspnet-app from yourfirst folder
pull/143/head
Steve Smith 2015-04-28 00:37:48 -04:00
parent e61c4bfb19
commit 36d1465c80
12 changed files with 31 additions and 22 deletions

View File

@ -10,6 +10,7 @@ ASP.NET 5 Documentation
:maxdepth: 2
getting-started/index
tutorials/index
conceptual-overview/index

View File

@ -0,0 +1,8 @@
Tutorials
---------
.. toctree::
:maxdepth: 2
your-first-aspnet-application

View File

@ -1,38 +1,38 @@
Your First ASP.NET 5 Application Using Visual Studio
====================================================
By `Steve Smith`_ | Originally Published: 1 June 2015
By `Steve Smith`_ | Originally Published: 28 April 2015
.. _`Steve Smith`: Author_
ASP.NET 5 provides a host of improvements over its predecessors, including improved performance, better support for modern web development standards and tools, and improved integration between WebAPI, MVC, and WebForms. In addition, you can easily develop ASP.NET 5 applications using a variety of tools and editors, but Visual Studio continues to provide a very productive way to build web applications. In this article, we'll walk through creating your first ASP.NET 5 web application using Visual Studio 2015.
This article covers the following topics:
- Create a new ASP.NET 5 Project
- Running the Application
- Server-Side vs. Client Side Behavior
- Adding Server-Side Dynamic Content
- Adding Client-Side Dynamic Content
- `Create a New ASP.NET 5 Project`_
- `Running the Application`_
- `Server-Side vs. Client-Side Behavior`_
- `Adding Server-Side Behavior`_
- `Adding Client-Side Behavior`_
You can download the finished source from the project created in this article HERE **(TODO)**.
.. You can download the finished source from the project created in this article HERE **(TODO)**.
Create a New ASP.NET 5 Project
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
------------------------------
To get started, open Visual Studio 2015. Next, create a New Project (from the Start Page, or via File - New - Project). On the left part of the New Project window, make sure the Visual C# templates are open and "Web" is selected, as shown:
.. image:: _static/new-project.png
.. image:: your-first-aspnet-application/_static/new-project.png
On the right, choose ASP.NET Web Application. Make sure the framework specified at the top of the window is .NET Framework 4.6. Enter a name and confirm where you would like the project to be created, and click OK.
Next you should see another dialog, the New ASP.NET Project window:
.. image:: _static/select-template.png
.. image:: your-first-aspnet-application/_static/select-template.png
Select the ASP.NET 5 Starter Web template from the set of ASP.NET 5 templates. These are distinct from the ASP.NET 4.6 templates, which can be used to create ASP.NET projects using the previous version of ASP.NET. Note that you can choose to configure hosting in Microsoft Azure directly from this dialog by checking the box on the right **(ED: confirm this is available at RTM)**. After selecting ASP.NET 5 Starter Web, click OK.
At this point, the project is created. It may take a few moments to load, and you may notice Visual Studio's status bar indicates that Visual Studio id downloading some resources as part of this process. Visual Studio ensures some required files are pulled into the project when a solution is opened (or a new project is created), and other files may be pulled in at compile time. Your project, once fully loaded, should look like this:
.. image:: _static/visual-studio-on-project-load.png
.. image:: your-first-aspnet-application/_static/visual-studio-on-project-load.png
Looking at the Solution Explorer and comparing the elements with what we're familiar with in previous versions of ASP.NET, a few things stick out as being new and different. There's now a *wwwroot* folder, with its own icon. Similarly, there's a *Dependencies* folder **and** still a *References* folder we'll discuss the differences between these two in a moment. Finally, there's a Compiler folder that isn't something we've seen in prior versions of ASP.NET. Rounding out the list of folders, we have Controllers, Models, and Views, which make sense for an ASP.NET MVC project, and Migrations, which holds classes used by Entity Framework to track updates to our model's database schema.
@ -41,11 +41,11 @@ Looking at the files in the root of the project, we may notice the absence of a
While we're at it, you may not notice it from the Solution Explorer, but if you open Windows Explorer you'll see that there is no longer a .csproj file, either. Instead you'll find a .kproj file, an MSBuild file that serves the same purpose from a build process perspective, but which is much simpler than its csproj/vbproj predecessor.
Running the Application
^^^^^^^^^^^^^^^^^^^^^^^^^^^
-----------------------
Run the application and after a quick build step, you should see it open in your web browser.
.. image:: _static/first-run.png
.. image:: your-first-aspnet-application/_static/first-run.png
Click on the About link, and note the text on the page. Now, open the HomeController.cs file in the Controllers folder, and change the ViewBag.Message as follows:
@ -55,11 +55,11 @@ Click on the About link, and note the text on the page. Now, open the HomeContro
Save the file and, **without rebuilding the project**, refresh your web browser. You should see the updated text. ASP.NET 5 no longer requires that you manually build your server-side logic before viewing it, making small updates much faster to inspect during development.
.. image:: _static/about-page.png
.. image:: your-first-aspnet-application/_static/about-page.png
Server-Side vs. Client-Side Behavior
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
------------------------------------
Modern web applications frequently make use of a combination of server-side and client-side behavior. Over time, ASP.NET has evolved to support more and more client-side behavior, and with ASP.NET 5 it now includes great support for Single Page Applications (SPAs) that shift virtually all of the application logic to the web client, and use the server only to fetch and store data. Your application's approach to where its behavior resides will depend on a variety of factors. The more comfortable your team is with client-side development, the more likely it is that much of your application's behavior will run on the client. If your web site will include a great deal of public content that should be discoverable by search engines, you may wish to ensure the server returns this content directly, rather than having it built up by client-side scripts, since the latter requires `special effort`_ to be indexed by search engines.
@ -70,7 +70,7 @@ On the server, ASP.NET MVC 6 (part of ASP.NET 5) works similarly to its predeces
Now we can add a bit of behavior to both the server and the client of the default application, to demonstrate how easy it is to get started building your own ASP.NET 5 application.
Adding Server-Side Behavior
^^^^^^^^^^^^^^^^^^^^^^^^^^^
---------------------------
We've already tweaked the behavior of the HomeController's About method to change the Message passed to the View. We can add additional server-side behavior by further modifying the AboutController and associated View. Then, we'll enhance this basic information by adding some client-side behavior that makes API calls back to the server.
@ -127,12 +127,12 @@ Now we can build the solution. Since the default web template targets both the f
Now we should be able to build and run the solution. Navigate to the About page and you should see your server name and OS version displayed.
.. image:: _static/server-behavior.png
.. image:: your-first-aspnet-application/_static/server-behavior.png
Adding server-side behavior in ASP.NET 5 should be very familiar if you have been working with previous versions of ASP.NET MVC.
Adding Client-Side Behavior
^^^^^^^^^^^^^^^^^^^^^^^^^^^
---------------------------
Modern web applications frequently make use of rich client-side behavior, whether as part of individual pages generated by the server, or as a Single Page Application. Popular JavaScript frameworks like AngularJS provide rich functionality for SPAs, but in this example we will take advantage of another framework that is included in the basic web project template: jQuery. Our goal is to allow the user to click a button on the About page and have it load a list of the current processes running on the server, without refreshing the page. To do this, we will need to add some HTML and JavaScript to our About.cshtml view, as well as create a Web API controller that our client-side code can call to get the list of processes running on the web server.
@ -178,7 +178,7 @@ Next, we need to add some script that will run when the listButton button is cli
At this point, we're done with the client code and we need to add the Web API code that will respond to a GET request to the "/api/processes" URL. Add a new item to the Controllers folder, and choose a new Web API Controller. Call it ProcessesController as shown.
.. image:: _static/add-api-controller.png
.. image:: your-first-aspnet-application/_static/add-api-controller.png
Delete all of the methods except for the Get() method, and update the Get() method to return an enumeration of ProcessInfo items as shown (we'll define ProcessInfo in a moment).
@ -218,16 +218,16 @@ Finally, add the class ProcessInfo to the Models folder:
At this point, you should be able to test the API by navigating to the /api/processes path in your browser. You should see some JSON-formatted process names.
.. image:: _static/processes-listed.png
.. image:: your-first-aspnet-application/_static/processes-listed.png
Navigating back to the About page, clicking on the button should similarly load the list of processes into the HTML list.
.. image:: _static/processes-on-about-page.png
.. image:: your-first-aspnet-application/_static/processes-on-about-page.png
Now the application includes both server-side and client-side behavior, running together on the About page.
Summary
^^^^^^^
-------
ASP.NET 5 introduces a few new concepts, but should be very familiar to developers who have used previous versions of ASP.NET. Creating a new web application that includes both server-side and client-side behavior takes only a few minutes using the Visual Studio ASP.NET 5 Starter Web template.

View File

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

View File

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

View File

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB