javascript - 如何调用具有动态数据的onclick jquery函数，Asp.net Mvc5

Question

我正在使用 for-each 循环加载包，从代码中可以清楚地看出......

<div class="row">             
  @foreach(var items in ViewBag.packages)
  {  
    <div class="col-md-2">
      <div class="price-table-area">
        <div class="fixed-img sec-bg5"></div>
        <ul class="proce-table">
          <li class="price-prdct"><i>$</i>@items.NewPrice<i>/m</i></li>
          <input type="submit" class="submit" value="SignUp" onclick="packageSelect(@ViewBag.PackageId)">
        </ul>
      </div>
    </div>
  }
</div>

我在点击时调用函数packageSelect，它调用对 Controller 操作的ajax调用。可以看出，我正在将 @viewbag.PackageId 参数传递给函数。

Controller 操作

public ActionResult SelectPackage(int PackageId)
{
    Session["Package"] = PackageId;
    return this.Json(string.Empty); ;
}

脚本

<script>
  function packageSelect(PackageId) {
    $.ajax({
      type: "POST",
      url: '@Url.Action("SelectPackage", "Home")',
      dataType: "JSon",
      data: { "PackageId": PackageId },
      success: function (data) {
        console.log(data);
        // $("#SecondInfo").focus({ scrollTop: "0px" });
        $('html, body').animate({ scrollTop: $('#contact-us').offset().top }, 'slow');
      },
      error: console.log("it did not work"),
    });
  };
</script>

这样打电话正确吗？问题是函数没有被调用。

Answer 1

严肃地说，我认为这不是一个好方法。

相反，你应该更清楚地对待它-

使用data属性。

<button class="submit" data-id="@items.PackageId">SignUp</button>

然后-

$('button').on('click',function(){
    var id = $(this).data('id'); //attribute's value
    packageSelect(id); //passing the value to function
});

附注- 另外我想你正在迭代 id，如果是，那么你不应该将它用作 -

@ViewBag.PackageId

它应该是(如果它迭代并且不会保持不变)- @items.PackageId