创建数据库

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

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

7-1

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

7-2

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

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

7-3

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

5、接下来继续添加,姓名(name)、网名(nickname)、住址(address)三列。

7-4

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

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

7-5

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

7-6

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

在代码中使用数据库

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

7-7

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中的内容可能会有不同:

7-8

向数据库中添加数据

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、执行页面看到效果大体如下:

7-9

6、提交后的页面结果:

7-10

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

编辑数据

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

我要确定下一条要编辑的数据记录,然后告诉数据库我们要编辑它,然后让数据库知道我们要编辑的记录最好给它一个明确的信息,一般我们采用告知数据库主键的形式来确定!这里就是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>
}

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

7-11

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

<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、保存页面,浏览列表也,点击编辑链接,将会转到如下页面:

7-12

我们得到了如上的页面,正好是根据我们提供的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、在页面上做一些改动,然后执行保存:

7-13

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

7-14

删除数据记录

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、运行这个页面:

7-15

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、运行页面:

7-16

至此,删除的操作也完成了!

posted on 2012-01-09 23:19  雪美·考拉  阅读(2331)  评论(1编辑  收藏  举报