一起实现JavaScript和ASP.NET交互

Question

Here's the definition of my 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" >

In this GridView, I have the following template field:

<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>

That OnClientClick="showConfirm(this); return false;" method is shown below. I don't claim to understand all of it because I got it from another post of mine ( ASP.NET GridView ItemTemplate LinkButton Support for RowCommand AFTER JavaScript Confirmation ).

<script type="text/javascript">
  var _source; // keeps track of the delete button for the row that is going to be removed
  var _popup; // keep track of the popup div
  function showConfirm(source) {
    this._source = source;
    this._popup = $find('mdlPopup');
    this._popup.show(); //  find the confirm ModalPopup and show it    
  }
  function okClick() {
    this._popup.hide(); // find the confirm ModalPopup and hide it    
    __doPostBack(this._source.name, ''); // use the cached button as the postback source
  }
  function cancelClick() {
    this._popup.hide(); // find the confirm ModalPopup and hide it 
    this._source = null; // clear the event source
    this._popup = null;
  }
</script>

I did understand enough about that JavaScript that I found online to correctly include these two HTML tags to get it all to work:

<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" />

Now that I have that all working, I realize the end result is still lacking.

All that displays in my pop-up window is a vague confirmation dialog.

I was clicking to delete a row entry, but I mistakenly clicked the wrong row!

I did not know this, so I proceeded to click OK to confirm, then noticed the wrong row getting deleted as I stepped through my code.

I started looking at how to include additional data in my dialog box, which led me to the article c #, asp.net interaction with js with this little bit of code:

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})")%>'> 
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) {..}

(I pasted it here, just in case that site disappears)

So, it seems like I should be able to send some more descriptive information to my Confirmation Dialog Box, like the row's ID or something.

Is there a way, using the code I have shown, that someone can show me how to pass more data to my Confirmation Dialog Box?

Should I extract and send the String information to my Dialog Box or should/could the JavaScript use the source parameter to access the information I need?

In that 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:

Hi Dave!

In the View Source, the ID column has this header:

<th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvReq','Sort$Req_ID')">ID</a></th>

The first table row has ID=70701 , and value 70701 is in two other table detail cells of that row:

<tr onmouseover="this.style.backgroundColor='LightGray'" onmouseout="this.style.backgroundColor='White'">
  <td style="color:Blue;">
    <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>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;">
    <span id="ctl00_ContentPlaceHolder1_gvReq_ctl02_lblApprove" style="color:Black;">Approved</span>
  </td>
  <td align="center" style="color:Blue;width:50px;">
    <a onclick="javascript:popup_window=window.open('ReqReport.aspx?Req_id=70701','ViewReqDetails','width=810,height=620,top=75,left=75,status=no, resizable= no, scrollbars=no, toolbar= no,location= no, menubar=no,titlebar=no');popup_window.focus();" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvReq','Select$0')" style="color:Blue;">Print</a>
  </td>
  <td align="center" style="color:Blue;width:50px;">
    <a onclick="javascript:popup_window=window.open('ReqDocs.aspx?Req_id=70701','ViewReqDetails','width=550,height=500,top=75,left=75,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;">Docs</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>

So, the ID value I want is just a <td> field.

How would I edit this to include that value?

OnClientClick="showConfirm(this); return false;"

Answer 1

function showConfirm(source) {
    ...
  }

You can change the signature of this method to take additional parameters, eg itemName, and you could modify the js to alter the text that the popup is displaying (you would need to change your html a little, but no biggie). Have you inspected the source to see what it contains? It might already have the information you want to display.

EDIT

Played with this, and have a quick way to get this done. I'm using jquery.

1. Change the popup html to be like so or similarm where the span is going to contain the additional data:

    <div id="popupDiv" runat="server" align="center" class="confirm" style="display: none; background-color: white">
      <img align="absmiddle" src="Images/important.png" /><b>CONFIRM:</b> Delete <span id="popupDescription"></span>?<br />
      <asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
      <asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
    </div>

1. Update the button in your grid with a data=itemName="" attribute like below. Note my data class id called 'DataClass', and has a property called 'Name'. You can change this to match your data:

    <asp:Button ID="btnDelete" runat="server" CommandArgument='<%# Container.DataItemIndex %>' ForeColor="Red" CommandName="DeleteReq" data-itemName="<%# ((DataClass)Container.DataItem).Name %>" OnClientClick="showConfirm(this); return false;" Text="Delete" />

1. Finally, change your function to inject this value into the popup:

    function showConfirm(source) {
        //I use jquery to get the data-itemName attribute value and set it on the span
        var sourceElement = $(source);
        var additionalInfo = sourceElement.attr('data-itemName');
        var descriptionElement = $('#popupDescription');
        descriptionElement.text(additionalInfo);
        this._source = source;
        this._popup = $find('mdlPopup');
        this._popup.show(); //  find the confirm ModalPopup and show it    
    }

Granted, this is far from an elegant solution, but it works.