logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

使用WebMatrix编程

 milo2008 2014-07-04

使用WebMatrix编程

(2012-01-08 15:55:33)
标签：

杂谈

 分类： WebMatrix

面向服务器编程

面向服务器端进行程序设计是一件听上去有点儿麻烦的事情。WebMatrix设计的初衷就是降低在服务器端进行网站开发的难度的。客户端编程是在如手机、电脑桌面上的应用程序开发或者是面向浏览器开发的JavaScript编程。和面向服务器端编程开发的最大区别其实就在于应用程序代码不是在客户端的设备上来执行的。取而代之，终端用户的动作向服务器发出访问申请，如果申请的页面是一个动态页面，那么服务器运行这个页面中的代码并生成终端用户所需求的HTML代码然后下载到用户的浏览器上，浏览器再把这些代码渲染成用户所看见的页面。

一个页面编程示例

1、启动WebMatrix，欢迎界面上选择从模板创建网站，选择空白网站模板。

3-1

2、进入文件工作区。尽管选择的是空白网站模板，但是WebMatrix还是创建了一个叫做robots.txt的文件。选择文件右键可以删除它。但是我们没必要删除它——它是非常有用的文件。

3、添加新建按钮来添加文件。对话框中HTML类型的文件，命名为index.html。

3-3

4、点击确定，WebMatrix将创建好这个index.html页面，并包含如下代码：

_3-3

这个HTML是非常基本的内容。

5、添加页面标题，修改为如下内容的代码：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>我的第一个WebMatrix页面</title>
    </head>
    <body>
       
    </body>
</html>

浏览器的标题中将会看到这句内容。

6、在功能区中点击运行按钮。会得到如下相似页面：

3-4

注意到在浏览器的标题上可以看到这句话了。由于<body>中没有内容所以页面还是空白的。

7、在<body>标签中添加一些代码以增加页面上的内容：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>我的第一个WebMatrix页面</title>
    </head>
    <body>
        <h1>嗨，我正在使用WebMatrix来写HTML！</h1>
        <p>但是我正在学习使用它。</p>
        <h2>今天的日期</h2>
        <p>今天是2012年1月8日</p>
    </body>
</html>

8、再次运行这个页面，会得到如下页面：

3-5

现在服务器只是简单的把HTML代码发送到了浏览器上，由浏览器来渲染代码。在浏览器中右键菜单，查看源代码，会发现如下内容：

3-6

制作一个动态的页面

1、新建一个CSHTML文件，命名timedate.cshtml。

2、编辑这个页面的HTML代码内容如上面的HTML一般。

3、修改代码如下：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>我的第一个WebMatrix页面</title>
    </head>
    <body>
        <h1>嗨，我正在使用WebMatrix来写HTML！</h1>
        <p>但是我正在学习使用它。</p>
        <h2>今天的日期是 @DateTime.Now.ToLongDateString()</h2>
        <p>现在的时间是 @DateTime.Now.ToShortTimeString()</p>
    </body>
</html>

这里使用了Razor语法,为了区别服务器的动态和静态语法Razor要使用@符号来告知服务器这个@符号后面是需要服务器解释执行的动态代码。

4、运行这个页面会发现日期和时间都是当前的计算机日期和时间。

3-8

提交数据

1、添加一个CSHTML动态页面。

2、设置如下的HTML代码：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <p>First Num:<input type="text" name="fNum"/></p>
        <p>Second Num:<input type="text" name="sNum"/></p>
        <p><input type="submit" value="Add up"/></p>
    </body>
</html>

3、如果要提交数据，必须使用<form>标签。现在需要在点击按钮后执行一些列的操作，需要利用服务器代码了：

@{
    var sum = 0;
    var sumText = "";
    var num1 = "";
    var num2 = "";
    if(IsPost){
        num1 = Request["fNum"];
        num2 = Request["sNum"];
        sum = num1.AsInt() + num2.AsInt();
        sumText = "运算结果是：" + sum;
    }
}


<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form method="post">
            <p>First Num:<input type="text" name="fNum"/></p>
            <p>Second Num:<input type="text" name="sNum"/></p>
            <p><input type="submit" value="Add up"/></p>
        </form>
        <p>@sumText</p>
    </body>
</html>

4、以@符号开始加载一对{}之间的代码块是完整的一块代码区。代码非常简单。值得注意的是if(IsPost)这句，这表示如果页面是提交过来的页面则执行以下代码，而如果是直接访问的页面则不会直接执行这段代码了。

输入3和7后点击按钮后会得到如下页面的：

3-9

5、现在看到问题了，结果有了并且正确但是没有保存住之前输入的两个数，这样的界面会让你感到迷惑，我们做如下修改：

<p>First Num:<input type="text" name="fNum" value="@num1"/></p>
<p>Second Num:<input type="text" name="sNum" value="@num2"/></p>
6、这样再执行页面上的点击按钮后页面得到如下样子：

3-10

在这里我们看到了@{}代码中的那些变量在HTML

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： milo2008 > 《webmatrix》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多