您的位置：首页 > 编程语言 > ASP

VS2013从头开始创建Web Form--ASP.NET数据源和数据绑定控件

2016-01-11 14:52 856 查看
下面我们将介绍在 VS2013 下如何创建 ASP.NET Web Form 并操作数据源控件和数据绑定控件：

1、创建Web Application

打开VS2013，依次点击 File->New->Project



2、确定后选择 Empty



工程文件如下：



3、新建Web Form：右键工程，添加



在弹出的框中输入Web Form的名字：



重复以上步骤新建List.aspx，工程文件如下：



3、创建SQLEXPRESS数据库



在弹框中输入数据库名称：



警告说要创建App_Data文件夹，点是：



现在的工程目录是这样的：



4、配置connectionString

打开 Web.config 文件，在<configuration>下添加<connectionString>：

<connectionStrings>
<add name="stuDB"
connectionString="Data Source=.\SQLEXPRESS;
AttachDbFilename=|DataDirectory|\stuDB.mdf;
Integrated Security=True;
User Instance=True"
providerName="System.Data.SqlClient"/>
</connectionStrings>


注意这里我用的是SQL Server Express，可以点此查看配置

5、创建student表

打开stuDB.mdf：



新建表：



填充表属性：



更新表：点击Update后弹出以下框



6、完成代码：

List.aspx：简单地利用 SqlDataSource 和 GridView 显示 student 表中的所有数据

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="Demo.List" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:stuDB %>"
SelectCommand="SELECT * FROM student"></asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="SNO" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="SNO" HeaderText="SNO" ReadOnly="true" />
<asp:BoundField DataField="NAME" HeaderText="NAME" />
<asp:BoundField DataField="SEX" HeaderText="SEX" />
<asp:BoundField DataField="AGE" HeaderText="AGE" />
</Columns>
</asp:GridView>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Insert.aspx">继续添加</asp:HyperLink>
</div>
</form>
</body>
</html>


Insert.aspx：利用服务器验证控件简单地验证表单，由于没有实现学号检测，这里直接在下面列出所有数据
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Insert.aspx.cs" Inherits="Demo.Insert" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
学号：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ErrorMessage="学号不能为空"
ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">学号检测</asp:LinkButton>
</p>
<p>
姓名：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="姓名不能为空"
ControlToValidate="TextBox2"></asp:RequiredFieldValidator>
</p>
<p>
性别：<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="男" Selected="True" Text="男" />
<asp:ListItem Value="女" Text="女" />
</asp:CheckBoxList>
</p>
<p>
年龄：<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:RangeValidator ID="RangeValidator1" runat="server"
ErrorMessage="年龄必须是在1到100之间的整数"
ControlToValidate="TextBox3"
MaximumValue="100" MinimumValue="1" Type="Integer">
</asp:RangeValidator>
</p>
<p><asp:Button ID="Button1" runat="server" Text="添加" OnClick="Button1_Click"/></p>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:stuDB %>"
SelectCommand="SELECT * FROM [student]"
InsertCommand="INSERT INTO student(SNO, NAME, SEX, AGE) values(@sno, @name, @sex, @age)">
<InsertParameters>
<asp:ControlParameter ControlID="TextBox1" Name="sno" PropertyName="Text" />
<asp:ControlParameter ControlID="TextBox2" Name="name" PropertyName="Text" />
<asp:ControlParameter ControlID="CheckBoxList1" Name="sex" PropertyName="Text" />
<asp:ControlParameter ControlID="TextBox3" Name="age" PropertyName="Text" />
</InsertParameters>
</asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
DataKeyNames="SNO" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="SNO" HeaderText="SNO" ReadOnly="True"
SortExpression="SNO" />
<asp:BoundField DataField="NAME" HeaderText="NAME"
SortExpression="NAME" />
<asp:BoundField DataField="SEX" HeaderText="SEX"
SortExpression="SEX" />
<asp:BoundField DataField="AGE" HeaderText="AGE"
SortExpression="AGE" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>


Insert.aspx.cs：主要是插入数据；学号检测的功能预留下来

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Demo
{
public partial class Insert : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected void Button1_Click(object sender, EventArgs e)
{
SqlDataSource1.Insert();
Response.Redirect("~/List.aspx");
}

protected void LinkButton1_Click(object sender, EventArgs e)
{

}
}
}


另外服务器验证控件可能会出错，需要jQuery，下面是解决方法：

/article/8547697.html

推荐使用第一种方法，修改后的 Web.config 如下：

<?xml version="1.0" encoding="utf-8"?>
<!--
For more information on how to configure your ASP.NET application, please visit http://go.microsoft.com/fwlink/?LinkId=169433 -->
<configuration>
<connectionStrings>
<add name="stuDB"
connectionString="Data Source=.\SQLEXPRESS;
AttachDbFilename=|DataDirectory|\stuDB.mdf;
Integrated Security=True;
User Instance=True"
providerName="System.Data.SqlClient"/>
</connectionStrings>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
</appSettings>
</configuration>


7、功能完善：

代完善的功能有学号检测，更详细的表单验证，数据绑定控件的更新和删除功能等。

8、结果验证：

输入表单：



添加跳转：



继续添加：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航