Using GridView for edit function in asp.net - Dropdown list

Question

Appreciate your help with my modal-pop up for edit function.

Intro.. I have a table list of users. Before this.. each time want to edit the user detail, will open another page, edit, save and return back to list of users's table.

I want to so called update the page to use modal pop up since the details to be edited are not so many that requires to open another page. But i get suggestions from our fellow member here in stackOverflow.. to just use GridView.. The following are my attempt.. i manage to edit and delete but the dropdown list is not correct.. it doesnt select the original value.. instead pick the 1st dropdown list.. and I got error at GridView1_RowEditing..

Your help are really appreciated. Thanks

UserManager.aspx

<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            <asp:GridView ID="gv" runat="server" DataKeyNames="ID" AutoGenerateColumns="False" CssClass="table table-striped table-bordered table-hover table-checkable dataTable no-footer" EmptyDataText="No users found." OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating">
                <Columns>                       
                    <asp:TemplateField HeaderText="Roles" ItemStyle-Font-Size="12px" ItemStyle-Width="200px">
                        <ItemTemplate>
                            <%# Eval("Roles") %>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:DropDownList runat="server" ID="ddlRoles" AutoPostBack="true"> 
                                <asp:ListItem Text="Supervisor" Value="10"></asp:ListItem>
                                <asp:ListItem Text="Front desk operator" Value="14"></asp:ListItem>
                                <asp:ListItem Text="Housekeeping" Value="15"></asp:ListItem>
                                <asp:ListItem Text="Finance Clerk" Value="16"></asp:ListItem>
                            </asp:DropDownList>  
                            <asp:Label runat="server" ID="lbRoleID" Text='<%# Eval("Roles") %>' Visible="false"></asp:Label>
                        </EditItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Username">
                        <ItemTemplate>
                            <%# Eval("Username") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Full Name" ItemStyle-Font-Size="12px">
                        <ItemTemplate>
                            <%# Eval("Name") %>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox runat="server" ID="EditName" Text='<%# Eval("Name") %>'></asp:TextBox>
                        </EditItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Contact No" ItemStyle-Font-Size="12px">
                        <ItemTemplate>
                            <%# Eval("ContactNo") %>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox runat="server" ID="EditContactNo" Text='<%# Eval("ContactNo") %>'></asp:TextBox>
                        </EditItemTemplate>
                    </asp:TemplateField>
                    <asp:CommandField ShowEditButton="true" />  
                    <asp:CommandField ShowDeleteButton="true" />
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:LinkButton runat="server" ID="lnkResetPassword" DataKeyNames="ID" CssClass="btn dark btn-sm btn-outline sbold uppercase" OnClick="lnkResetPassword_Click" OnClientClick="if (confirm('Are you sure to reset user password?')) { showPreloader(); } else { return false; }">
                                <i class="fa fa-refresh"></i> &nbsp; Reset Password
                            </asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </div>
</div>
............
............

UserManager.aspx.cs

protected void lnkResetPassword_Click(object sender, EventArgs e)
{
    GridViewRow gr = (GridViewRow)(((LinkButton)sender).NamingContainer);
    int id = Convert.ToInt32(gv.DataKeys[gr.RowIndex].Value.ToString());

    setupDB();

    sSql = "update Users set Password = HASHBYTES('SHA1', '123456') , IsFirstTime = '1' where ID = '"+ id +"'";

    db.executeNonQuery(sSql);

    disposeDB();
}

protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
    GridViewRow gr = (GridViewRow)gv.Rows[e.RowIndex];
    int id = Convert.ToInt32(gv.DataKeys[gr.RowIndex].Value.ToString());

    setupDB();

    sSql = "update Users set IsActive = '0' where ID = '" + id + "'";
    db.executeNonQuery(sSql);

    disposeDB();
    LoadData();
}

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{

    Label lbRoleID = (Label)gv.Rows[e.NewEditIndex].FindControl("lbRoleID"); //lbRoleID is the ID of label
    gv.EditIndex = e.NewEditIndex;

    DropDownList ddlUserRoles = (DropDownList)gv.Rows[e.NewEditIndex].FindControl("ddlRoles");
    ddlUserRoles.Text = lbRoleID.Text;
    ddlUserRoles.DataBind();

    LoadData();
}

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
    GridViewRow gr = (GridViewRow)gv.Rows[e.RowIndex];
    int id = Convert.ToInt32(gv.DataKeys[gr.RowIndex].Value.ToString());

    DropDownList editRole = (DropDownList)(gv.Rows[gv.EditIndex].Cells[0].FindControl("ddlRoles"));
    TextBox editName = (TextBox)(gv.Rows[gv.EditIndex].Cells[2].FindControl("EditName"));
    TextBox editContactNo = (TextBox)(gv.Rows[gv.EditIndex].Cells[3].FindControl("EditContactNo"));

    gv.EditIndex = -1;

    setupDB();

    sSql = "Update Users set RoleID = '" + editRole.SelectedValue + "', Name = '" + editName.Text + "', ContactNo = '" + editContactNo.Text + "' where ID = '" + id + "'";
    db.executeNonQuery(sSql);

    disposeDB();
    LoadData();
}

protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
    gv.EditIndex = -1;
    LoadData();
}

Answer 1

Why you want modal popup when you can use gridview feature to edit row.

You can checkout below example link to implement row edit in Gridview.

https://www.c-sharpcorner.com/UploadFile/9f0ae2/gridview-edit-delete-and-update-in-Asp-Net/

Html :

GridView

<asp:GridView ID="gv" runat="server" DataKeyNames="ID" 
   AutoGenerateColumns="False" CssClass="table table-striped table-bordered table-hover table-checkable dataTable no-footer" 
  EmptyDataText="No users found." 
  OnRowCancelingEdit="GridView1_RowCancelingEdit" 
  OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" 
  OnRowUpdating="GridView1_RowUpdating"
  OnRowDataBound="GridView1_RowDataBound"> //Added Row Bound Event

Dropdown Template

 <asp:TemplateField HeaderText="Roles" ItemStyle-Font-Size="12px" ItemStyle-Width="200px">
                    <ItemTemplate>
                        <asp:Label ID="lblRoles" runat="server" Text='<%# Eval("Roles") %>'></asp:Label>

                    </ItemTemplate>
                    <EditItemTemplate>

                        <asp:DropDownList runat="server" ID="ddlRoles"> 
                            <asp:ListItem Text="Supervisor" Value="10"></asp:ListItem>
                            <asp:ListItem Text="Front desk operator" Value="14"></asp:ListItem>
                            <asp:ListItem Text="Housekeeping" Value="15"></asp:ListItem>
                            <asp:ListItem Text="Finance Clerk" Value="16"></asp:ListItem>
                        </asp:DropDownList>  

                    </EditItemTemplate>
                </asp:TemplateField>

CS :

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
{

    if ((e.Row.RowState & DataControlRowState.Edit) > 0) {
        Label role = (Label)e.Row.FindControl("lblRoles");
        DropDownList ddlRoles = (DropDownList)e.Row.FindControl("ddlRoles");
        ddlRoles.Items.FindByText(role.Text).Selected = true;
    }
}