0

这是我的 ASP.NET GridView控件的定义:

<asp:GridView ID="gvReq" runat="server" AllowSorting="True" DataKeyNames="Req_ID,Approved,supervisor_login,Revised,Requested_Login,HasDocs" DataSourceID="objdsReq" AllowPaging="True" PageSize="30" >

在这个 GridView 中,我有以下模板字段:

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

OnClientClick="showConfirm(this); return false;"方法如下所示。我并没有声称了解所有这些,因为我是从我的另一篇文章中获得的(ASP.NET GridView ItemTemplate LinkBut​​ton 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>

我确实对我在网上找到的 JavaScript 有足够的了解,可以正确地包含这两个 HTML 标记以使其正常工作:

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

既然我已经完成了所有工作,我意识到最终结果仍然缺乏。

我的弹出窗口中显示的只是一个模糊的确认对话框。

截屏

我正在单击删除行条目,但我错误地单击了错误的行!

我不知道这一点,所以我继续单击OK确认,然后在我逐步执行代码时注意到错误的行被删除了。

我开始研究如何在我的对话框中包含其他数据,这使我看到了文章c#,asp.net 与 js 的交互,并使用了这段代码:

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

(我把它贴在这里,以防万一该网站消失)

所以,似乎我应该能够向我的确认对话框发送一些更具描述性的信息,比如行的ID或其他东西。

有没有办法,使用我展示的代码,有人可以告诉我如何将更多数据传递到我的确认对话框?

我应该提取字符串信息并将其发送到我的对话框还是应该/可以 JavaScript 使用该source参数来访问我需要的信息?

在那个 GridView 控件中,

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

更新:

嗨戴夫!

在查看源代码中,ID 列具有以下标题:

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

第一个表行的ID=70701,值70701在该行的另外两个表详细信息单元格中:

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

所以,我想要的 ID 值只是一个<td>字段。

我将如何编辑它以包含该值?

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

4

1 回答 1

1
function showConfirm(source) {
    ...
  }

您可以更改此方法的签名以获取其他参数,例如 itemName,并且您可以修改 js 以更改弹出窗口显示的文本(您需要稍微更改 html,但没什么大不了的)。您是否检查了源代码以查看其中包含的内容?它可能已经包含您要显示的信息。

编辑

玩这个,并有一个快速的方法来完成这个。我正在使用 jquery。

  1. 将弹出 html 更改为 span 将包含附加数据的类似或相似:


    <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. 使用如下所示的 data=itemName="" 属性更新网格中的按钮。请注意我的数据类 id 名为“DataClass”,并且有一个名为“Name”的属性。您可以更改它以匹配您的数据:


    <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. 最后,更改您的函数以将此值注入弹出窗口:


    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    
    }

当然,这远非一个优雅的解决方案,但它确实有效。

于 2013-07-12T19:43:17.923 回答