ASP.NET前台界面部分数据的动态刷新

程序员文章站 2022-06-26 17:50:52

ASP.NET前台界面部分数据的动态刷新前言菜鸡一枚，本博客主要是总结自己遇到过的问题，大佬请略过。在暑假的项目期间，本人遇到了一个前台界面的一个数据刷新问题，主要是点击左侧的分类，实现页面右侧数据的实时刷新，由于我使用的是ASP.NET，所以我刚开始设想的是使用button按钮控件来实现右侧数据的动态刷新，但是由于客户提出了要能够灵活变更分类的需求，所以前一种方法就不适用了，于是我想到了使用repeater控件。左侧列表的动态生成开始的思路如下图所示：但是使用repe...

ASP.NET前台界面部分数据的动态刷新

前言

菜鸡一枚，本博客主要是总结自己遇到过的问题，大佬请略过。

在暑假的项目期间，本人遇到了一个前台界面的一个数据刷新问题，主要是点击左侧的分类，实现页面右侧数据的实时刷新，由于我使用的是ASP.NET，所以我刚开始设想的是使用button按钮控件来实现右侧数据的动态刷新，但是由于客户提出了要能够灵活变更分类的需求，所以前一种方法就不适用了，于是我想到了使用repeater控件。

左侧列表的动态生成

开始的思路如下图所示：

ASP.NET前台界面部分数据的动态刷新

但是使用repeater控件的话会有一个问题，就是数据的绑定问题，主要是如何判断选定的是点击的那个按钮，从而在右侧界面显示相应的数据，这主要就是我刚是选择使用写死的button按钮的原因。后来经过我的不断百度，我找到了一种方法。

如下图所示：

ASP.NET前台界面部分数据的动态刷新

主要是通过绑定CommandArgument这一属性绑定ID就可以解决。然后调用Repnav_ItemCommand这个事件就可以了，然后在事件中通过**e.CommandArgument.ToString()**来获取到鼠标点击的按钮的ID。

虽然在这简单的几句话就说明了，但是我当时很茫然，实验了好长时间，百度了好久才完美解决！不过能够解决还是很开心o(￣▽￣)ブ

右侧数据的刷新

原本我解决右侧数据的刷新问题是通过在数据应该在的位置哪里预先写好了一个div，然后通过Page_Load事件调用自己封装的一个方法，在原本预留好的div里根据数据库数据自动生成。

如下图：
ASP.NET前台界面部分数据的动态刷新

代码如下：

DataTable dt = newsBLL.GetNews(sql);
            for(int i= 0;i<dt.Rows.Count;i++)
            {
                Panel pa = new Panel();
                this.mainNew.Controls.Add(pa);
                Panel pa1 = new Panel();
                pa.Controls.Add(pa1);
                pa1.Width = 230;
                pa1.Height = 152;
                pa1.Style.Add("float", "left");
                Image img = new Image();
                pa1.Controls.Add(img);
                img.ImageUrl = dt.Rows[i].ItemArray[2].ToString();
                img.Width = 230;
                img.Height = 152;
                Panel pa2 = new Panel();
                pa.Controls.Add(pa2);
                pa2.Width = 380;
                pa2.Height = 152;
                pa2.Style.Add("float", "right");
                pa2.Style.Add("position", "relative");
                HyperLink newHyperLink = new HyperLink();
                pa2.Controls.Add(newHyperLink);
                newHyperLink.Text = dt.Rows[i].ItemArray[5].ToString();
                newHyperLink.NavigateUrl = dt.Rows[i].ItemArray[6].ToString();
                newHyperLink.Font.Size = 20;
                Panel pa3 = new Panel();
                pa2.Controls.Add(pa3);
                pa3.Height = 21;
                pa3.Style.Add("position", "absolute");
                pa3.Style.Add("bottom", "0");
                pa3.Style.Add("right", "0");
                Label la = new Label();
                pa3.Controls.Add(la);
                la.Text = dt.Rows[i].ItemArray[3].ToString();
            }

但是在采用上边的方法解决了左侧列表的动态生成之后，如果还采用这个方法的话就会不太兼容，不太理想。

于是我又开始打repeater的主意，如下图

ASP.NET前台界面部分数据的动态刷新