title: Invoking a controller's action by button in View without redirecting to any view
body: <p>I wanted to add a button to my ASP .NET MVC WebApplication's view which will invoke a method:</p>
  
  <pre><code> public void  UpdateDatabase(int personId, int surveyId) {
            //updating,modifying database
          }
  </code></pre>
  
  <p>but besides that nothing at all will happen so user will not see any visible changes. The user will not be redirected, visible content of the site will not change, page will not be reloaded. </p>
  
  <p>Just like you click a button with no listener associated with it.</p>
  
  <p>I have tried </p>
  
  <pre><code> &lt;p&gt; @Html.ActionLink("Update database", "UpdateDatabase", new { personId = Model.Item1.Id, surveyId = survey.Id }, new { @class = "btn btn-default" })&lt;/p&gt;
  </code></pre>
  
  <p>but I am redirected to site: </p>
  
  <pre><code>http://localhost:17697/Person/SubmitSurvey?personId=6&amp;surveyId=6
  </code></pre>
  
  <p>which is empty.</p>
  
  <p>I would like to achieve only invoking <code>UpdateDatabase</code> method.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Z22SA.png" alt="enter image description here"></p>
  
  <p>EDIT2:</p>
  
  <p>The view looks like this:</p>
  
  <pre><code>@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;p&gt; @Html.ActionLink("Submit", "SubmitSurvey", new { personId = Model.Item1.Id, surveyId = survey.Id }, new { @class = "btn btn-default" })&lt;/p&gt;
          &lt;button id='mybutton'&gt;Click Me&lt;/button&gt;
          &lt;script&gt;
              $('#mybutton').click(function(){
                  $.post("Person/SubmitSurvey", { personId: {@Model.Item1.Id }, surveyId: {@survey.Id } }, function (data) {
                      alert('updated');
                  });
              });
          &lt;/script&gt;
      }
      i++;
      &lt;hr style="background-color:rgb(126, 126, 126);height: 5px" /&gt;
  }
  &lt;hr /&gt;
  </code></pre>
  
  <p>and the controllers action:</p>
  
  <p>PersonController:</p>
  
  <pre><code> public void SubmitSurvey(int personId, int surveyId) {
              System.Diagnostics.Debug.WriteLine("TEXT");
          }
  </code></pre>
  
  <p>and the result after clicking the button:</p>
  
  <p><img src="https://i.stack.imgur.com/6RM23.png" alt="enter image description here"></p>
  
  <p><strong>EDIT 3</strong></p>
  
  <p>My <code>RouteConfig</code>:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using System.Web.Routing;
  
  namespace WebApplication2 {
      public class RouteConfig {
          public static void RegisterRoutes(RouteCollection routes) {
              routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  
              routes.MapRoute(
                  name: "Default",
                  url: "{controller}/{action}/{id}",
                  defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
              );
          }
      }
  </code></pre>
  
  <h2>    }</h2>
  
  <h2>EDIT 4</h2>
  
  <p>I tried also this:</p>
  
  <pre><code>@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;p&gt; @Html.ActionLink("Submit", "SubmitSurvey", new { personId = Model.Item1.Id, surveyId = survey.Id }, new { @class = "btn btn-default" })&lt;/p&gt;
          &lt;script&gt;
              function BtnOnclick1() {
                  $.ajax({
                      type: 'POST',
                      url: '@Url.Content("~/Person/SubmitSurvey")',
                      data: {
                          personId: '@Model.Item1.Id',
                          surveyId: '@survey.Id'
                      },
                      success: function (data) {
  
                      }
                  });
              }
          &lt;/script&gt;
          &lt;input type="button" value="Save" onclick="javascript:BtnOnclick1();" /&gt;
  
      }
      i++;
      &lt;hr style="background-color:rgb(126, 126, 126);height: 5px" /&gt;
  }
  &lt;hr /&gt;
  </code></pre>
  
  <p>but I get runtime exception: `There is no definition of „BtnOnclick1”.</p>
  
  <blockquote>
    <p>Unhandled exception at line 47, column 12 in script block</p>
    
    <p>0x800a1391 - Błąd czasu wykonywania kodu JavaScript: Brak definicji „BtnOnclick1”</p>
  </blockquote>