Getting Started with WebMatrix - Part-2 WebMatrix Create Website from Template

Web hosting Forums and discussions

Forums for Web hosting discussions: If you have any queries or questions related to web hosting services, place them here and get answered by our experts and customers. We invite you to even participate and provide solutions or answers that are known to any queries placed in this forums. We will get answer for all the queries and questions raised here.

Getting Started with WebMatrix - Part-2 WebMatrix Create Website from Template

0
This article will take a first look at using WebMatrix Application - Microsoft's WebMatrix IDE for developing Web Pages applications. I will walk you through number of the core features that will make WebMatrix an ideal starter's web development framework.

Creating your Website using WebMatrix

http://www.hostasp.net/articles/images/webmatrix/webmatrix-creating-site-from-template_03.png

Choose the Site From Template option, and you’ll see the the dialog below. Note that you may see a number of different templates, as WebMatrix is growing all the time. The one we are interested in is the Empty Site template, we will start building website from here. Select this template and give it the name MoviesDB.

http://www.hostasp.net/articles/images/webmatrix/webmatrix-site-from-template-is-created_02.png

Understanding WebMatrix IDE At the top, you see a Quick Access Toolbar and a Context menu / ribbon, as in Microsoft Office 2010. At the bottom left, you see the workspace selector, which contains buttons that determine what appears above them in the left pane. On the right is the content pane, which is where you view reports, edit files, and so on. Finally, across the bottom is the notification bar, which displays messages as needed.

Coming back to our session, Website MoviesDB is now been created and is started by WebMatrix. From this screen above, you can manage files within the application, databases and perform site analysis on Reports Workspace.

It is a database driven website that we are going to build now, so let us create a Database by clicking on Manage databases option. This will lead to screen below for database creation,

http://www.hostasp.net/articles/images/webmatrix/websitepanel-add-databases_03.png

Click on 'Add a database to your site' will create a database and place DB file under APP_DATA folder. This folder is created by default at the time of Website creation. Name of database is your website name by default, this can be changed right clicking DB listed on left panel.

http://www.hostasp.net/articles/images/webmatrix/webmatrix-add-table-definition_02.png

Workspace above is for managing Database schemas. You can create Tables, and then define schemas – create columns, delete columns, create relationship between tables, add constraints, perform data operations, create indexes and more. - all these are just simply from your WebMatrix IDE working on SQL Server Compact. DDL or DML operations managed through selecting appropriate Table view - Definition / Data view. Now let us create all required columns for Table 'Movies'. To create new columns click on 'New column' link that is enabled on context menu. Create columns such as Title, Release date, Director and so on.

http://www.hostasp.net/articles/images/webmatrix/webmatrix-tableschema-definition_02.png

We just created a table called 'Movies' with all required columns for displaying data on our website. We will now proceed with data entry on this table, followed by retrieving this data and displaying the same on Web pages. If you would need to further normalize data then create few more tables split the data by normalizing them and then establish relationship between tables. You could see the context menu "Relationships" enabled on Workspace menu which will be used for relationship management.

To enter data to the table click on 'Data' of Table views on context menu. This will open table that you had selected in data entry mode. Find list of movies information that i had entered on Movies table.

http://www.hostasp.net/articles/images/webmatrix/webmatrix-table-dataentry_03.png

We assume that you have created the default page if you have not then follow here Create a Web Page

Let us now see how to use Razor Syntax to query the database and show the data on Web page. This is the new Razor syntax. The @ sign followed by a pair of braces denotes a multi-line code block, and could be thought of as equivalent to a non-code behind script runat="server" block. We are now going to test reading from the database, so let us add some code to do that:


 var db = Database.Open("MoviesDB");
 var sql = "Select Title from Movies";


WebMatrix.Data.Database is Database class libary which provides an easy set of methods for working with databases. One of the methods - "Open" sets up a connection and opens connection to the database name passed as parameter input to the method. Next line of code you will see simple SQL query. We will add some more code to the body of the page for simple display from Database MoviesDB:

Movies Databases


    
        
        Movies Databases
    
    
        @foreach( var row in db.Query(sql))  
        {
            @row.Title

        }
    



Database.Query() is a method that returns an IEnumerable. The SQL is executed against the database, and the rows of data returned are converted into a collection of objects, with the database field names exposed as properties of those objects. foreach is preceded with an @ sign, but no braces. This is because there is only a single line of code. The literal text and html markup in the second line is not considered part of the code block, but it is recognised by the Razor parser as belonging to the each iteration of the loop, and the closing brace confirms that. Inline expressions or variables are also preceded by the @ sign, as in @row.Title. The Razor parser will recognise these and replace them appropriately.

We can see the result of this operation by clicking Launch in the menu, or simply hitting F12: Please find below the dynamic output of data from Database and how WebMatrix had made it so simple for Web application programming.

http://www.hostasp.net/articles/images/webmatrix/webmatrix-moviesapp-browserexecution_03.png

We will then discuss in detail about Web programming using Razor Syntax and about publishing websites to remote server - we will see how to use web deploy method to publish websites to HostASP Web hosting accounts from your development environment.

Read more about - check related reference below
Technical specialist HostASP
  • There is no reply for this discussion yet
Your Response
Please login first in order for you to submit comments