带有“启用”和“禁用图像”按钮的网格视图

本文关键字：按钮 网格 禁用图像 视图 启用 带有 图像 | 更新日期: 2023-09-27 18:31:21

我在 asp.net 应用程序中有网格视图。我想插入一个带有图像按钮的列，通过单击它将启用或禁用用户或更改 db 中的状态字段，并相应地更改图像按钮图像的用户状态。

含义：我想为禁用和启用的用户显示不同的图像。

如何在 C# 中执行此操作并将数据绑定到图像按钮？

任何人请帮忙。提前谢谢。

带有“启用”和“禁用图像”按钮的网格视图

利用 ItemDataBound 事件。 您可以在此处检查网格的每一行并对其应用更改。 然后，您可以隐藏/取消隐藏或更改按钮：

VB.net 下面，但您可以轻松转换为 C#：

            Dim ib As ImageButton = CType(e.Item.FindControl("ibFav"), ImageButton)
            ib.Visible = False
            Dim ib2 As ImageButton = CType(e.Item.FindControl("ibRemFav"), ImageButton)
            ib2.Visible = True

示例用户模型：

public class UserModel {    
        public string Name { get; set; }
        public bool IsEnabled { get; set; }
}

下面是网格视图代码：

<asp:GridView ID="GridView" runat="server" AutoGenerateColumns="false" 
    onrowcommand="GridView_RowCommand" onrowdatabound="GridView_RowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemStyle HorizontalAlign="Center" />
            <ItemTemplate>
                <asp:ImageButton ID="EnabledImgBtn" runat="server" 
                    CommandArgument='<%# Eval("Name") %>'
                    CommandName="ResetUserState" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="Name" />
         //Other columns....
    </Columns>
</asp:GridView>

根据您的需要设置"命令参数"，例如用户的ID。网格视图的示例代码隐藏：

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack){
        LoadGridView();
    }
}
private void LoadGridView()
{
    this.GridView.DataSource = GetUsersFromDatabase();
    this.GridView.DataBind();
}
protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        var user = e.Row.DataItem as UserModel;
        var enabledImgBtn = e.Row.FindControl("EnabledImgBtn") as ImageButton;
        if (enabledImgBtn != null)
            enabledImgBtn.ImageUrl = user.IsEnabled ? "~/YourImagePath/enabled.png"
                                                    : "~/YourImagePath/disalbed.png";
    }
}
protected void GridView_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "ResetUserState")
    {
        if (e.CommandArgument!= null)
           { 
            var userName = e.CommandArgument.ToString();            
            //Change user enabled state and Update database
            //Sample code:
             var user = FindUserByName("userName");
             user.IsEnabled = !user.IsEnabled;
             //SaveInDatabase(user);
             LoadGridView();
           }
    }
}

您可以考虑使用类型等于"图像"的"命令字段"而不是"模板字段"，但这种方法存在问题，请阅读更多内容。

希望这有帮助。

<asp:GridView ID="GridView" runat="server" AutoGenerateColumns="false" 
    onrowcommand="GridView_RowCommand" onrowdatabound="GridView_RowDataBound">
    <Columns>
         <asp:TemplateField HeaderText="Change Status" ItemStyle-CssClass="GrdItemImg">
                            <ItemTemplate>
                                <asp:ImageButton ID="ibtnChangeActiveStatus" CommandArgument='<%#Eval("RecordID")%>'
                                    CommandName='GRDSTATUS' runat="server" ImageUrl='<%# getStatusImage(Convert.ToInt32(DataBinder.Eval(Container.DataItem,"IsApproved"))) %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
        <asp:BoundField DataField="Col2" HeaderText="Col2" />
         //Other Respective  columns....
                ...........
                ..........
    </Columns>
</asp:GridView>

并在CS文件中添加以下功能。

public string getStatusImage(int intStatus)
    {
        string strStatus = string.Empty;
        if (intStatus == 1)
        {            
            strStatus = "~/images/active.png";
        }
        else
        {
            strStatus = "~/images/inactive.png";
        }
        return strStatus;
    }

因此，在"intStatus"的基础上，将设置相应的活动/非活动图像。

相关文章：