Show a div on LinkButton click asp.net

Question

I have a LinkButton in a GridView I want it to run a function and in the same time shows a div by Id

<div id="viewEmployeeModal" class="modal fade" >

The View_user function is not to show the div it's a function that calls data from SQL Server.

I tried this inside a LinkButton and HyperLink both

<ItemTemplate>
    <asp:HyperLink Id="View_btn" runat="server" Text="view"  
         href='<%# "javascript:void(0);" %>'Onclick="view_user" ></asp:HyperLink>
</ItemTemplate>

and this jQuery code:

$('#viewEmployeeModal').hide();
$("#View_btn").on('click', function () {
    $('#viewEmployeeModal').show();
});

Any help? Thanks.

Answer 1

Well, first up, it's not clear why a link button is being used, say as opposed to a plain button, or that of even a image button.

However, it does not really matter which kind of button is to be used here, it just not all that clear why a link button is the choice here.

So, assuming we have a simple grid view, and say we drop in an asp.net button into that grid view.

Next up, since we wanting to call/use/have/enjoy some server side code, then I not at all clear why we need any client side JavaScript code to show/hide the div.

It is a simple matter to have the code behind to show/hide that div anyway.

So, say we have this simple grid view markup:

<asp:GridView ID="GridView1" 
    runat="server" CssClass="table table-hover" AutoGenerateColumns="false"
    width="48%" DataKeyNames="ID" OnRowDataBound="GridView1_RowDataBound"  >
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="First Name"  />
        <asp:BoundField DataField="LastName" HeaderText="Last Name"    />
        <asp:BoundField DataField="HotelName" HeaderText="Hotel Name"  ItemStyle-Width="160"  />
        <asp:BoundField DataField="Description" HeaderText="Description" ItemStyle-Width="270" />
        <asp:TemplateField HeaderText="Edit" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:LinkButton ID="cmdEdit" runat="server" 
                    class="btn myshadow"
                    OnClick="cmdEdit_Click" >
                    <span aria-hidden="true" class="glyphicon glyphicon-floppy-saved">&ensp;Edit</span>
                </asp:LinkButton>


            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />

And code to load this gv:

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

    void LoadData()
    {
        string strSQL = "SELECT * FROM tblHotelsA ORDER BY HotelName";
        DataTable rstData = General.MyRst(strSQL);
        GridView1.DataSource = rstData;
        GridView1.DataBind();
    }

And we now have this:

So, now let's drop a div right below the above gv markup.

This div (we assume) can be hidden on pageload.

And it just a bunch of simple labels and text boxes.

eg this:

<div id="EditRecord" runat="server" 
    style="float:left;border:solid 2px;border-radius:12px;padding:15px">
    <h3>Edit Hotel</h3>
    <div style="float: left" class="iForm">
        <label>HotelName</label>
        <asp:TextBox ID="txtHotel" runat="server" Width="280" f="HotelName" /><br />
        <label>First Name</label>
        <asp:TextBox ID="tFN" runat="server" Width="140" f="FirstName" /><br />
        <label>Last Name</label>
        <asp:TextBox ID="tLN" runat="server" Width="140" f="LastName" ClientIDMode="Static" /><br />
        <label>City</label>
        <asp:TextBox ID="tCity" runat="server" Width="140" f="City" ClientIDMode="Static" /><br />
        <label>Province</label>
        <asp:TextBox ID="tProvince" runat="server" Width="75" f="Province" /><br />
    </div>
    <div style="float: left; margin-left: 20px" class="iForm">
        <label>Description</label>
        <br />
        <asp:TextBox ID="txtNotes" runat="server" Width="400" TextMode="MultiLine"
            Height="150px" f="Description"></asp:TextBox><br />


            etc. etc etc.

So, it really don't matter what we have in the div area.

But note, we have a "id" and runat=server for the div. This allows the code behind to show/hide the grid.

So, our button click (the link button click) will load the div area with data from the "one row" we clicked on.

Hide the gv, and show the EditRecord div area.

So, the code behind looks like this for the link button click event

protected void cmdEdit_Click(object sender, EventArgs e)
{
    LinkButton btn = sender as LinkButton;
    GridViewRow gRow = btn.NamingContainer as GridViewRow;
    // get database PK id from the gridview
    int PKID = (int)GridView1.DataKeys[gRow.RowIndex]["ID"];
    ViewState["PKID"] = PKID;

    string strSQL = $"SELECT * FROM tblHotelsA WHERE ID = {PKID}";
    DataRow rstData = General.MyRst(strSQL).Rows[0];
    General.FLoader(this.EditRecord, rstData);

    GridView1.Visible = false;  // hide grid
    EditRecord.Visible = true;  // show edit div
}

And say the "cancel" button in that div area, the code is this:

   protected void cmdCancel_ServerClick(object sender, EventArgs e)
    {
        GridView1.Visible = true;
        EditRecord.Visible = false; 
    }

And now the result is this:

So, we can use the one button click event, code behind, and that code behind can both load some data, hide or show the div, and in this example, we hide the gridview, show the div.

And we don't have to use a link button, you can do 100% near same code, and use a plain asp.net button, or even say a image button.

And since we want to call some code behind say to get some data to fill out the div, that same code can also hide/show the div also.