How to use checkbox check change without refreshing page in ASP.NET-CodePudding

I have two checkboxes in a gridview. The scenario is this: only one of these checkboxes can be chosen or none of them.

My problem is that when my gridview got too big, every time I check or uncheck each row the page refresh that is because of I set auto post back = true! What should I do to avoid this refreshing and the scenario works except UpdatePanel!

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" BackColor="White">
    <Columns>    
        <asp:TemplateField HeaderText="morakhasi" ItemStyle-Width="80">
            <ItemTemplate><asp:CheckBox ID="chkboxMorakhasi" OnCheckedChanged="chkboxMorakhasi_CheckedChanged" runat="server" AutoPostBack="true"/>
            </ItemTemplate>
            <HeaderStyle Font-Size="16px" Width="80px" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="taiid" ItemStyle-Width="80">
            <ItemTemplate><asp:CheckBox ID="chkboxTaiid" OnCheckedChanged="chkboxTaiid_CheckedChanged" runat="server" Checked="True" AutoPostBack="true" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>    
</gridview>

Code behind:

protected void chkboxTaiid_CheckedChanged(object sender, EventArgs e)
{
    foreach (GridViewRow gr in GridView2.Rows)
    {
        GridViewRow row = ((GridViewRow)((CheckBox)sender).NamingContainer);
        int index = row.RowIndex;

        CheckBox cb1 = (CheckBox)GridView2.Rows[index].FindControl("chkboxTaiid");
        CheckBox cb2 = (CheckBox)GridView2.Rows[index].FindControl("chkboxMorakhasi");
        cb2.Checked = Convert.ToBoolean(0);
    }
}

protected void chkboxMorakhasi_CheckedChanged(object sender, EventArgs e)
{
    foreach (GridViewRow gr in GridView2.Rows)
    {
        GridViewRow row = ((GridViewRow)((CheckBox)sender).NamingContainer);
        int index = row.RowIndex;

        CheckBox cb1 = (CheckBox)GridView2.Rows[index].FindControl("chkboxTaiid");
        CheckBox cb2 = (CheckBox)GridView2.Rows[index].FindControl("chkboxMorakhasi");
        cb1.Checked = Convert.ToBoolean(0);
    }
}

CodePudding user response：

You should use UpdatePanel control to do this

 <asp:ScriptManager ID="ScriptManager1" runat="server">

 </asp:ScriptManager>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
 <asp:CheckBox 
 OnCheckedChanged="chkCompany_OnCheckedChanged" 
 AutoPostBack="True" CssClass="chkCompany" 
 ClientIDMode="Static" ID="chkCompany" runat="server" />
 </ContentTemplate>
 </asp:UpdatePanel>

CodePudding user response：

Well, first up, when you say the grid is large? Well, how large? 20 rows or 2000 rows?

When Google, or even Microsoft asks interview questions? A good number of these questions are of a how high, how far, how big type of questions. And the reason for that is simple: They want to determine if you have a mind can is able to evaluate scope and scale of problems that you have to solve. (so, they might ask how would you move Mount Fuji?)

anyway:

I can't image the grid has what, 30 rows on a page? (why so many and why so large??).

I mean, if you have more, then we need to know how many more?

However, lets get the first problem solved. (the check box issue), and then we can try and deal with the re-plot/refresh issue.

Ok, so say we have this grid markup - grid 2 check boxes

        <asp:GridView ID="GVHotels" runat="server" class="table" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="FirstName"   HeaderText="FirstName"  />
                <asp:BoundField DataField="LastName"    HeaderText="LastName"   />
                <asp:BoundField DataField="City"        HeaderText="City"       />
                <asp:BoundField DataField="HotelName"   HeaderText="HotelName" HeaderStyle-Width="200"   />
                <asp:BoundField DataField="Description" HeaderText="Description" />

                <asp:TemplateField HeaderText="Choice 1"  ItemStyle-HorizontalAlign="Center"  >
                    <ItemTemplate>
                        <asp:CheckBox ID="chk1" runat="server" 
                            OnCheckedChanged="chk1_CheckedChanged" AutoPostBack="true"/>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Choice 2"  ItemStyle-HorizontalAlign="Center"  >
                    <ItemTemplate>
                        <asp:CheckBox ID="chk2" runat="server" 
                            OnCheckedChanged="chk2_CheckedChanged" AutoPostBack="true"/>
                    </ItemTemplate>
                </asp:TemplateField>

            </Columns>
        </asp:GridView>

Code to load the grid is this:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadGrid();
    }

    void LoadGrid()
    {

        using (SqlConnection con = new SqlConnection(Properties.Settings.Default.TEST3))
        {
            using (SqlCommand cmdSQL = 
                new SqlCommand("SELECT * from tblHotels ORDER BY HotelName ", con))
            {
            con.Open();
            GVHotels.DataSource = cmdSQL.ExecuteReader();
            GVHotels.DataBind();
            }
        }
    }

And now we have this:

And our two check box changed events are this:

protected void chk1_CheckedChanged(object sender, EventArgs e)
{
    CheckBox ck = (CheckBox)sender;
    GridViewRow gRow = (GridViewRow)ck.Parent.Parent;
    if (ck.Checked)
        // uncheck the other box
        ((CheckBox)gRow.FindControl("chk2")).Checked = false;
}

protected void chk2_CheckedChanged(object sender, EventArgs e)
{
    CheckBox ck = (CheckBox)sender;
    GridViewRow gRow = (GridViewRow)ck.Parent.Parent;
    if (ck.Checked)
        // uncheck the other box
        ((CheckBox)gRow.FindControl("chk1")).Checked = false;
}

Ok, so we are done.

the next issue is performance? A grid of say 20-40 rows on the form should work ok.

I think just drop a update panel around the grid, and you done.

So, we drop in script manager, and then this:

      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
  -- above grid goes here!!!
            </ContentTemplate>
        </asp:UpdatePanel>

Now, I just tested the above with 50 rows on the screen. I can't see or feel, or notice ANY replot delay, and in fact the check box reacts as fast as my mouse click. In fact the check box status changes quite much as fast as the mouse click, and in fact quite much at the same time I hear the click.

So, above is the layout for the code you require here. If there is some "slow" ness, or delay, or your data set is larger, then perhaps some kind of data pager should be introduced. On the other hand, you not shared, or noted how many rows this grid is displaying on the screen. And without that information, we shooting in the dark here as to what possible solutions(s) exist (or that what you have is a very bad idea).