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

Posted 2023-04-13

【中文标题】使用 Ajax 将数据从视图传递到控制器

【英文标题】：Pass data from View to Controller using Ajax

【发布时间】：2020-06-08 16:28:21

【问题描述】：

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

我基本上想要做的是使用 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 名称没问题，一切正常，应该可以工作。

感谢任何输入。

谢谢

【参考方案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);

【讨论】：

我是 havina 500 内部错误。而且，console.log(TokenModel) 的输出是：RegisteredToken: Promise : "cG64xMXawQ.............

控制器中的 TokenModel var 上的错误是“对象引用未设置为对象的实例”。

所以messaging.getToken()是一个异步函数，你有没有试过用await这个方法把参数作为字符串结果传递。

不，我没有。我怎么能等待 getToken() 的结果？由于它位于代码的 javascript 部分，这让我感到困惑（你的观点很有道理）。

好的，请在上面的答案中找到更新的信息。