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

前言

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

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

左侧列表的动态生成

​ 开始的思路如下图所示：

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

如下图所示：

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

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

右侧数据的刷新

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

如下图：

代码如下：

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的主意，如下图

这个方法倒是可以和点击左侧列表很好兼容，但是我在调试的过程之中又遇到了一个问题。

主要是在点击左侧的button按钮之后会默认刷新一下界面，就导致了右侧数据一直显示的是第一个分类的数据。

在我不断地百度之后，我找到了一个思路，使用AJAX来解决这个问题。

AJAX的使用可以参考这篇博客

https://blog.csdn.net/chenhongwu666/article/details/41392529

左侧按钮点击之后的颜色改变

​ 这个可以通过JS来获取左侧列表在渲染成div的那个ID，来获取里边的子元素，并通过JS函数来更改button按钮的颜色！

总结

我在不会使用repeater的时候，感觉这个好难用，但是在我会用之后感觉真香！太好使了！

本文地址：https://blog.csdn.net/qq_48175067/article/details/111128727