一起获得JavaScript和ASP.NET交互

时间：2013-07-12 19:34:21

标签： javascript asp.net

以下是我的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 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>

我完全理解我在网上找到的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" />

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

弹出窗口中显示的所有内容都是一个模糊的确认对话框。

screenshot

我点击删除一个行条目，但我错误地点击了错误的行！

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

我开始研究如何在我的对话框中包含其他数据，这让我看到了文章c #, asp.net interaction with 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 等。

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

我应该提取并将字符串信息发送到我的对话框，还是应该/可以使用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" />

更新

嗨，戴夫！

在View Source中，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;”

1 个答案:

答案 0 :(得分：1)

function showConfirm(source) {
    ...
  }

您可以更改此方法的签名以获取其他参数，例如itemName，你可以修改js来改变弹出窗口显示的文本（你需要稍微更改你的html，但没有大问题）。您是否检查过来源以查看其中包含的内容？它可能已经包含您要显示的信息。

修改

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

  1. 将弹出式html更改为如此或类似，其中span将包含其他数据：
    2. 

    <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”的属性。您可以更改此项以匹配您的数据：
      2. 

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

    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    
    }

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

相关问题
最新问题