如何调用具有动态数据的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 ，该函数调用对控制器动作的ajax调用。 可以看出，我正在传递@viewbag.PackageId参数以起作用。

控制器动作

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
});

PS-另外，我想您正在迭代ID，如果是，则不应该将其用作-

@ViewBag.PackageId

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

Answer 2

您输入的是submit类型，将其类型更改为button 。 因此，当您单击按钮时， form将被posted并且onclick不会fire 。

<input type="button" class="submit" value="SignUp"
                            onclick="packageSelect(@ViewBag.PackageId)">

Answer 3

我不认为click以这种方式接受参数。 尝试

<input type="submit" class="submit" value="SignUp"
      onclick="function(){packageSelect(@ViewBag.PackageId);}">

我也同意Mairaj的观点，即type ='submit'是可疑的。

Answer 4

为什么需要将ViewId中的PackageId值传递给函数packageSelect？ 如果您只是使用ajax调用将值传递给contoller动作，那么我认为可以在ViewBag的action方法中直接访问它。

而且，如果要对另一个控制器操作进行ajax调用，则可以使用TempData集合来存储PackageId。