获取JavaScript和ASP.NET一起互动 [英] Getting JavaScript and ASP.NET Interaction Together

查看：363
本文介绍了获取JavaScript和ASP.NET一起互动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

下面是我的ASP.NET的定义 GridView控件控制：

 ＆LT; ASP：GridView控件ID =gvReq=服务器AllowSorting =真的DataKeyNames =REQ_ID，批准，supervisor_login，修订，Requested_Login，HasDocs的DataSourceID = objdsReqAllowPaging =真每页=30＆GT;

在此GridView的，我有以下的模板字段：

 ＆LT; ASP：的TemplateField＆GT;
  ＆LT; ItemStyle Horizo​​ntalAlign =中心WIDTH =50像素＆GT;＆LT; / ItemStyle＆GT;
  ＆LT;＆ItemTemplate中GT;
    ＆LT; ASP：按钮的ID =btnDelete=服务器CommandArgument ='＆LT;％＃Container.DataItemIndex％GT;'前景色=红的CommandName =DeleteReq的OnClientClick =showConfirm（本）;返回false;文本=删除/＆GT;
  ＆LT; / ItemTemplate中＆GT;
  ＆LT; ItemStyle Horizo​​ntalAlign =中心/＆GT;
＆LT; / ASP：的TemplateField＆GT;

这是的OnClientClick =showConfirm（本）;返回false;如下所示方法。我不主张明白这一切，因为我从我的另一篇文章（ ASP.NET的GridView ItemTemplate中的LinkBut​​ton支持RowCommand后得到了它JavaScript的确认）。

 ＆LT;脚本类型=文/ JavaScript的＆GT;
  VAR _source; //跟踪删除按钮的对于将要被删除的行
  VAR _popup; //跟踪弹出的div
  功能showConfirm（源）{
    this._source =来源;
    this._popup = $找到（'mdlPopup'）;
    this._popup.show（）; //找到确认ModalPopup并显示它
  }
  功能okClick（）{
    this._popup.hide（）; //找到确认ModalPopup和隐藏
    __doPostBack（this._source.name，''）; //使用缓存按钮为回传源
  }
  功能cancelClick（）{
    this._popup.hide（）; //找到确认ModalPopup和隐藏
    this._source = NULL; //清除事件源
    this._popup = NULL;
  }
＆LT; / SCRIPT＆GT;

我也充分理解有关的JavaScript我在网上找到正确包括这两个HTML标记来得到这一切的工作：

 ＆LT; D​​IV ID =popupDiv=服务器ALIGN =中心类=确认的风格=显示：无＆GT;
  ＆LT; IMG ALIGN =absmiddleSRC =图像/ important.png/＆GT;＆LT; B＆GT; CONFIRM：LT; / B＆GT;删除此项目＆lt; BR /＆GT;
  ＆LT; ASP：按钮的ID =btnOk=服务器文本=是WIDTH =50像素/＆GT;
  ＆LT; ASP：按钮的ID =btnN​​o=服务器文本=否WIDTH =50像素/＆GT;
＆LT; / DIV＆GT;
＆LT; ajaxToolkit：ModalPopupExtender BehaviorID =mdlPopup=服务器的TargetControlID =popupDivPopupControlID =popupDivOkControlID =btnOkOnOkScript =okClick（）; CancelControlID =btnN​​oOnCancelScript =cancelClick（）; BackgroundCssClass =modalBackground/＆GT;

现在，我有所有的工作，我知道最终的结果仍然缺乏。

所有这一切显示在我的弹出窗口是一个模糊的确认对话框。

我点击删除行项目，但我误按错了行！

我不知道这一点，所以我接着点击确定来确认，然后发现错了行，因为我通过我的code踩得到删除。

我开始考虑如何为包括我的对话框，这使我的文章 C＃中的其他数据，

：与code的这一点点JS asp.net互动

  ASP.NET绑定C＃：
＆LT;％＃绑定（列名）％GT;
＆LT;％＃的eval（列名）％GT;的＆lt; A HREF /＆GT;结合C＃：
＆LT; A HREF ='＆LT;％＃的eval（列名... ASPX键=值＆放大器;关键= {0}）％＆GT;' /＆GT;该嵌入式的OnClientClick js函数（C＃参数不通过）：
的OnClientClick =js函数（参数）该嵌入式的OnClientClick js函数（通过一个C＃参数）：
该的OnClientClick ='＆LT;％＃的eval（列名，js函数（{0}））％＆GT;'＆GT;
的OnClientClick ='＆LT;％＃的eval（列名，的javascript：js函数（\\{0} \\））％GT;'＆GT;该嵌入式的OnClientClick js函数（传递两个或更多的C＃参数）：
的OnClientClick ='＆LT;％＃的String.Format（js函数（{0}，{1}的eval（列名）的eval（列名））％GT;'C＃中嵌入js函数：
的Response.Write（＆LT;脚本＆GT; js的内置函数（'参数'）LT; / SCRIPT＆gt;中）;
Page.ClientScript.RegisterStartupScript（this.GetType（），，JS定义函数（'参数'），真正的）;JS调用背法：
VAR的结果=＆LT;％=方法名（形状参数）％GT;
公共法输入法（参数）的名称{..}

（我贴在这里，以防万一该网站消失）

所以，好像我应该能够发送一些描述性信息到我的确认对话框中，像该行的 ID 或什么的。

有没有一种方法，使用code我已经表明，有人能告诉我如何更多的数据传递给我的确认对话框？

我应该提取并发送字符串信息到我的对话框或应/可以在JavaScript中使用的源参数来访问我需要的信息？

在该GridView控件，

 ＆LT; ASP：BoundField的数据字段=REQ_ID的HeaderText =IDSORTEX pression =REQ_ID/＆GT;
＆LT; ASP：BoundField的数据字段=VENDOR_ID的HeaderText =法师IDSORTEX pression =VENDOR_ID/＆GT;
＆LT; ASP：BoundField的数据字段=VENDOR_NAME的HeaderText =供应商SORTEX pression =VENDOR_NAME/＆GT;

更新：

喜戴夫！

在查看源代码，ID列有这个头：

 百分位范围=山口＆GT;＆LT;一href=\"javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvReq','Sort$Req_ID')\">ID</a></th>

第一个表行有 ID = 70701 ，和值 70701 是该行的其他两个表详细信息单元格：

 ＆LT; TR的onmouseover =this.style.backgroundColor ='浅灰色'的onmouseout =this.style.backgroundColor ='白色'＆GT;
  ＆LT; TD风格=颜色：蓝色;＆GT;
    ＆LT;一onclick=\"javascript:popup_window=window.open('RequisitionDetails.aspx?Req_id=70701','ViewReqDetails','width=950,height=610,top=75,left=100,status=no,可调整大小=没有，滚动条=是，工具栏=没有，位置=没有，菜单=没有，标题栏=无'）; popup_window.focus（）;HREF =JavaScript的：__ doPostBack（'ctl00 $ ContentPlaceHolder1 $ gvReq'，'选择$ 0'）的风格=颜色：蓝色;＆GT;详情＆LT; / A＆GT;
  ＆LT; / TD＆GT;
  ＆LT; TD＆GT; 70701＆LT; / TD＆GT;
  ＆LT; TD＆GT; 206101＆LT; / TD＆GT;
  ＆LT; TD＆GT; EBM PAPST，INC＆LT; / TD＆GT;
  ＆LT; TD→6 /二千零十三分之二十六＆LT; / TD＆GT;
  ＆LT; TD＆GT; 58045  -  HOT PO＆LT; / TD＆GT;
  ＆LT; TD＆GT;维修/ DB＆LT; / TD＆GT;
  ＆LT; TD ALIGN =中心的风格=颜色：蓝色;宽度：50像素;＆GT;
    ＆LT;跨度ID =ctl00_ContentPlaceHolder1_gvReq_ctl02_lblApprove的风格=颜色：黑色;＆GT;核准＆LT; / SPAN＆GT;
  ＆LT; / TD＆GT;
  ＆LT; TD ALIGN =中心的风格=颜色：蓝色;宽度：50像素;＆GT;
    ＆LT;一onclick=\"javascript:popup_window=window.open('ReqReport.aspx?Req_id=70701','ViewReqDetails','width=810,height=620,top=75,left=75,status=no,可调整大小=没有，滚动条=无，工具栏=没有，位置=没有，菜单=没有，标题栏=无'）; popup_window.focus（）;HREF =JavaScript的：__ doPostBack（'ctl00 $ ContentPlaceHolder1 $ gvReq'，'选择$ 0'）的风格=颜色：蓝色;＆GT;打印和LT; / A＆GT;
  ＆LT; / TD＆GT;
  ＆LT; TD ALIGN =中心的风格=颜色：蓝色;宽度：50像素;＆GT;
    ＆LT;一onclick=\"javascript:popup_window=window.open('ReqDocs.aspx?Req_id=70701','ViewReqDetails','width=550,height=500,top=75,left=75,status=no,可调整大小=没有，滚动条=是，工具栏=没有，位置=没有，菜单=没有，标题栏=无'）; popup_window.focus（）;HREF =JavaScript的：__ doPostBack（'ctl00 $ ContentPlaceHolder1 $ gvReq'，'选择$ 0'）的风格=颜色：蓝色;＆GT;文档和LT; / A＆GT;
  ＆LT; / TD＆GT;
  ＆LT; TD ALIGN =中心的风格=宽度：50像素;＆GT;
    ＆LT;输入类型=提交名称=$ ctl00 $ ContentPlaceHolder1 $ gvReq $ ctl02 btnDeleteVALUE =删除的onclick =showConfirm（本）;返回false; ID =ctl00_ContentPlaceHolder1_gvReq_ctl02_btnDelete的风格=颜色：红色; /＆GT;
  ＆LT; / TD＆GT;
＆LT; / TR＆GT;

因此​​，ID值我想只是一个＆LT; TD方式＆gt; 字段

我将如何修改这包括价值？


  

的OnClientClick =showConfirm（本）;返回false;



解决方案

 函数showConfirm（源）{
    ...
  }

您可以更改此方法的签名采取额外的参数，例如ITEMNAME，你可以修改JS来改变这种弹出窗口显示（你需要改变你的HTML一点，但根本不算什么）的文本。你有没有检查了源代码，看看它所包含的内容？它可能已经有要显示的信息。

修改

玩过这个问题，并有一个快速的方法来完成这件事。我使用jQuery。


  1. 更改弹出HTML是像这样或similarm其中跨度将包含额外的数据：

     ＆LT; D​​IV ID =＆QUOT; popupDiv＆QUOT; RUNAT =＆QUOT;服务器＆QUOT; ALIGN =＆QUOT;中心＆QUOT; CLASS = [确认＆QUOT;风格= QUOT;显示：无;背景色：白＆QUOT;＆GT;
      ＆LT; IMG ALIGN =＆QUOT; absmiddle＆QUOT; SRC =＆QUOT;图片/ important.png＆QUOT; /＆GT;＆LT; B＆GT; CONFIRM：LT; / B＆GT;删除＆LT;跨度ID =＆QUOT; popupDesc​​ription＆QUOT;＆GT;＆LT; / SPAN＆GT;＆LT; BR /＆GT;
      ＆LT; ASP：按钮的ID =＆QUOT; btnOk＆QUOT; RUNAT =＆QUOT;服务器＆QUOT;文字= QUOT; YES接宽度=＆QUOT; 50像素＆QUOT; /＆GT;
      ＆LT; ASP：按钮的ID =＆QUOT; btnNo＆QUOT; RUNAT =＆QUOT;服务器＆QUOT;文字=＆QUOT;否];宽度=＆QUOT; 50像素＆QUOT; /＆GT;
    ＆LT; / DIV＆GT;


  1. 在与数据= ITEMNAME =属性，像下面网格更新的按钮。请注意我的数据类ID称为数据类，并且有一个名为名称属性。您可以更改为匹配您的数据：

     ＆LT; ASP：按钮的ID =＆QUOT; btnDelete＆QUOT; RUNAT =＆QUOT;服务器＆QUOT; CommandArgument ='＆LT;％＃Container.DataItemIndex％GT;'前景色= QUOT;红＆QUOT;的CommandName =＆QUOT; DeleteReq＆QUOT;数据ITEMNAME =＆QUOT;＆LT;％＃（（数据类）的Container.DataItem）.Name点％GT;＆QUOT;的OnClientClick =＆QUOT; showConfirm（本）;返回false;＆QUOT;文字= QUOT;删除＆QUOT; /＆GT;


  1. 最后，改变你的功能，这个值注入弹出：

     功能showConfirm（源）{
        //我使用jQuery来获取数据ITEMNAME属性值，并将其设置在跨度
        VAR sourceElement = $（源）;
        VAR additionalInfo = sourceElement.attr（'数据ITEMNAME'）;
        VAR descriptionElement = $（'＃popupDesc​​ription'）;
        descriptionElement.text（additionalInfo）;
        this._source =来源;
        this._popup = $找到（'mdlPopup'）;
        this._popup.show（）; //找到确认ModalPopup并显示它
    }

当然，这还远远没有一个完美的解决方案，但它工作。

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

解决方案 

function showConfirm(source) {
    ...
  }

You can change the signature of this method to take additional parameters, e.g. 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.

这篇关于获取JavaScript和ASP.NET一起互动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆