title: Associating script with a button in ASP .NET MVC Razor View
body: <p>I have a button and a script:</p>
  
  <pre><code>   &lt;script&gt;
     function SubmitClick () {
          var pid = $(this).data('personid');
          var sid = $(this).data('surveyid');
          var url = '@Url.Action("SubmitSurvey", "Person")';
          $.post(url, { personid: pid, surveyid: sid }, function (data) {
              alert('updated');
          });
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>When I click the button the script is not run/called/invoked. How to make this button invoke this script?</p>
  
  <p>Full view <code>_Survey1.html</code> <strong>this is PartialView</strong>:</p>
  
  <pre><code>&lt;script&gt;
     function SubmitClick () {
          var pid = $(this).data('personid');
          var sid = $(this).data('surveyid');
          var url = '@Url.Action("SubmitSurvey", "Person")';
          $.post(url, { personid: pid, surveyid: sid }, function (data) {
              alert('updated');
          });
      };
  &lt;/script&gt;
  
  @using WebApplication2.Models
  @model   System.Tuple&lt;Person, List&lt;Survey&gt;&gt;
  
  &lt;hr /&gt;
  &lt;h1&gt;Surveys&lt;/h1&gt;
  &lt;input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" /&gt;
  @*&lt;p&gt;
          Number of Surveys: @Html.DisplayFor(x =&gt; Model.Item2.Count)
      &lt;/p&gt;*@
  
  @{int i = 1;}
  @foreach (var survey in Model.Item2) {
      using (Html.BeginForm()) {
          &lt;h2&gt;Survey @(i)&lt;/h2&gt;
          &lt;p /&gt;
          @Html.EditorFor(x =&gt; survey.Questions)
  
  
          &lt;button class='mybutton' type='button' data-personid="@Model.Item1.Id" data-surveyid="@survey.Id" onclick="javascript:SubmitClick()"&gt;Click Me&lt;/button&gt;
      }
      i++;
      &lt;hr style="background-color:rgb(126, 126, 126);height: 5px" /&gt;
  }
  &lt;hr /&gt;
  </code></pre>
  
  <p>The <code>SubmitSurvey</code> method in <code>PersonController</code>:</p>
  
  <pre><code> public void SubmitSurvey(int personId, int surveyId) {
          System.Diagnostics.Debug.WriteLine("UPDATING DATABASE");
  
      }
  </code></pre>
  
  <p><strong>The result</strong> is that after clicking the button I get error saying that <code>SubmitClick</code>haven't been found:</p>
  
  <p><img src="https://i.stack.imgur.com/dNw8h.png" alt="enter image description here"></p>
  
  <p>Details.cshtml (the _Survey1.cshtml) is rendered inside of it.</p>
  
  <pre><code>@model WebApplication2.Models.Person
  
  @{
      ViewBag.Title = "Details";
  }
  
  &lt;script&gt;
      function BtnOnclick() {
          $.ajax({
              type: 'POST',
              url: '@Url.Content("~/Person/_Survey1")',
              data: {
                  id: '@Model.Id'
              },
              success: function (data) {
                  $('#divpopup').css("display", "block");
                  $('#btnExpand').css("display", "none");
                  $('#divpopup')[0].innerHTML = data;
              }
          });
      }
      function CollapseDiv() {
          $('#divpopup').css("display", "none");
          $('#btnExpand').css("display", "block");
      }
  
  
  
  
  &lt;/script&gt;
  &lt;h2&gt;Details&lt;/h2&gt;
  
  &lt;div&gt;
      &lt;h4&gt;Person&lt;/h4&gt;
      &lt;hr /&gt;
      &lt;dl class="dl-horizontal"&gt;
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.FirstName)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.FirstName)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.LastName)
          &lt;/dt&gt;
  
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.LastName)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.CellNumber)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.CellNumber)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.SecondaryPhoneNumber)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.SecondaryPhoneNumber)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.Address)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.Address)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.BirthDate)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.BirthDate)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.Pesel)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.Pesel)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.Notes)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.Notes)
          &lt;/dd&gt;
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.Status)
          &lt;/dt&gt;
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.Status.Name)
          &lt;/dd&gt;
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.PersonalDataProcessing)
          &lt;/dt&gt;
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.PersonalDataProcessing)
          &lt;/dd&gt;
      &lt;/dl&gt;
  &lt;/div&gt;
  &lt;!--BEGIN--&gt;
  &lt;p&gt;
      &lt;input type="button" value="Expand" id="btnExpand"
             onclick="javascript:BtnOnclick();" /&gt;
  &lt;/p&gt;
  &lt;div id="divpopup" style="display:none"&gt;
  
  &lt;/div&gt;
  &lt;!--END--&gt;
  
  &lt;p&gt;@Html.ActionLink("Call Cell Phone", "Call", new { id = Model.Id, number = Model.CellNumber }, new { @class = "btn btn-default" })&lt;/p&gt;
  &lt;p&gt; @Html.ActionLink("Call Client's Secondary Number »", "Call", new { id = Model.Id, number = Model.SecondaryPhoneNumber }, new { @class = "btn btn-default" })&lt;/p&gt;
  &lt;p&gt;
      @Html.ActionLink("Edit", "Edit", new { id = Model.Id })
      @Html.ActionLink("Back to List", "Index")
  &lt;/p&gt;
  </code></pre>