4 0RazorCusingWebMatrix

ASP.NET 4.
0, Razor C#
Using WebMatrix
Author: Darel Johnson (c-bar) http://www.linkedin.com/in/dareljohnson Duluth, GA Date: 05/02/2012
ASP.NET 4.0, Razor C# Tutorial -page 1
Table of Contents
ASP.NET 4.0, Razor C# Tutorial ASP.NET - Creating a Website Using WebMatrix ASP.NET - Changing the Visual Style of a Website ASP.NET - Using the Layout Feature in WebMatrix ASP.NET - Creating a Data Driven Dynamic Webpage in WebMatrix ASP.NET - Create a Web Interface in WebMatrix to Allow Users to Add Data ASP.NET - Create an Edit Data Page in WebMatrix ASP.NET - Creating a Delete Data Page in WebMatrix
ASP.NET 4.0, Razor C# Tutorial
ASP.NET - Creating a Website Using WebMatrix

1. Site from Template - Empty Site name it "movies". 2. Create a New file. Choose New File Type: HTML and name it "default.html" or import one from an external HTML editor.
3. Open the HTML file and edit the file and put some content in it. Fill out the <title> tag with the name of the site, and the <body> tag with an <h1> tag for the Title of the page and an ordered list of movies <ol> and sub <li> html list tags. 4. Run the website in the browser to test it.
ASP.NET - Changing the Visual Style of a Website

1. Wrap up the "movieslist" inside a <div> tag. Give this tag an id="movieslist". 2. Wrap the Header and Footer into their own <div> tag sections. The Header will consist of the content below the opening <body> tag, and above the "movieslist <div>, you created in step 1. Similarly, create a Footer section below the "movieslist" <div>, and give it an id="footer". 3. Add an inline style to the <h1> tag. style="color:blue;font-size:32;font-family:Verdana" 4. Run in the browser. 5. Next, let's create a new style section for the page Title. Place the code between the <head> tags. .Title { font-size: xx-large; font-weight: normal; }
<h1>Text goes here</h1> 6. Let's move the styles outside of the HTML page. 7. Create a New File of File Type: CSS and name it "movies.css". 8. Delete the code from the "movies.css" file (body {}), and cut and paste the style code from the default.html file. 9. In the HTML page, delete the <script> tag and its contents, and replace it with a new <link> tag and add a reference to the "movies.css" style sheet. 10. Apply some more styles to "movies.css". Add a style for the Footer and the Header. 11. Run in browser.
ASP.NET - Using the Layout Feature in WebMatrix

1. Create a New File Type: cshtml and name it "movies.cshtml". 2. Copy everything from the "movieslist" <div> and paste into the "movies.cshtml" file. 3. Run in browser. 4. Create a New File Type: cshtml and name it "PageHeader.cshtml". 5. Move the HTML code above the movieslist <div> in the default.html page and paste into the PageHeader file. 6. Similarly, create a new page; PageFooter.cshtml file and move the remaining code below the movieslist <div> and paste it into the PageFooter file. 7. Next, we'll use the Razor syntax to dynamically load the Header and Footer sections into the "movies.cshtml" page. 8. Open the movies.cshtml file and add the following Razor code: @RenderPage("PageHeader.cshtml") <div id="movieslist"> <ol> <li><a href="#">It's a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li>
<li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol> </div> @RenderPage("PageFooter.cshtml") 9. Run the code in the browser. Let's implement the main Site Layout a template for every page: 10. Create a New File Type: cshtml and name it "_siteLayout.cshtml". 11. Next, copy and paste the full HTML markup from the default.html page. 12. Remove the "movieslist" <div> and replace it with the @RenderBody() command. 13. Remove the @RenderPage() commands (Header & Footer) from the "movies.cshtml" file. 14. Next, create a New File Type: cshtml and name it "_PageStart.cshtml". This page will be called whenever any cshtml page gets called from the Browser. 15. Now set the layout variable in a newly created Razor code section. This variable will call "_siteLayout.cshtml" page. Now the entire site can be driven by the site layout. @{ Layout = "~/_siteLayout.cshtml"; } 16. Now, run the site in the browser. 17. Next, let's add a new page "about.cshtml". Replace the content of this page with a new heading between <h1> and <h2> tags. You can basically put any kind of content to want in it. Subsequently, you should be able to add more pages to your site that will by default use the Master site layout from now on. 18. Now, run the site in the browser. You should see the same Master layout.
ASP.NET - Creating a Data Driven Dynamic Webpage in WebMatrix

1. Click the Database workspace.
2. Next, click "Add a database to your site". Based on the site name a database filename "movies.sdf" gets created. 3. Next, create a table to the database. Select the "New Table" tool in the ribbon at the top. 4. Next, let's navigate to the Table and add some columns to the table. Set the data types for each column. 5. First, set the first column name to "ID" and set the data type to bigint. Now set the is Identity and Is Primary Key as true. 6. Add some more columns as needed. After adding all the columns, click the save button on the Title Bar to save all tables. A dialog box opens up to save the table asking for a name for the table. Here, name the table as "Favorites" and then click ok. 7. Let's add some data to the table. Double click on the "Favorites" table. The "Favorites" table opens up without any data. 8. Enter some values into the table. Let's see how we can access this data from a webpage: 9. Next, click the "Files" workspace and click New File Type: cshtml and name it "dataMovies.cshtml". 10. After this replace all the code with the code from the movieslist <div>. Enter some Razor code at the top: @{ var db = Database.Open("Movies"); var sqlQ = "SELECT * FROM Favories"; var data = db.Query(sqlQ); } <div id="movieslist"> <ol> <li><a href="#">It's a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li> <li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol> </div> Then, remove the static HTML code from the "movieslist" <div>. Replace this with the Razor syntax to loop through the "Movies" database with a foreach loop. <div id="movieslist"> <ol> @foreach( var row in data ){
<li> <a href="#">@row.Name, @row.Category, @row.ReleaseYear</a> </li> } </ol> </div> 11. Now, run this page in the browser.
ASP.NET - Create a Web Interface in WebMatrix to Allow Users to Add Data

1. Next, click the "Files" workspace and click New File Type: cshtml and name it "AddMovies.cshtml". Replace the content of this page with some new heading. <h1>Add a New Movies to the database</h1> 2. Now go back to the "dataMovies.cshtml" page and add a hyperlink anchor tag before the closing <div> tag. <a href="AddMovies.cshtml">Add a new movie</a> So, that your "movieslist" code looks like this: <div id="movieslist"> <ol> @foreach( var row in data ){ <li> <a href="#">@row.Name, @row.Category, @row.ReleaseYear</a> </li> } </ol> <a href="AddMovies.cshtml">Add a new movie</a> </div> Your anchor link will take you to the "AddMovies.cshtml" page where you can add new movies. 3. Run the page in the browser. 4. Let's create a new form for the "AddMovies.cshtml" page. Now we are going to add a Form using the <form> tag. <h1>Add a New Movies to the database</h1> <form action="" method="post"> <p>Name: <br/><input type="text" name="formName" /></p>
<p>Category: <br/><input type="text" name="formCategory" /></p> <p>Year: <br/><input type="text" name="formYear" /></p> <p><input type="submit" value="Add Moive" /></p> </form> 5. Add a Razor code block to the top of the page to access and post values back to the database. @{ var MovieName =""; var MovieCategory =""; var MovieYear =""; if(IsPost){ MovieName = Request["formName"]; MovieCategory = Request["formCategory"]; MovieYear = Request["formYear"]; var sqlINSERT = "INSERT INTO Favories (Name, Category, ReleaseYear) VALUES (@0, @1, @2)"; var db = Database.Open("Movies"); db.Execute(sqlINSERT, MovieName, MovieCategory, MovieYear); Response.Redirect("dataMovies.cshtml"); } } <h1>Add a New Movies to the database</h1> <form action="" method="post"> <p>Name: <br/><input type="text" name="formName" /></p> <p>Category: <br/><input type="text" name="formCategory" /></p> <p>Year: <br/><input type="text" name="formYear" /></p> <p><input type="submit" value="Add Moive" /></p> </form> 6. Next, run the web page, and add a new movie to the database.
ASP.NET - Create an Edit Data Page in WebMatrix

1. Now , Let's create a new form to help us edit existing movies in the database.
2. Next, click the "Files" workspace and click New File Type: cshtml and name it "EditMovies.cshtml". Replace the content of this page with some new heading. <h1>Edit a New Movie in the database</h1> 3. Next, we are going to add a Form using the <form> tag. <h1>Edit a New Movie in the database</h1> <form action="" method="post"> <p>Name: <br/><input type="text" name="formName" value="@MovieName" /></p> <p>Category: <br/><input type="text" name="formCategory" value="@MovieCategory" /></p> <p>Year: <br/><input type="text" name="formYear" value="@MovieYear" /></p> <p><input type="submit" value="Edit Moive" /></p> </form> 4. Add a Razor code block to the top of the page to access and post values back to the database. @{ var var var var var var var id =Request["id"]; SQLSELECT = "SELECT * FROM Favories where ID= @0"; db = Database.Open("Movies"); Movie = db.QuerySingle(SQLSELECT, id); MovieName =Movie.Name; MovieCategory =Movie.Category; MovieYear =Movie.ReleaseYear;
if(IsPost){ MovieName = Request["formName"]; MovieCategory = Request["formCategory"]; MovieYear = Request["formYear"]; var sqlUPDATE = "UPDATE Favories Set Name=@0, Category=@1, ReleaseYear=@2 WHERE id=@3"; db.Execute(sqlUPDATE, MovieName, MovieCategory, MovieYear, id); Response.Redirect("dataMovies.cshtml"); } } <h1>Edit a New Movie in the database</h1> <form action="" method="post"> <p>Name: <br/><input type="text" name="formName" value="@MovieName" /></p> <p>Category: <br/><input type="text" name="formCategory" value="@MovieCategory" /></p> <p>Year: <br/><input type="text" name="formYear" value="@MovieYear" /></p> <p><input type="submit" value="Save Edited Movie" /></p>
</form> 5. Next, run the web page, and edit a movie in the database, and then save it.
ASP.NET - Creating a Delete Data Page in WebMatrix

1. Now , Let's create a new form to help us with deleting existing movies in the database. 2. Next, click the "Files" workspace and click New File Type: cshtml and name it "DeleteMovies.cshtml". Replace the content of this page with some new heading. <h1>Delete an existing Movie in the database</h1> <p>Are you sure you want to delete the movie <srtong>@Movie.Name ?</ strong></p> 3. Next, we are going to add a Form using the <form> tag. <h1>Delete an existing Movie in the database</h1> <p>Are you sure you want to delete the movie <srtong>@Movie.Name ?</ strong></p> <form action="" method="post"> <input type="submit" value="Yes" /> <input type="button" value="No" onclick="window.location = 'dataMovies.cshtml' "/> </form> 4. Navigate back to the "dataMovies.cshtml" page. Add a hyperlink that points to the Delete page back to the database. <div id="movieslist"> <ol> @foreach( var row in data ){ <li> <a href="EditMovies.cshtml">@row.Name, @row.Category, @row.ReleaseYear</a> <a href="DeleteMovies.cshtml?id=@row.id">Delete</a> </li> } </ol> <a href="AddMovies.cshtml">Add a new movie</a> </div> 5. Navigate back to the "DeleteMovies.cshtml" page and add the following Razor code. @{ var id =Request["id"]; var SQLSELECT = "SELECT * FROM Favories where ID= @0"; var db = Database.Open("Movies");
var Movie = db.QuerySingle(SQLSELECT, id); var MovieName =Movie.Name; if(IsPost){ var sqlDELETE = "DELETE FROM Favories WHERE id=@0"; db.Execute(sqlDELETE,id); Response.Redirect("dataMovies.cshtml"); } } <h1>Delete am existing Movie in the database</h1> <p>Are you sure you want to delete the movie <srtong>@Movie.Name ?</ strong></p> <form action="" method="post"> <input type="submit" value="Yes" /> <input type="button" value="No" onclick="window.location = 'dataMovies.cshtml' "/> </form> 6. Next, run the web page, delete a movie from the database, and then click "Yes" to delete the movie. Otherwise click "No" to go back to view all the movies.

4 0RazorCusingWebMatrix

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

4 0RazorCusingWebMatrix

Diunggah oleh

Hak Cipta:

Format Tersedia

ASP.NET 4.

Author: Darel Johnson (c-bar) http://www.linkedin.com/in/dareljohnson Duluth, GA Date: 05/02/2012

ASP.NET 4.0, Razor C# Tutorial -page 1

ASP.NET 4.0, Razor C# Tutorial -page 2

ASP.NET 4.0, Razor C# Tutorial

ASP.NET - Creating a Website Using WebMatrix

ASP.NET - Changing the Visual Style of a Website

ASP.NET 4.0, Razor C# Tutorial -page 3

ASP.NET - Using the Layout Feature in WebMatrix

ASP.NET 4.0, Razor C# Tutorial -page 4

ASP.NET - Creating a Data Driven Dynamic Webpage in WebMatrix

ASP.NET 4.0, Razor C# Tutorial -page 5

ASP.NET 4.0, Razor C# Tutorial -page 6

ASP.NET - Create a Web Interface in WebMatrix to Allow Users to Add Data

ASP.NET 4.0, Razor C# Tutorial -page 7

ASP.NET - Create an Edit Data Page in WebMatrix

ASP.NET 4.0, Razor C# Tutorial -page 8

ASP.NET 4.0, Razor C# Tutorial -page 9

ASP.NET - Creating a Delete Data Page in WebMatrix

ASP.NET 4.0, Razor C# Tutorial -page 10

ASP.NET 4.0, Razor C# Tutorial -page 11

Anda mungkin juga menyukai