创建数据库

1、使用空网站模板创建一个站点程序。

2、在数据库工作区中点击新数据库。

3、WebMatrix使用站点的名称来默认创建了一个.sdf文件的数据库。此时数据库中还没有任何的东西。我们来新建一张表格，点击 新表 按钮。

新建表列是非常容易的，使用 新列 即可。

4、新建第一列命名id，分别指定此列为 标识 和 主键。

指定标识意味着这列数据会自动使用唯一的标号来填充数据记录，数据库默认每记录自增1，以0为起始，所以第一条记录分配的值是1，第二条分配2，以此类推。

5、接下来继续添加，姓名（name）、网名（nickname）、住址（address）三列。

6、点击保存，表名存储为contacts即可。

7、双击这张表，可以浏览表的内容，但是没有任何数据库。看到这张像电子表格一样的界面你立刻会意识到它支持直接的编辑。

8、在id列中不用键入任何信息，它会自动填充，你可以去填写其他的内容项。如果没有些人内容的表格自动呈现NULL的内容，表明数据格内没有数据。

由上面可见在WebMatrix中创建数据库并利用继承界面来填充数据是多么的容易。

在代码中使用数据库

最标准的使用数据库的方式就是利用SQL查询。WebMatrix也是支持查询的：

1、我们利用CSHTML来渲染一个从数据库获得数据的页面。代码如下：

@{
    Layout = "~/_Layout.cshtml";
    Page.Title = "数据库操作";
    var db = Database.Open("Demo");
    var query = "SELECT name FROM Contacts";
}
@foreach (var item in db.Query(query)){
    <p><span>@item.name</span></p>
}

2、运行后，页面大致如下，因为我们的_Layout.cshtml中的内容可能会有不同：

向数据库中添加数据

1、向页面中添加HTML表单元素：

<form method="post">
    <p>姓名</p>
    <input type="text" name="name" />
    <p>昵称</p>
    <input type="text" name="nickname" />
    <p>地址</p>
    <input type="text" name="address" />
    <input type="submit" value="提交" />
</form>

2、然后添加动态代码：

@{

var name = Request["name"];
var nickname = Request["nickname"];
var address = Request["address"];

}

3、因为采用了Post的提交方式所以我们加上If(IsPost){}来处理Post过来的页面响应。

4、利用SQL中的INSERT命令来向数据库中添加新的记录：

INSERT INTO Contacts(name, nickname, address) VALUES('老任', '考拉叔叔', '音乐学院美女集中营')

而我们在代码中可以采用“占位符”来替代具体要赋值的内容，大致如下：

INSERT INTO Contacts(name, nickname, address) VALUES(@0, @1, @2)

@0代表第一个参数，@1代表第二个，@2代表第三个。

所以我们来看看代码中是如何来设置的：

if(IsPost){
    var insertQ = "INSERT INTO Contacts(name, nickname, address) VALUES(@0, @1, @2)";
    db.Execute(insertQ, name, nickname, address);
}
5、执行页面看到效果大体如下：

6、提交后的页面结果：

哦，我们发现已经在数据库中添加好了一条记录。而这条记录恰恰是从我的网页上发出的。

编辑数据

上面我们已经添加了一条记录，如果更新一条已经存在的记录呢？

我要确定下一条要编辑的数据记录，然后告诉数据库我们要编辑它，然后让数据库知道我们要编辑的记录最好给它一个明确的信息，一般我们采用告知数据库主键的形式来确定！这里就是id这个列！

1、在之前的查询代码上我们只把姓名显示出来了：

var query = "SELECT name FROM Contacts";

现在我们需要把主键的值也检索出来，修改如下：

var query = "SELECT id, name FROM Contacts";

2、更新HTML代码如下：

@foreach (var item in db.Query(query)){
    <p><span>@item.name</span><a href="edit.cshtml?id=@item.id">编辑</a></p>
}

刷新浏览器会得到如下的结果：

查看一下源代码大致如下：

<p><span>孟祥元</span><a href="edit.cshtml?id=1">编辑</a></p>
<p><span>顾颉刚</span><a href="edit.cshtml?id=2">编辑</a></p>
<p><span>陈晨</span><a href="edit.cshtml?id=3">编辑</a></p>
<p><span>老任</span><a href="edit.cshtml?id=4">编辑</a></p>

3、现在我们开始来做这个编辑页面，创建一个edit.cshtml。

4、我们也在页面上添加好姓名、昵称、地址这些HTML信息：

<div id="edititem">
    <form method="post">
    <p>姓名</p>
        <input type="text" name="name" />
        <p>昵称</p>
        <input type="text" name="nickname" />
        <p>地址</p>
        <input type="text" name="address" />
        <input type="submit" value="提交" />       
    </form>
</div>

5、然后需要在服务端代码中制作好取得对应id记录的方法：

@{
    Layout = "~/_Layout.cshtml";
    var id = Request["id"];
    var query = "";
    var db = Database.Open("Demo");
    var name = "";
    var nickname = "";
    var address = "";
   
    if(id.IsEmpty()){
        Response.Redirect("data.cshtml");
    }
    else{
        query = "SELECT * FROM Contacts WHERE id = @0";
        var item = db.QuerySingle(query, id);
        name = item.name.Trim();
        nickname = item.nickname.Trim();
        address = item.address.Trim();
    }
}
<div id="edititem">
    <form method="post">
    <p>姓名</p>
        <input type="text" name="name" value="@name" />
        <p>昵称</p>
        <input type="text" name="nickname" value="@nickname" />
        <p>地址</p>
        <input type="text" name="address" value="@address" />
        <input type="submit" value="保存" />       
    </form>
</div>

以上代码返回一个从URL的id参数返回的SQL查询结果，使用QuerySingle方法可以查询一个单一的记录。通过Trim方法可以将结果的前后空格去掉。

6、保存页面，浏览列表也，点击编辑链接，将会转到如下页面：

我们得到了如上的页面，正好是根据我们提供的id内容返回的所有数据。

7、目前还没有办法做保存更新功能，接下来的事情会像之前做提交新数据一样的简单，如此我们可以彻底完成edit.cshtml代码：

@{
    Layout = "~/_Layout.cshtml";
    var id = Request["id"];
    var query = "";
    var db = Database.Open("Demo");
    var name = "";
    var nickname = "";
    var address = "";
   
    if(id.IsEmpty()){
        Response.Redirect("data.cshtml");
    }
    else{
        query = "SELECT * FROM Contacts WHERE id = @0";
        var item = db.QuerySingle(query, id);
        name = item.name.Trim();
        nickname = item.nickname.Trim();
        address = item.address.Trim();
    }
   
    if(IsPost){
        name = Request["name"];
        nickname = Request["nickname"];
        address = Request["address"];
        var updateQ = "UPDATE Contacts SET name = @0, nickname = @1, address = @2 WHERE id = @3";
        db.Execute(updateQ, name, nickname, address, id);
        Response.Redirect("~/data.cshtml");
    }
}
<div id="edititem">
    <form method="post">
    <p>姓名</p>
        <input type="text" name="name" value="@name" />
        <p>昵称</p>
        <input type="text" name="nickname" value="@nickname" />
        <p>地址</p>
        <input type="text" name="address" value="@address" />
        <input type="submit" value="保存" />       
    </form>
</div>

8、在页面上做一些改动，然后执行保存：

9、点击保存按钮我们会发现这些变化在data.cshtml：

删除数据记录

1、正如编辑页面上的链接一样，我们需要做一个删除页面，将链接添加进去：

@foreach (var item in db.Query(query)){
    <p><span>@item.name</span><a href="edit.cshtml?id=@item.id">编辑</a><a href="delete.cshtml?id=@item.id">删除</a></p>
}
2、运行这个页面：

3、添加一个命名为delete.cshtml的页面，HTML代码如下：

<div id="delete">
    <form method="post">
        <p>确定删除如下内容么？</p>
        <p>姓名</p>
        <input type="text" name="name" />
        <p>昵称</p>
        <input type="text" name="nickname" />
        <p>地址</p>
        <input type="text" name="address" />
        <input type="checkbox" name="delete" value="confirm"/>我确定要删除这条记录。
        <input type="submit" value="提交" />
    </form>
</div>

4、添加好服务器代码如下：

@{
    Layout = "~/_Layout.cshtml";
    var id = Request["id"];
    var query = "";
    var db = Database.Open("Demo");
    var name = "";
    var nickname = "";
    var address = "";
    if(id.IsEmpty()){
        Response.Redirect("data.cshtml");
    }
    else{
        query = "SELECT * FROM Contacts WHERE id = @0";
        var item = db.QuerySingle(query, id);
        name = item.name.Trim();
        nickname = item.nickname.Trim();
        address = item.address.Trim();
    }
    if(IsPost){
        var confirm = Request["delete"];
        if(confirm == "confirm"){
            var deleteQ = "DELETE FROM Contacts WHERE id = @0";
            db.Execute(deleteQ, id);
        }
        Response.Redirect(@Href("~/data.cshtml"));
    }
}
<div id="delete">
    <form method="post">
        <p>确定删除如下内容么？</p>
        <p>姓名:@name</p>
        <p>昵称:@nickname</p>
        <p>地址:@address</p>
        <input type="checkbox" name="delete" value="confirm"/>我确定要删除这条记录。
        <input type="submit" value="提交" />
    </form>
</div>

7、运行页面：

至此，删除的操作也完成了！