在剃须刀页面中从 javascript 调用模型函数

Question

是否可以像这样在剃刀页面中调用模型函数（该函数永远不会命中）：

<input id="btnWork" type="submit" value="Work" onclick="writeLog("add to log");" />

但是，我的 razor 页面中有这个，它仅在页面加载时触发该功能：

{
<script>
     function writeLog(msg)
     {
         @IndexModel.logHolder.Add("testing 123");
     }
</script>
}

Answer 1

不，您不能直接从 JavaScript 调用 server-side 方法。您可以做的是使用 JavaScript 向调用 server-side 方法的页面处理程序方法发出 HTTP 请求。通常，您会 use a named handler method for this

向响应 GET 请求并采用字符串作为参数的 PageModel 添加一个简单的命名处理程序。处理程序的名称是 Add 即没有 OnGet、OnPost 部分的方法名称：

public void OnGetAdd(string msg)
{
    // processing goes here        
}

然后将以下内容添加到您的 Razor 页面本身：

<input id="btnWork" type="submit" value="Work" onclick="writeLog('add to log');" />

@section scripts{
    <script>
    function writeLog(msg){
        fetch(`?handler=Add&msg=${msg}`);
    }
    </script> 
}

这使用 Fetch API 发出 HTTP 请求，在查询字符串中指定处理程序以及 msg 参数。当您单击该按钮时，您应该看到处理程序方法上的断点已命中，并且 msg 参数是您在 onclick 事件中指定的任何内容，即本例中的“添加到日志”。

Answer 2

我同意。同时，我也做了一些测试工作，我也分享一下。

我们不能直接从javascript调用C#函数，因为javascript在客户端执行，C#函数在服务器端执行。所以我们需要用其他方式称呼它，比如 AJAX.

在模型中定义您的函数并通过 AJAX 调用调用它。

JS代码：

<script>
   function writeLog(msg) {
      $.ajax({
        url: '?handler=WriteLog&msg='+msg,
        success: function (data) {
            alert(data);
        },
        error: function (error) {
          alert("Error: " + error);
        }
      })
    }
</script>

型号功能代码：

public IActionResult OnGetWriteLog(string msg)
{
    return new JsonResult(msg); 
}

测试结果：

在剃须刀页面中从 javascript 调用模型函数

Call Model function from javascript in razor page

razor

asp.net-core

razor-pages