Greetings,
I'm kinda new to ASP.NET so I'm unsure as to how to proceed with accomplishing this task. I have a webpage that contains a GridView and controls associated to that such as Add, Issue Equipment, Edit, Delete. What I'm trying to do is when I click on a cell on the gridview the row will be selected then when I click Edit, the modal popup for editting will display with the values and details of that gridview item that Ive selected. How do I pass that gridview item and its values to that Edit modal popup?
I use a script to bring up my modal popup:
<script>
settings = {
//Model Popup
objModalPopupBtn: ".modalButton",
objModalCloseBtn: ".overlay, .closeBtn",
objModalDataAttr: "data-popup"
}
$(settings.objModalPopupBtn).bind("click", function () {
if ($(this).attr(settings.objModalDataAttr)) {
var strDataPopupName = $(this).attr(settings.objModalDataAttr);
//Fade In Modal Pop Up
$(".overlay, #" + strDataPopupName).fadeIn();
}
});
//On clicking the modal background
$(settings.objModalCloseBtn).bind("click", function () {
$(".modal").fadeOut();
});
</script>Here's my gridview and the controls:
<div style="margin-left: 500px; margin-bottom: 20px; margin-top: 20px">
<a href="#" class="modalButton" data-popup="popupOne">Add New Staff</a>
<a href="#" class="modalButton" onclick="lbtnIssue_click" id="lbtnIssue" data-popup="popupTwo">Issue Staff Equipment</a>
</div>
<!-- End of GridView Controls -->
<asp:GridView ID="gvPerson" CssClass="EU_DataTable" runat="server" AutoGenerateColumns="False" DataKeyNames="SempID" DataSourceID="SqlDataSource2" AllowPaging="True" PageSize="6" AllowSorting="True" OnRowDataBound="gvPerson_RowDataBound">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="ID" HeaderText="SempID" InsertVisible="False" ReadOnly="True" SortExpression="SempID" />
<asp:BoundField DataField="Name" HeaderText="EmpName" SortExpression="EmpName" />
<asp:BoundField DataField="PDNo" HeaderText="PDNo" SortExpression="PDNo" />
<asp:BoundField DataField="Position" HeaderText="Position" SortExpression="Position" />
<asp:BoundField DataField="DateHired" HeaderText="DateHired" SortExpression="DateHired" />
<asp:BoundField DataField="ContactNo" HeaderText="ContactNo" SortExpression="ContactNo" />
<asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
<asp:BoundField DataField="EmergencyContactNo" HeaderText="EmergencyContactNo" SortExpression="EmergencyContactNo" />
<asp:BoundField DataField="DateQuitTerminated" HeaderText="DateQuitTerminated" SortExpression="DateQuitTerminated" />
<asp:BoundField DataField="ContactPerson" HeaderText="ContactPerson" SortExpression="ContactPerson" />
<asp:BoundField DataField="Remarks" HeaderText="Remarks" SortExpression="Remarks" />
</Columns>
<SelectedRowStyle BackColor="#54a1e5" Font-Bold="True" ForeColor="#CCFF99" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource11" runat="server" ConnectionString="<%$ ConnectionStrings:DBConnectionString %>" SelectCommand="SELECT [ID], [Name], [PDNo], [Position], [DateHired], [ContactNo], [Email], [EmergencyContactNo], [DateQuitTerminated], [ContactPerson], [Remarks] FROM [Personnel]"></asp:SqlDataSource>
</div>This is the modal popup:
<section class="modal modalWindow" id="popupOne" style="margin-top: 100px; height: 590px; border: solid">
<section class="modalWrapper">
<h2>Edit Staff </h2>
<hr />
<div>
<div class="form-row">
<div class="form-group col-md-2" style="margin-right: 150px">
Name:
<asp:TextBox ID="tbEmpName" class="form-control" runat="server" Style="margin-right: 15px" Width="210px"></asp:TextBox>
</div>
<div class="form-group col-md-2">
Position:
<asp:TextBox ID="tbPosition" class="form-control" runat="server" Style="margin-right: 15px" Width="173px"></asp:TextBox>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2" style="margin-right: 100px">
Badge No:
<asp:TextBox ID="tbPDNo" class="form-control" runat="server" Style="margin-right: 15px" Width="168px"></asp:TextBox>
</div>
<div class="form-group col-md-2">
Hire Date:
<asp:TextBox ID="tbDateHired" class="form-control" runat="server" Style="margin-right: 15px" TextMode="Date" Width="180px"></asp:TextBox>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2" style="margin-right: 100px">
Contact #:
<asp:TextBox ID="tbContactNo" class="form-control" runat="server" Width="150px" Style="margin-right: 100px"></asp:TextBox>
</div>
<div class="form-group col-md-2">
Email:
<asp:TextBox ID="tbEmail" class="form-control" runat="server" Width="210px" Style="margin-right: 15px"></asp:TextBox>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2" style="margin-right: 100px">
Emergency#:
<asp:TextBox ID="tbEContactNo" class="form-control" runat="server" Width="143px" Style="margin-right: 15px"></asp:TextBox>
</div>
<div class="form-group col-md-2">
Contact:
<asp:TextBox ID="tbContactP" class="form-control" runat="server" Width="170px" Style="margin-right: 15px"></asp:TextBox>
</div>
</div>
Remarks:
<asp:TextBox ID="tbRemarks" class="form-control" runat="server" Width="473px" Style="margin-right: 15px; margin-bottom: 15px"></asp:TextBox>
<asp:LinkButton ID="lbtnSubmit" runat="server" OnClick="lbtnSubmit_Click">Submit</asp:LinkButton>
<asp:LinkButton ID="lbtnCancel" runat="server" OnClick="lbtnCancel_Click">Cancel</asp:LinkButton>
</div>
</section>
<a class="closeBtn">CLOSE X</a>
</section>