Introduction to "webmatrix"

[Original article] introducing webmatrix

[Original article posting date], PM

 

Last week I published several blogs about the new web development technologies we are about to publish:

• IIS developer experience edition: This is a lightweight and free Web server. It is easy to install and supports all Windows versions and is fully compatible with IIS 7.5 servers.
• SQL Server Lite version: a file-based lightweight free database that is easy to install and can be integrated into ASP. NET applications.ProgramSupports low-cost host environments and allows you to selectively migrate databases to SQL Server.
• ASP. NET "Razor": A new ASP. NET view engine.CodeThe preceding template syntax makes it easy to embed VB or C # in HTML #. It features simple syntax and is easy to learn and write, and can be used in any text editor.

Last week'sArticleI mentioned how to make full use of these technologies in professional web development tools such as Visual Studio 2010 and Visual Web Developer 2010 Express, and how these technologies make existing ASP. net web forms and ASP. net MVC has a better development workflow.

Now we will also release a new lightweight web development tool that integrates the above technologies, making it easier for people to use ASP. NET for web development. This is a free tool that provides core code and database support, integrates an open source web application library, and facilitates the deployment of sites and applications to web host service provider virtual hosts.

We call this new tool webmatrix. Its first beta version can now be downloaded here.

What is webmatrix?

The download size of webmatrix is only 15 MB (if. net4 is not installed, it is 50 MB) and the installation is quick.

This 15 MB download includes a lightweight development tool, IIS Express, SQL compact edition, and a group of independent ASP files that can be written using the new razor syntax. ASP. NET page.. Net extension, as well as a series of easy-to-use databases and HTML aids that execute common Web tasks. Webmatrix can be installed on the same machine as Visual Studio 2010 and Visual Web Developer 2010 Express.

Note: In the first beta version of webmatrix, Asp.. Net MVC application's razor support is not included-Asp. the. net mvc preview will include it, and also include Visual Studio tool support.

Getting started with webmatrix

Webmatrix is a task-oriented tool designed to simplify web development. It minimizes the amount of knowledge that people need to learn to do simple things and includes and integrates the components required to quickly build a web site.

Shows the launch page when running webmatrix. Use the three icons on the right to create a new web site: You can use the existing open-source applications of the Web application library, or use a site template that contains some tabs, and use an empty folder on the disk.

The Chinese version has not yet been released.

Create a site based on existing open-source applications in the Web Library

Create a new web site. Use the Web library and make full use of the work done by others, instead of writing the entire site by yourself.

We start by clicking the "site from Web Gallery" link on the main webmatrix window. This will start the user interface, for example, browsing popular open source applications in the Web library, we can easily start from these programs, make some fine-tuning and personalization, and then use webmatrix for deployment. The Web library contains both ASP. NET and PHP applications.

By category (blog [I], CMS, ecommerce ...) Filter, or simply use the scroll bar to browse the entire list. Let's first create a blog site and write it based on the popular open-source project blogengine. net.

When we select blogengine. NET and click "Next", webmatrix will identify (and provide download) the components required to be installed on the local development machine for running blogengine. net.

IIS Express is already included in webmatrix, so I already have a web server (and I don't have to do anything to configure it ). SQL compact edition is also included in webmatrix, so it also has a lightweight database (and does not have to do anything to configure it ). Because SQL compact is brand new and most projects in the Web library do not support it yet, we expect most projects to use it as an option in the future. If a project requires SQL express or MySQL as a database, but you have not installed it yet, it will be displayed in the dependency list, And webmatrix will provide you with automatic download, installation, and configuration.

PHP applications in the Web Library (such as WordPress, Drupal, joomla and sugarcrm-all of these) will download and install PHP and MySQL.

Because SQL Express has been installed on my machine, there is only one blogengine. Net in my download list:

 

After you click "I accept", webmatrix downloads all the things we need and installs them on the machine:

After you click "OK", webmatrix will open a new blogengine. Net project and display a site overview page:

This view of webmatrix provides a project overview and quick links to some common tasks (we will see more later ).

To start, click the "run" button on the ribbon toolbar. Click the "run" button to start the site using the system's default browser. Alternatively, you can click the expanded list to select any installed browser to run your site. Click "open in all browsers" to start multiple browsers At A Time:

Because IIS Express is part of webmatrix, when a project is opened, webmatrix automatically configures IIS express to run it (no additional steps or configuration work ).

Running blogengine. NET will start a browser and load the default page of the application (as shown below ). By default, blogengine. Net has a home page, which provides instructions on how to personalize the site:

If you read the content, you will find that the default administrator password is "admin"/"admin". You can log on to the site and customize the site's viewing and content methods. Let's log on and use online management tools to personalize the Basic settings of some sites (name, author introduction, etc.), and release two logs to start the site:

The beauty is that I can build and run our site in a short time without writing any code (or reading any code. All other applications in the Web library have the same experience. They are all designed to allow you to quickly install and run locally using webmatrix, and then fine-tune and personalize their core content and structure using their built-in management tools.

Further code and content personalization

We have configured the Basic settings for the blog site. Now let's see how to further personalize it. To do this, let's go back to webmatrix and click the "Files" node on the left of the tool navigation bar:

This will open a file system resource manager view on the left, allowing us to browse the site and open/edit/Add/delete files.

Most applications in the Web library support the "theme" concept, allowing developers to fine-tune and personalize the layout, style, and user interface of applications. In, I have expanded the "theme" folder of blogengine. NET and opened the site. master file to personalize the main layout of the "standard" theme. We can fine-tune and personalize it, save it, and run the site again to view our changes. (Note: F12 is the shortcut key for re-running the program ).

Deploy the site to the host

Webmatrix provides a lightweight integrated working environment that allows you to run and fine-tune your site locally. After completing personalized operations, we also added some default content to the database. We want to publish it to a host provider so that other people can access our blog.

Webmatrix has built-in publishing support, making it easy to deploy web sites and web applications to a remote host. Webmatrix supports the use of FTP, FTP/SSL, and Microsoft Web deployment (that is, msdeploy) technology to facilitate the deployment of sites to low-cost shared host providers and Virtual Private host providers.

To publish a website in webmatrix, expand the "publish" icon on the ribbon toolbar:

Select the "Configure" option to open the following user interface, allowing us to configure the location of the site to be deployed:

If you do not have a host provider, you can click the "Find web hosting" link at the top of the release dialog box to open a list of available host providers:

The Windows hosting plan currently provided by the host provider includes ASP. net + SQL Server, as low as $3.5 per month (and these cheap packages also include ASP. net 4, Asp. net MVC 2, Web deployment, URL rewriting, and other features ).

This week's "find web hosting" includes some host providers that provide free accounts for webmatrix, allowing you to try it out for free. (They also install all the webmatrix components on the server side, and use the webmatrix deployment tool to test their package ).

Once you have registered a host provider, you can choose one of the many methods to publish your site.

FTP and FTP/SSL allow you to easily publish local files on the site to a remote server.

The "Web deploy" option can publish site files and database content-if your host supports it, this is a recommended option for deployment. When the "Web deploy" option is selected, if you need to deploy the database, webmatrix will list all the local databases in your project, it also provides an option for you to specify the database connection string required on the remote host.

Note:By defaultBlogengine. net uses XML files to store content and settings (no database is required), and blogengine. net in the Web LibraryYou only need to enter"Data Source = empty; database = empty; uid = empty; Pwd = empty"As a remote database connection string, you do not need to create a database to publish the site.

When you click "publish", webmatrix will display a preview interface for changes made during deployment:

Note: BecauseBlogengine. netNo database is required. We need to leave the database deployment check box unselected. If we do want to upload a database, we can select it on the release preview page, so that webmatrix will automatically upload site files and database architecture + data to the remote host. Deploy the database to the host server. Then update the web. config connection string you published to point to the product location.

Once you click "continue", webmatrix will start the site publishing process. After that, our site can be accessed over the Internet without any additional steps.

Update site

In addition to initial deployment, webmatrix also supports subsequent incremental file updates. Update the local file and click "publish". webmatrix calculates the differences between the local site and the published site, upload only updated files (note that the database will not be redeployed by default to avoid Overwriting data on the remote host ):

The "continue" button only uploads modified files. This makes it easy to update a large site.

Use code to create a personalized Web Site

I have already discussed how to create a new web site using open-source applications in the Web library. Now let's take a look at what else webmatrix can do to develop a personalized website.

The two icons on the rightmost side of the webmatrix home page provide a simple way to create a new site-either based on a simple template page or an empty site without content:

Click the "site from template" icon to create a template-based new site. Then select the "empty site" template and name the site we want to create as "firstsite ":

After you click "OK", webmatrix loads a site for us and displays a site overview page containing links to common tasks:

Click the "Files" icon on the left navigation bar or the "browse your files" link on the overview screen in the middle. If you select any option, the file resource manager is displayed. The "empty site" template actually has a file named index. cshtml by default. You can double-click it to open it in the webmatrix text editor.

Files suffixed with. cshtml or. vbhtml are files that use the new "Razor" template syntax mentioned in the blog last week. You can use the razor file as a View File for ASP. net mvc-based applications, or as a separate page for ASP. NET web sites. We call these pages "ASP. net web page "-you can add them to a new project, or you can choose to add them to an existing ASP. net web forms and ASP.. Net MVC application.

Why ASP. NET Webpage?

Using razor to write ASP. NET web pages provides a simple and simple way to develop websites. Many may argue that, as an application based on ASP. NET web forms or ASP. net mvc, they are not powerful and do not have many functions. Indeed, they do not have many functions and rich programming models.

However, the concept is easy to understand and get started with. For many people, it provides the simplest way to understand the basic knowledge of. net, VB, or C # development and learn programming. If you only need some basic server scripts and data display and operations, and want to quickly create a website, it is also very convenient.

Create our first simple ASP. NET Webpage

Let's create a simple page that lists the content stored in the database.

If you have been working for a few years. NET development professional programmers, after reading the following steps, are likely to want to understand such scenarios is too basic-to build a "real" application, just understand these steps is far from enough. Why not encapsulate business logic, data access layer, orms, and so on? Well, if you are building an important commercial application and want to be easy to maintain in the next few years, you should consider the above technologies.

 

Imagine if you are trying to teach your friends or children to build their first simple application, and they are just getting started with programming, variables, if statements, loop and outdated HTML are things they need to master. Classes and objects are concepts they have never heard. Helps them build and run applications faster in this case (they do not need to master many new concepts and steps ), it will make it easier for them to succeed-and then guide them to learn more.

 

We are trying to use webmatrix to help beginners who are intimidated by the previous steps and are struggling to start learning. Finally, we will become an advanced VS/. Net developer.

 

Let's start by adding HTML to our page. ASP. NET web pages generally start with HTML files. In this example, we only add a static list to the page:

 

As in the previous scenario, to run the project we are editing, IIS Express has been automatically configured-we do not need to configure the website server or install anything to run our website.

You can press "F12" or "run" on the ribbon toolbar to start it in the browser. As expected, this will generate a simple static page for our movie list:

 

 

Process Data

So far it has been quite basic. Let's use database transfer to convert this page, and make the movie list dynamically present instead of static.

Create a database

First, click the "Database" tab in the left-side navigation bar of webmatrix. This will pop up a simple database Editor:

 

The SQL Server Lite version is included in webmatrix-it is always available in projects. Because it can be embedded in an application, so it is easy to copy and the application is in the remote host environment (no additional deployment or installation steps are required-you only need to deploy the database file through FTP or network ).

Note: Apart from supporting SQL ce, the following webmatrix database tools are also applicable to SQL Express, SQL Server, and MySQL.

 

You can click the "add a database to your site" Link (or click the "New Database" icon in the middle of the screen or above ribbon) to create a new SQL ce database. This will add a "firstsite. SDF" database file in the app_data directory of our application.

 

 

Then we can click the "new table" icon on ribbon to create a new table to store our movie data. Then, use the "new column" button in ribbon to add three columns-ID, name, and age.

Note: In the first beta version, you must use the attribute grid editor at the bottom of the screen to configure columns. The richer database editing feature will appear in the next beta version.

We set the "is primary key" attribute to true to set the ID as the primary key.

 

Click "save" and name the table "Movies ". After that, it will be displayed under the table node on the left side.

Click the "data" icon of ribbon to edit the data in the created table and add several rows of data.

 

Now we have a database, a table, and some movie data.

Use our database in ASP. NET web pages

 

ASP. NET web pages can use any. Net API or Vb/C # language. This means that you can use the complete. net function on any website or application. Webmatrix also includes some additional. Net libraries and helper programs for you to complete some common tasks.

A helper function is a simple database API that allows you to write SQL code for the database. Let's query the movies data table on the webpage and display all movies included. To do this, go back to the files tab of webmatrix and add the following code to the index. cshtml file.

 

As you can see, the page concept is quite simple (and you don't need to understand any profound object-oriented concepts ). We have two lines of code at the top of the file.

The first line of code opens the database. Database. open () is first viewed on the web. in the config file, is there a connection string named "firstsite"? If yes, connect to and use this database (Note: Currently we do not have any web. config file ). In addition, it searches for an SQL express database named "firstsite. MDF" or an SQL compact database named "firstsite. SDF" in the \ app_data folder. If either of them is found, the file is opened. The second line of code queries the database and loads all movies. Database. Query () returns a dynamic list-each dynamic object in the list is returned Based on the SQL query conditions.

Then, we perform a foreach loop in the <ul> element, which can traverse the movie list and output the name of each video as the <li> element. Because movies is a collection of dynamic objects, we can write @ movie. name without having to write movies ["name"].

When we re-run this page (or refresh it in a browser) and view the HTML code returned to the client, we can see the following:

 

The above video list is proposed from our database and is dynamic.

Add a simple Filter

The last step we can make the application more dynamic is to filter the movie List by adding simple support based on the string parameters transmitted by the page parameters (query string.

We can add some code to the index. cshtml file to implement this function:

 

We have added a line of code to obtain the "year" Page parameter from the request object. Use a new "aslnt ()" extension helper function provided by webmatrix. This function either returns an integer or a null value. Then, we introduce a where parameter as a variable to modify our SELECT query statement. This syntax prevents SQL injection attacks.

Finally, we add an if statement in Post1975) to

 

At the same time, we can use a "year" Page parameter to show only the films after this year.

 

Other useful webpage auxiliary functions

In the previous simple video List Example, I used the database auxiliary function library attached to webmatrix.

Webmatrix also comes with other useful web auxiliary functions. We not only support these functions in ASP. NET web pages-they are also supported in ASP. net mvc and ASP. NET web forms applications. For example, to embed an online Twitter search panel in an application, you can write the following code to search Weibo ):

 

This will display a Twitter Weibo list for "scottgu.

 

Other built-in auxiliary functions, including functions that integrate Facebook and Google Analytics, and functions that create and integrate CAPTCHA and gravatars, execute server-side Dynamic Charts (using the new built-in ASP.. Net 4.

All these auxiliary functions can be used not only in ASP. NET web pages, but also in ASP. NET web forms and ASP. net mvc programs.

Easy deployment

Once we personalize the site, we can deploy it like blogengine. net. All we need to do is click the "publish" button in webmatrix and select a host vendor, so that our simple application will be published to the Internet.

 

Open

Projects created using webmatrix can also be opened in Visual Studio 2010 and Visual Web Developer 2010 (free of charge). These tools provide a richer function for web development, the work environment is more focused on professional development. The webmatrix project can be opened in Visual Studio by clicking the "Visual Studio" icon in the upper-right corner of the ribbon toolbar.

 

This will start vs2010 or visual web developer 2010 express and open and edit the website in the current wexmatrix. In the future, we will release a patch for vs 2010/vWD 2010 to support IIS Express, SQL ce, and the new razor syntax.

Further study

Click here to learn more about webmatrix. An earlier version of webmatrix beta can be downloaded here.

You can visit www.asp.net to view online tutorials and videos about webmatrix. Today's beta version is the first preview of this technology. In the coming weeks, we will gradually improve the documentation and sample programs. Of course, we will also improve its functionality based on your feedback.

Summary

IIS Express, SQL ce, and the new ASP. NET "Razor" syntax bring a lot of functional improvements to developers who use Visual Studio, ASP. NET web forms, and ASP. NET MVC.

We believe that webmatrix will be able to take advantage of these technologies to simplify web development, which is very useful in non-professional development fields-and allow more developers to learn and integrate ASP. net to be applied in a wider range of fields.

I hope this will help you.

Scott