这个页面是子页面中的第一个,建立的目的一是为了熟悉基于母版的子页面的设计,第二是更加熟悉连接数据库后的sql语句。开始吧!
一、 设计消息列表及相关功能
很多地方参考这位up的内容,感谢大佬orz!!!为了自己记忆更深刻,我这里再自己总结回忆一遍。asp.net 可视化操作(二)——Sql数据库连接及简单查询功能的实现_asp 点击按钮查询sql数据库_我叫RT的博客-CSDN博客https://blog.csdn.net/weixin_43919932/article/details/103572324
- 首先,建立一个新的文件,基于我们已有的母版新建一个web窗体文件。将其中的头、尾以及导航栏的部分完全使用默认格式(母版);
- 在右侧内容框进行编辑:在工具箱中找到SqlDataSource控件插入到我们的内容框。这个控件的功能是对sql数据进行增删改查搜索,在这里我们就可以进行搜索后展示消息列表的操作了。点击控件右侧的配置数据源,由于前期我已经完成了数据库的连接,所以这里只需要进行语句的描述即可。在这里,我们直接通过选项选中输出所有项即可(没有需要筛选的内容);
- 添加repeater控件显示内容。找到repeater控件,拉进sqldatasource中。注意,选择它的数据源为之前的SqlDataSource。repeater控件中通常包括三部分内容,头部<HeaderTemplate></HeaderTemplate>,中间的数据部分(repeat的部分,循环展示)<ItemTemplate></ItemTemplate>,尾部<FooterTemplate></FooterTemplate>。值得注意的是,头尾部分是不能引用数据库信息的,我们要在中间部分引入我们的信息。举一个例子:
<table> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:dbConnstr %>" SelectCommand="SELECT [msg_ID], [msg_Date], [msg_title] FROM [message]"></asp:SqlDataSource> <asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource1"> <HeaderTemplate> <tr> <th class ="my_title">标题</th> <th class ="my_title">发布日期</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td class ="my"><%#Eval("msg_Title") %></td> <td class ="my"><%#Eval("msg_Date") %></td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </table>
- 至此,我们已经可以在页面中正常展示消息列表。调整css等内容进行一点美化,可以得到消息展示页面(下图的标题链接此时还没有添加)。
二、 传递参数
只有消息列表是不够的,我们还希望实现点击标题后进入详细的消息页面的功能。分为两个步骤,将标题设置为按钮和传参,包括消息列表页面(下称message)发送和单个消息页面(下称single_message)接收参数。
- 设置按钮:修改标题的属性如下:
<ItemTemplate> <tr> <td class ="my"> <asp:LinkButton ID="LinkButton1" CausesValidation="false" runat="server" Text='<%# Eval("msg_title") %>' OnClick="LinkButton_Click"></asp:LinkButton> </td> <td class ="my"><%#Eval("msg_Date") %></td> </tr> </ItemTemplate>
即可得到上上张图片展示的内容。
- 传递参数:这一步我还卡了挺长时间,最终找到了两个方法:
① session传递
//message.aspx, 这部分两个页面都是一样的 <ItemTemplate> <tr> <td class ="my"> <asp:LinkButton ID="LinkButton1" CommandArgument='<%# Eval("msg_id")%>' CausesValidation="false" runat="server" Text='<%# Eval("msg_title") %>' OnClick="LinkButton_Click"></asp:LinkButton> </td> <td class ="my"><%#Eval("msg_Date") %></td> </tr> </ItemTemplate>
message.aspx中注意点有一个,就是添加一个CommandArgument,将需要传递的参数加进去;
//message.aspx.cs protected void LinkButton_Click(object sender, EventArgs e) { LinkButton linkButton = (LinkButton)sender; string msgID = linkButton.CommandArgument; // 将消息的 ID 值存储在 Session 中 Session["msgID"] = msgID; // 重定向到第二个页面 Response.Redirect("~/single_msg.aspx"); }
message.aspx.cs的注意点有两个,一个是msgID的设置内容,另一个是使用session传递参数的格式。(呃呃不熟悉的内容每行都是注意点)
//single_message.aspx //与message页面相似,也加入SqlDataSource和Repeater控件,设置与之前类似 <table> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:dbConnstr %>" SelectCommand="SELECT * FROM [message] WHERE ([msg_ID] = @msg_ID)"> <SelectParameters> < asp:SessionParameter Name = "msg_ID" SessionField = "msgID" Type = "Int32" /> </SelectParameters> </asp:SqlDataSource> <asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource1"> <HeaderTemplate> </HeaderTemplate> <ItemTemplate> <tr> <h2 class="my_title"><%# Eval("msg_title")%></h2> </tr> <div class="my_content"> <%#Eval("msg_content") %> </div> </ItemTemplate> </asp:Repeater> </table>
这里要注意的地方有一个,就是在SqlDataSource中配置数据源的时候,除了select语句的基本选项还需要在where中配置ID信息(我这里设置的默认ID是1,实际上也可以不设置):
② 构建带有消息 ID 参数的 URL
//message.aspx与前面一致,不再说明 //message.aspx.cs如下 protected void LinkButton_Click(object sender, EventArgs e) { LinkButton linkButton = (LinkButton)sender; string msgID = linkButton.CommandArgument; // 构建带有消息 ID 参数的 URL string url = "~/single_msg.aspx?msg_ID=" + msgID; // 设置 LinkButton 的 PostBackUrl 属性为新的 URL linkButton.PostBackUrl = url; }
//single_message.aspx <asp:SqlDataSource ID = "SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:dbConnstr %>" SelectCommand="SELECT * FROM [message] WHERE ([msg_ID] = @msg_ID)"> <SelectParameters> <asp:QueryStringParameter DefaultValue = "1" Name="msg_ID" QueryStringField="msg_ID" Type="Int32" /> </SelectParameters> </asp:SqlDataSource >
总结来说两个方法在两个地方有所不同,一个是message.aspx.cs,另一个是single_message.aspx中SqlDataSource里面的selectCommand。
具体区别是:session方法是在message.aspx.cs中对session[]进行赋值,在single_message.aspx中使用< asp:SessionParameter Name = "msg_ID" SessionField = "msgID" Type = "Int32" />(SqlDataSource属性中selectQuery中参数源是session);
另一种方法在message.aspx.cs中对url修改,在url中添加要传递的参数,在single_message.aspx中使用<asp:QueryStringParameter DefaultValue = "1" Name="msg_ID" QueryStringField="msg_ID" Type="Int32" />(SqlDataSource属性中selectQuery中参数源是QueryString)。
点击了正确位置但是出现了下图怎么办呢?点击设计页面,再点回原页面即可切换到上面的内容啦。
- 完成了上面的内容之后,对single_message.aspx进行简单的编辑(引用相关数据的时候直接使用<%# Eval("msg_title")%>的形式就可以啦)。完成之后,在message页面中双击标题链接即可进入详细页面啦!
三、 遇到的错误
非session方法中,原本我的代码:
protected void LinkButton_Click(object sender, EventArgs e)
{
LinkButton linkButton = (LinkButton)sender;
string msgID = linkButton.CommandArgument;
// 构建带有消息 ID 参数的 URL
string url = "~/single_msg.aspx?msg_ID=" + msgID;
// 重定向到第二个页面
Response.Redirect(url);
}
LinkButton 控件上设置了 PostBackUrl 属性为 "~/single_msg.aspx",这将导致单击 LinkButton 后进行页面的完整回发,而不是通过 URL 参数传递数据到第二个页面。
要解决这个问题,可以在第一个页面的代码中修改 LinkButton 的 PostBackUrl 属性,将消息的 ID 值作为查询参数添加到 URL 中。然后,在第二个页面中,可以使用 Request.QueryString 来获取传递的参数值。
(其他错误就是一些css的错误,没什么好说的~)
完结撒花~✿✿ヽ(°▽°)ノ✿