使用 Ajax 将数据从视图传递到控制器

Question

我知道这个问题已经在这里被问过数千次了；我已经在关注我读过的很多东西，但我仍然无法让它发挥作用。

我基本上想要做的是使用 Ajax 将 FCM 令牌（我使用基于 Layout.cshtml 的脚本获得）发送到控制器。但是，该值始终为空。即使遵循正确的名称，我也无法在控制器上获取令牌数据。到目前为止一切顺利，这就是我所做的。

HTML 页面：

    @using RazorEngine.Templating
@inherits TemplateBase

@{
    Layout = "..\\Layout.cshtml";
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script>
    function submitForm() {
        var currToken = messaging.getToken();
        var TokenModel = new Object();
        TokenModel.RegisteredToken = currToken;
        $.ajax(
            {
                type: "POST", //HTTP POST Method
                url: "Notification/Register", // Controller/View 
                dataType: 'json',                
                data: JSON.stringify({
                    Token: TokenModel                    
                },
                success: function (status) {
                    console.log('Send');
                },
                error: function () {
                    console.log('something went wrong - debug it!');
                }
            });
    }
</script>
<div id="token"></div> 
<input type="button" value="Click" onclick="submitForm()" />

控制器（我将所有内容发送到注册操作）

public class NotificationController : BaseController
    {
        [HttpPost]
        [AllowAnonymous]
        public async Task<IHttpActionResult> Register(TokenModel Token)
        {

            //TokenModel currtoken = Newtonsoft.Json.JsonConvert.DeserializeObject<TokenModel>(myToken);


            string token = "agamenon";
            string secondToken = "nosferatu";
            var execCtx = this.ExecutionContext;

            var pushNotifService = execCtx.GetExtension<IPushNotificationService>(); 



            var notificationTitle = "tituloX" + new Random().Next(1000, 5000);
            var notificationBody = "someContent" + new Random().Next(91000, 95000);
            var msg = new PushNotificationMessage()
            {
                Body = notificationBody,
                Title = notificationTitle
            };
            await pushNotifService.SendMessageAsync(msg, new string[] { token,secondToken });
            //var info = await pushNotifService.GetInfoAsync(token);
            //var invalidInfo = await pushNotifService.GetInfoAsync(secondToken);
            return View();
        }

还有 TokenModel 类：

public class TokenModel
{
    public string RegisteredToken { get; set; }
}

此站点不遵循 MVC 模型，它是一个 WebAPI。我做错了什么，我无法将数据发送到控制器？ AFAIK 名称没问题，一切正常，应该可以工作。

感谢任何输入。

谢谢

Answer 1

你能在这行 TokenModel 之后显示输出吗

TokenModel.RegisteredToken = currToken;

例如：

console.log(TokenModel);.

尽管如此，我认为数据参数中发生的事情是错误的。而你的数据对象应该以这种方式形成，因为数据需要是一个有效的对象：

Token: JSON.stringify(TokenModel)

data: { Token: JSON.stringify(TokenModel), },

---

更新：

似乎messaging.getToken() 正在调用一个异步函数，因此要获得正确的值，您可以使用thenables 等待承诺完成或async/await。

使用thenables 的脚本示例：

function submitForm() {
    messaging.getToken().then(value => {
    const TokenModel = {
      RegisteredToken = value
    }
    $.ajax({
            type: "POST", //HTTP POST Method
            url: "Notification/Register", // Controller/View 
            dataType: 'json',                
            data: JSON.stringify({
                Token: TokenModel                    
            }),
            success: function (status) {
                console.log('Send');
            },
            error: function () {
                console.log('something went wrong - debug it!');
            }
        });
    }, error => {
      console.log('messaging.getToken() fails - debug it!');
      throw new Error(error);
    }    
}

await/async使用示例：

submitForm = async () => {
try {
    const token = await messaging.getToken();
    const TokenModel = {
    RegisteredToken = token
    };
    $.ajax({
        type: "POST", //HTTP POST Method
        url: "Notification/Register", // Controller/View 
        dataType: 'json',                
        data: JSON.stringify({
            Token: TokenModel                    
        }),
        success: function (status) {
            console.log('Send');
        },
        error: function () {
            console.log('something went wrong - debug it!');
        }
    });
} catch(error) {
    console.log('Invalid token');
    throw new Error(error);
}}