Post
Ask Question

Introduction To Programming in ASP.Net Web Pages 2

Introduction

We have done the basic concepts of creating a sample page in Web Pages 2 in  Getting Started With ASP.NET Web Pages 2. This article explains the concepts of how to do the programming in Web Pages. We'll perform the Razor syntax and C# language code.

So, let's proceed with the following sections:

  • Working with a Website
  • Programming Concepts

Working with a Website

Since we have created a website, we'll perform here in that site. Use the following procedure to do that.

Step 1: Open the WebMatrix

Step 2: Open the site by clicking on "My Sites"

Open WebSite

Step 3: Create a new CSHTML page named as SamplePage

Step 4: Modify your code with the code below:

@{
   var no1= 10;
   var no2=20;
   var no3=no1 * no2; 
   var platform= "Microsoft WebMatrix 3";
   var page = "Sample";
   var url= Request.Url;
}
<!DOCTYPE html>
<html lang="en">
    <head>
    <title>Sample Page with Programming</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Programming in Sample Page</h1>
  <form method="post">
    <div>
      <p>The First number <em>No1</em> is @no1 and Second number <em>No2</em> is @no2 is:
      <p>The Multiply of <em>No1</em> and <em>No2</em> is <strong>@no3</strong>.</p>
    </div>
    <div>
      <p>The platform is @platform, and the page is @page.</p></div>
    <div>
      <p>The Current Page URL is<br/><br/><code>@url</code></p>
    </div>
  </form>
</body>
</html>

You are already familiar with most of the code above but some of the code block is explained below:

  • The @ characters tells ASP.NET to follow the Razor code not the HTML code.
  • The braces ({ and }) is used to enclose the code, if the code exists in more than one line.
  • The var keyword is used to define the variable to store the value.

Step 5: Now launch the site in the browser.

Site Viewing in Browser

Programming Concepts

You can see that we can apply Razor code to show the values with some basic programming. Now we'll perform some conditional statements. Use the following procedure to do that.

Step 1: Create another CSHTML page named ProgrammingPage

Step 2: Replace the code with the code below:

@{
    var a= 10;
    var Result="";
    if(a%2==0)
    {
       Result="Even";
    }
    else
    {
       Result="Odd";
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
       <title>Sample Page with Programming</title>
        <meta charset="utf-8" />
        <style>
          body {font-family:Verdana; margin-left:50px; margin-top:50px;}
          div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
         span.bright {color:red;}
        </style>
    </head>
    <body>
        <form method="post">
          <div>
         <p>The Value of <em>A</em> is: @a</p>
         <p><input type="submit" value="Even/Odd" />
             @if(IsPost)
             {
                 @Result                 
             }
         </p> 
        </div>
        </form>
    </body>
</html>

In the code above the condition is if(IsPost) and this returns the current page. When the page loads the first time, it returns false and after clickiing a button or submiting the page, it returns true. So IsPost lets you determine whether you're dealing with a form submission.

Step 3: Now after saving the file, launch it in the browser.

Programming in WebMatrix

Summary

In this article, you learned the programming concepts for the WebMatrix and you can also perform the Razor syntax in the site. In the next article we create the database and integrate it with the site. Thanks for reading.


Similar Articles