Describing the ASP.NET GridView control:
<asp:GridView ID="gvReq" runat="server" AllowSorting="True" DataKeyNames="Req_ID,Approved,supervisor_login,Revised,Requested_Login,HasDocs" DataSourceID="objdsReq" AllowPaging="True" PageSize="30" >
Within this GridView, there is a template field defined as follows:
<asp:TemplateField>
<ItemStyle HorizontalAlign="Center" Width="50px"></ItemStyle>
<ItemTemplate>
<asp:Button ID="btnDelete" runat="server" CommandArgument='<%# Container.DataItemIndex %>' ForeColor="Red" CommandName="DeleteReq" OnClientClick="showConfirm(this); return false;" Text="Delete" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
The JavaScript function for
OnClientClick="showConfirm(this); return false;"<script type="text/javascript">
var _source; // tracks the delete button for the row to be removed
var _popup; // keeps track of the popup div
function showConfirm(source) {
this._source = source;
this._popup = $find('mdlPopup');
this._popup.show();
}
function okClick() {
this._popup.hide();
__doPostBack(this._source.name, '');
}
function cancelClick() {
this._popup.hide();
this._source = null;
this._popup = null;
}
</script>
To enhance the confirmation dialog, additional HTML tags were added to display more information:
<div id="popupDiv" runat="server" align="center" class="confirm" style="display: none">
<img align="absmiddle" src="Images/important.png" /><b>CONFIRM:</b> Delete this item?<br />
<asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
<asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
</div>
<ajaxToolkit:ModalPopupExtender BehaviorID="mdlPopup" runat="server" TargetControlID="popupDiv" PopupControlID="popupDiv" OkControlID="btnOk" OnOkScript="okClick();" CancelControlID="btnNo" OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground" />
Despite having the basic functionality in place, it became evident that the confirmation dialog lacked specificity.
Upon inadvertently deleting the wrong entry due to lack of clear identification,
I proceeded with the deletion action and observed my mistake after reviewing the code execution.
Seeking an improved solution led me to an article on c#, asp.net, and javascript interaction:
ASP.NET binding c #:
<% # Bind ("column name")%>
<% # Eval ("column name")%>
The <a href/> binding c #:
<A href = '<% # Eval ("column name ... aspx? Key = value & key = {0}")%>' />
The OnClientClick embedded js function (c # parameter is not passed):
OnClientClick = "js function (parameter)"
The OnClientClick embedded js function (pass a c # parameters):
The OnClientClick = '<% # Eval ("column name", "js function ({0})")%>'>
The OnClientClick = '<% # Eval ("column name", "javascript: js function (\" {0} \ ")")%>'>
The OnClientClick embedded js function (passing two or more c # parameters):
OnClientClick = '<% # String.Format ("js function ({0}, {1}", Eval ("column name"), Eval ("column name"))%>'
c # embedded js function:
Response.Write ("<script> js built-in function ('parameter') </ script>");
Page.ClientScript.RegisterStartupScript (this.GetType (), "", "js-defined functions ('parameter')", true);
js call back method:
var result = "<% = method name (shape parameter)%>";
public method type the name of the method (parameter) {..}
(Included here as a precaution)
Hence, the next step involved passing specific data to the Confirmation Dialog Box, such as the row's unique ID.
Requesting guidance on enhancing the code for passing additional data to the Confirmation Dialog Box using the existing structure.
Should the necessary information be extracted and transmitted to the Dialog Box, or can the JavaScript leverage the source parameter to access the required data?
Within the GridView control:
<asp:BoundField DataField="Req_ID" HeaderText="ID" SortExpression="Req_ID" />
<asp:BoundField DataField="Vendor_ID" HeaderText="Ven ID" SortExpression="Vendor_ID" />
<asp:BoundField DataField="Vendor_Name" HeaderText="Vendor" SortExpression="Vendor_Name" />
UPDATE:
Examining the View Source, the ID column header is represented as:
<th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvReq','Sort$Req_ID')">ID</a></th>
The first table row contains ID=70701, and this value appears in two other detail cells within the same row:
<tr onmouseover="this.style.backgroundColor='LightGray'" onmouseout="this.style.backgroundColor='White'">
<td>70701</td>
<td>206101</td>
<td>EBM PAPST, INC</td>
<td>6/26/2013</td>
<td>58045 - HOT PO</td>
<td>REPAIRS / db</td>
<td align="center" style="color:Blue;width:50px;">
<a onclick="javascript:popup_window=window.open('RequisitionDetails.aspx?Req_id=70701','ViewReqDetails','width=950,height=610,top=75,left=100,status=no, resizable= no, scrollbars=yes, toolbar= no,location= no, menubar=no,titlebar=no');popup_window.focus();" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvReq','Select$0')" style="color:Blue;">Details</a>
</td>
<td align="center" style="width:50px;">
<input type="submit" name="ctl00$ContentPlaceHolder1$gvReq$ctl02$btnDelete" value="Delete" onclick="showConfirm(this); return false;" id="ctl00_ContentPlaceHolder1_gvReq_ctl02_btnDelete" style="color:Red;" />
</td>
</tr>
The desired ID value resides in a simple <td> tag.
Seeking assistance on incorporating this value into the existing setup.
OnClientClick="showConfirm(this); return false;"