Question

我正在和我拉扯头发的东西摔跤。我在这个网站上找到的其他解决方案让我接近一个答案，但我仍然遇到了绊脚石。我正在使用ASP.Net，C＃和JS开发电子商务门户。我目前正在使用转发器来填充“产品”部分，以显示来自DataTable的产品信息（它本身是从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接近它的方式是：

将转发器切换到列表视图
使用命令
在按钮上添加命令参数为id
在ItemCommand中检查命令是否为AddItemToCart并调用该页面的相应方法。

<强>更新：

如果您需要在不重新加载页面的情况下触发命令，请将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);

  }
}

}

使用动态创建的内容将参数传递给JS函数

2 个答案: