Invoking a controller's action by button in View without redirecting to any view

问题

I wanted to add a button to my ASP .NET MVC WebApplication's view which will invoke a method:

 public void  UpdateDatabase(int personId, int surveyId) {
          //updating,modifying database
        }

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.

Just like you click a button with no listener associated with it.

I have tried

 <p> @Html.ActionLink("Update database", "UpdateDatabase", new { personId = Model.Item1.Id, surveyId = survey.Id }, new { @class = "btn btn-default" })</p>

but I am redirected to site:

http://localhost:17697/Person/SubmitSurvey?personId=6&surveyId=6

which is empty.

I would like to achieve only invoking UpdateDatabase method.

EDIT:

EDIT2:

The view looks like this:

@using WebApplication2.Models
@model   System.Tuple<Person, List<Survey>>

<hr />
<h1>Surveys</h1>

<input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" />
@*<p>
        Number of Surveys: @Html.DisplayFor(x => Model.Item2.Count)
    </p>*@

@{int i = 1;}
@foreach (var survey in Model.Item2) {
    using (Html.BeginForm()) {
        <h2>Survey @(i)</h2>
        <p />
        @Html.EditorFor(x => survey.Questions)
        <p> @Html.ActionLink("Submit", "SubmitSurvey", new { personId = Model.Item1.Id, surveyId = survey.Id }, new { @class = "btn btn-default" })</p>
        <button id='mybutton'>Click Me</button>
        <script>
            $('#mybutton').click(function(){
                $.post("Person/SubmitSurvey", { personId: {@Model.Item1.Id }, surveyId: {@survey.Id } }, function (data) {
                    alert('updated');
                });
            });
        </script>
    }
    i++;
    <hr style="background-color:rgb(126, 126, 126);height: 5px" />
}
<hr />

and the controllers action:

PersonController:

 public void SubmitSurvey(int personId, int surveyId) {
            System.Diagnostics.Debug.WriteLine("TEXT");
        }

and the result after clicking the button:

EDIT 3

My RouteConfig:

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

}

EDIT 4

I tried also this:

@using WebApplication2.Models
@model   System.Tuple<Person, List<Survey>>

<hr />
<h1>Surveys</h1>

<input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" />
@*<p>
        Number of Surveys: @Html.DisplayFor(x => Model.Item2.Count)
    </p>*@

@{int i = 1;}
@foreach (var survey in Model.Item2) {
    using (Html.BeginForm()) {
        <h2>Survey @(i)</h2>
        <p />
        @Html.EditorFor(x => survey.Questions)
        <p> @Html.ActionLink("Submit", "SubmitSurvey", new { personId = Model.Item1.Id, surveyId = survey.Id }, new { @class = "btn btn-default" })</p>
        <script>
            function BtnOnclick1() {
                $.ajax({
                    type: 'POST',
                    url: '@Url.Content("~/Person/SubmitSurvey")',
                    data: {
                        personId: '@Model.Item1.Id',
                        surveyId: '@survey.Id'
                    },
                    success: function (data) {

                    }
                });
            }
        </script>
        <input type="button" value="Save" onclick="javascript:BtnOnclick1();" />

    }
    i++;
    <hr style="background-color:rgb(126, 126, 126);height: 5px" />
}
<hr />

but I get runtime exception: `There is no definition of „BtnOnclick1”.

Unhandled exception at line 47, column 12 in script block

0x800a1391 - Błąd czasu wykonywania kodu JavaScript: Brak definicji „BtnOnclick1”

回答1:

Have you tried jQuery's $.get (http://api.jquery.com/jquery.get/) or $.post (http://api.jquery.com/jquery.post/). After including reference to jQuery, you can do something like this:

<button id='mybutton'>Click Me</button>

<script>
$('#mybutton').click(function(){
    $.post( "mysite/UpdateDatabase", {personId: "@Model.Item1.Id", surveyId: "@survey.Id"}, function( data ) {
        alert('updated');
    });
});
</script>

来源：https://stackoverflow.com/questions/25557278/invoking-a-controllers-action-by-button-in-view-without-redirecting-to-any-view