通过View中的按钮调用控制器的操作,而不重定向到任何视图

时间:2014-08-28 20:16:33

标签: c# .net asp.net-mvc razor asp.net-mvc-5.1

我想在ASP .NET MVC WebApplication的视图中添加一个按钮来调用方法:

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

但除此之外什么都不会发生,因此用户不会看到任何明显的变化。用户不会被重定向,网站的可见内容不会改变,页面也不会被重新加载。

就像点击没有与之关联的监听器的按钮一样。

我试过了

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

但我被重定向到网站:

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

是空的。

我想实现只调用UpdateDatabase方法。

修改

enter image description here

EDIT2:

视图如下所示:

@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 />

和控制器操作:

PersonController:

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

和点击按钮后的结果:

enter image description here

编辑3

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

}

编辑4

我也尝试了这个:

@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 />

但我得到运行时异常:`没有“BtnOnclick1”的定义。

  

第47行第12行未处理的异常

     

0x800a1391 - Błądczasuwykonywania kodu JavaScript:Brak definicji“BtnOnclick1”

1 个答案:

答案 0 :(得分:2)

您是否尝试过jQuery的$ .get(http://api.jquery.com/jquery.get/)或$ .post(http://api.jquery.com/jquery.post/)。在引用jQuery之后,您可以执行以下操作:

<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>