从 razor 页面中的 javascript 调用模型函数

Question

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

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

但是，我的剃刀页面中有这个，它仅在页面加载时调用该函数：

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

Answer 1

不，您不能直接从 JavaScript 调用服务器端方法。您可以做的是使用 JavaScript 向页面处理程序方法发出 HTTP 请求，该方法会调用服务器端方法。通常，您将为此使用命名处理程序方法

将一个简单的命名处理程序添加到您的 PageModel 中，该处理程序响应 GET 请求并采用字符串作为参数。处理程序的名称是AddOnGet ，即不带,部分的方法名称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 事件中指定的任何内容，即本例中的“添加到日志”。