title: How to call onclick jquery function having dynamic data, Asp.net Mvc5
body: <p>I am loading packages using for-each loop, clearly from code.....</p>
  
  <pre><code>&lt;div class="row"&gt;             
    @foreach(var items in ViewBag.packages)
    {  
      &lt;div class="col-md-2"&gt;
        &lt;div class="price-table-area"&gt;
          &lt;div class="fixed-img sec-bg5"&gt;&lt;/div&gt;
          &lt;ul class="proce-table"&gt;
            &lt;li class="price-prdct"&gt;&lt;i&gt;$&lt;/i&gt;@items.NewPrice&lt;i&gt;/m&lt;/i&gt;&lt;/li&gt;
            &lt;input type="submit" class="submit" value="SignUp" onclick="packageSelect(@ViewBag.PackageId)"&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    }
  &lt;/div&gt;
  </code></pre>
  
  <p>I am calling function <code>packageSelect</code> on click which invokes ajax call to controller action. As can be seen that I am passing <code>@viewbag.PackageId</code> parameter to function.</p>
  
  <p>Controller action</p>
  
  <pre><code>public ActionResult SelectPackage(int PackageId)
  {
      Session["Package"] = PackageId;
      return this.Json(string.Empty); ;
  }
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>&lt;script&gt;
    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"),
      });
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>Is it right way to call like that? The problem is function not called.</p>