将参数传递给具有动态创建内容的JS函数

Question

我正在努力使我拔出头发。 我在此站点上找到的其他解决方案使我接近答案，但我一直遇到绊脚石。 我正在使用ASP.Net，C＃和JS的电子商务门户。 我目前正在通过使用中继器显示“数据表”（其本身是从SQL查询中提取）中的产品信息来填充“产品”部分。

我的aspx脚本如下所示：

<div class="contentContainer">
       <asp:Repeater ID="productCatalog" runat="server">
            <ItemTemplate>
                <div class="productContainer <%#DataBinder.Eval(Container.DataItem, "pType")%>" data-category="<%#DataBinder.Eval(Container.DataItem, "pType")%>">
                    <img src="<%#DataBinder.Eval(Container.DataItem, "pImage")%>" class="productImage">
                    <h3 class="pName"><%#DataBinder.Eval(Container.DataItem, "pName")%></h3>
                    <p class="pDesc"><%#DataBinder.Eval(Container.DataItem, "pDesc")%></p>

                    <table class="productTable">
                        <tr>
                            <td class="price"><%#MoneyFormat((decimal)DataBinder.Eval(Container.DataItem, "price"))%></td>
                            <td><asp:Button class="btn btn-info" ID="Button1" runat="server" Text="Add to Cart" onClientClick='AddNewItem(<%#DataBinder.Eval(Container.DataItem, "pID")%>);return false;'/></td>
                        </tr>
                    </table>
                </div>
            </ItemTemplate>
        </asp:Repeater>
</div>

和我的JS函数：

<script type="text/javascript">
function AddNewItem(myPID) {

    PageMethods.AddToCart_Command(myPID);

    function onSucess(result) {
        alert(result);
    }

    function onError(result) {
        alert('Cannot process your request at the moment, please try later.');
    }
}

后面的代码：

[WebMethod]
public static void AddToCart_Command(int myPID)
{
    //...stuff. Not where the problem is 
}

我的问题源于aspx文件中的这一行，特别是onClientClick部分：

<asp:Button class="btn btn-info" ID="Button1" runat="server" Text="Add to Cart" onClientClick='AddNewItem(<%#DataBinder.Eval(Container.DataItem, "pID")%>);return false;'/>

“ pID”是一个整数值，与SQL数据库中的键相对应。 我已经尝试过将int硬编码为AddNewItem（）方法的参数，并且该函数可以正常工作。 问题出在我尝试从中继器数据本身传递参数时。 如果在参数周围使用双引号，则会出现“服务器标记格式不正确”错误。 如果我使用单引号，则页面构建没有错误，但是单击按钮时未调用该函数。

请注意，单击“添加到购物车”按钮后，请不要重新加载页面，这一点很重要。 不要直接对按钮进行硬编码也很重要。

如何将此参数从中继器数据传递到JS函数？

任何帮助都将不胜感激！

---

编辑：作为将pID作为参数传递给函数的一种替代方法，我尝试使用jQuery直接从HTML元素中获取pID作为属性。 不幸的是，该方法使用适当的ID捕获元素的第一个实例，并且只会返回该实例。 在这种情况下，第一产品由中继器生产。

Answer 1

我只需更改按钮类型就能解决此问题。 这是最后一行：

<button class="btn btn-info" id="Button2" onclick="AddNewItem( <%#DataBinder.Eval(Container.DataItem, "pID")%> ); return false;"/>Add to Cart</button>

首先，我从不需要asp按钮； 这太过复杂了。 我可以使用上面的方法来调用JS方法。 我猜是吻！

Answer 2

当您的解决方案有效时，我敢打赌，您有一个页面Web方法，该方法无法访问特定于该页面的任何实例，这是一个问题，因为它只是静态方法。

ASP.NET的处理方式是：

1. 将中继器切换到列表视图
2. 使用命令添加按钮
3. 在按钮上添加命令参数作为id的值
4. 在ItemCommand中检查命令是否为AddItemToCart并调用页面的相应方法。

更新 ：

5. 如果您需要在不重新加载页面的情况下触发命令，请将UpdatePanel放在页面上，然后将ListView放在UpdatePanel内。 这样，单击按钮时就会发生PartialPostBack。

看例子

  <asp:ListView runat="server" 
      ID="lvCatalog"
      OnItemCommand="OnItemCommand" DataMember='pID'
      >
      <LayoutTemplate>

          <div id="itemPlaceholder" runat="server"></div>

      </LayoutTemplate>
      <ItemTemplate>
        <div runat="server">
          <div>
            <asp:Label runat="server" ID="NameLabel" Text='<%#Eval("pName") %>' />
          </div>
          <div>
            <asp:LinkButton runat="server" 
              ID="lbAddToCart" 
              Text="Add To Cart" 
              CommandName="AddToCart" 
              CommandArgument='<%# Eval("pID") %>' />
          </div>
        </div>
      </ItemTemplate>
    </asp:ListView>

和

protected void OnItemCommand(object sender, ListViewCommandEventArgs e)
{
 if (String.Equals(e.CommandName, "AddToCart"))
 {

  ListViewDataItem dataItem = (ListViewDataItem)e.Item;
  string pID = 
    lvCatalog.DataKeys[dataItem.DisplayIndex].Value.ToString();

  AddItemToCart(e.CommandArgument.ToString())

  // or 
  AddItemToCart(pID);

  }
}

}