如何在不刷新网页的情况下调用控制器的方法?

时间:2019-06-28 13:36:06

标签: javascript c# asp.net-core

我想知道是否有一种方法可以在不刷新整个页面的情况下调用控制器的方法吗?

我的问题是我有一个如下所示的Web表单:

class Setting extends StatefulWidget {
   int count;
   Setting(this.count);

   @override
   SettingStateBuilder createState() => SettingStateBuilder(count);
}

class SettingStateBuilder extends State<Setting> {
   int count;
   SettingStateBuilder(this.count);

  @override
  Widget build(BuildContext context) {
    return new Container( 
       new Text(count.toString());
       ....
       onPressed: () => setState(() => increamenting(context))),
    );
  }
  increamenting(context){ count+=1;}
}

它在我的Home控制器中调用AskDataGridHistByDay(string datefilter)方法,如下所示:

<form asp-action="AskDataGridHistByDay" method="post">
    <div class="row">
        <div class="col-4">
            <input type="text" name="datefilter" id="datefilter" />
         </div>
         <div class="col-7"></div>
         <div class="form-check col-auto">
             <button type="submit" class="btn btn-primary">Calculer</button>
         </div>
    </div>
</form>

我知道我要返回视图,因此必须刷新页面索引,但是我无法创建不返回任何内容的方法,因此我不得不告诉他返回视图,因为我没有cshtml文件名为AskDataGridHistByDay。

您知道将参数发送到控制器的另一种方式,以便它不会调用a或刷新我的视图吗? Javascript中还有一种从控制器调用方法的方法吗?

2 个答案:

答案 0 :(得分:1)

是的,可以。您可以对控制器操作进行AJAX调用。您只需要注意可以使用操作方法的URL以及返回的数据。如果您的操作返回的是MVC应用程序的JSON结果,那就更好了。如果这是Web API,则默认情况下它将返回JSON。

推荐官方Jquery page for AJAX

答案 1 :(得分:0)

请按照以下步骤操作演示:

  1. 控制器操作

    [HttpPost]
    public IActionResult AskDataGridHistByDay(string datefilter)
    {
        return Ok("Success");
    }
    
  2. 查看

    <form>
        <div class="row">
            <div class="col-4">
                <input type="text" name="datefilter" id="datefilter" />
            </div>
            <div class="col-7"></div>
            <div class="form-check col-auto">
                <input id="AskDataGridHistByDay" class="btn btn-primary" type="button" value="Calculer" />
            </div>
        </div>
    </form>
    @section Scripts{ 
        <script type="text/javascript">
            $(document).ready(function () {
                $("#AskDataGridHistByDay").click(function () {
                    $.ajax({
                        type: 'POST',
                        url: '/Home/AskDataGridHistByDay',
                        data: { datefilter: $("#datefilter").val() },
                        success: function (result) {
                            alert(result);
                        }
                    });
                });                  
            })
        </script>
    }