如何在不刷新网页的情况下调用控制器的方法？ [复制]答案

【问题标题】：How to call controller's methods without refreshing the web page? [duplicate]如何在不刷新网页的情况下调用控制器的方法？ [复制]
【发布时间】：2019-11-10 11:23:54
【问题描述】：

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

我的问题是我有一个看起来像这样的网络表单：

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

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

[HttpPost]
public IActionResult AskDataGridHistByDay(string datefilter)
{
     //Here I'm setting a static variable with the data from my model
     string datestart = datefilter.Substring(6, 4) + datefilter.Substring(3, 2) + datefilter.Substring(0, 2);
     string dateend = datefilter.Substring(19, 4) + datefilter.Substring(16, 2) + datefilter.Substring(13, 2);
     dataGridHistByDay = WebServiceCall.getInstance().GetDataGridByDayAsync(datestart, dateend).Result;
      return View("Index");
}

我知道我要返回一个视图，所以它必须刷新页面索引，但我不能创建一个什么都不返回的方法，所以我不得不告诉他返回一个视图，因为我没有 cshtml 文件命名为 AskDataGridHistByDay。

您是否知道另一种将参数发送到控制器的方法，这样它就不会调用或刷新我的视图？ Javascript中是否还有一种方法可以从控制器调用方法？

【问题讨论】：

你需要使用ajax
最好不要认为是“调用方法”。这不是它的工作原理。您必须向调用您的操作的路由发出请求。 没有任何事情没有请求。但是，通过使用 AJAX，您可以在不导致页面在浏览器中刷新的情况下发出请求。

标签： javascript c# asp.net-core

【解决方案1】：

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

参考官方Jquery page for AJAX

【讨论】：

【解决方案2】：

按照以下步骤进行工作演示：

控制器动作

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

查看

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

【讨论】：