从控制器返回Json数据以查看ASP.NET MVC

Returning Json Data From Controller to View ASP.NET MVC

本文关键字：ASP NET MVC 控制器 返回 Json 数据      更新时间：2023-09-26

正如标题所说，我正在尝试在验证后将Json消息从控制器返回到视图。

我做了一个断点，我知道代码是从控制器端运行的，我的JavaScript现在成功地调用了ActionResult。如何在视图中显示该消息？

有两个按钮，戳入和戳出。如果用户戳入两次，它应该会得到一条消息，与戳出相同。我有两个ActionResults是相同的，除了一些消息和字符串更改。

控制器：

[HttpPost]
    public ActionResult CreateStamp(Stamping stampingmodel)
    {
        var validateMsg = "";
        stampingmodel.Timestamp = DateTime.Now;
        stampingmodel.StampingType = "in";
        if (stampingmodel.User == null || ModelState.IsValid)
        {
            var idValidated = db.Users.Find(model.UserId);
            if (idValidated != null)
            {
                var stamp =
                    db.Stampings.Where(s => s.UserId == stampingmodel.UserId)
                        .OrderByDescending(s => s.Timestamp)
                        .FirstOrDefault();
                if (stamp.StampingType == stampingmodel.StampingType)
                {
                    if (stampingmodel.StampingType == "in")
                    {
                        validateMsg = "Stamped Twice In A Row!";
                    }
                }
                else
                {
                    if (stampingmodel.StampingType == "in")
                    {
                        validateMsg = "Stamped In, Welcome.";
                    }
                }
            }
            db.Stampings.Add(stampingmodel);
            db.SaveChanges();
        }
        return Json(new {Message = validateMsg });

JavaScript:

$(document).ready(function () {
$("#stampInBtn").click(function () {
    var userId = $("#userId").val();
    $.ajax({
        url: "ComeAndGo/CreateStamp",
        type: "POST",
        dataType: "json",
        data: {
            userId: userId,
        }
    });
});

视图：

    <input type="text" id="idUser" class="form-control" />
    <br />
    <input type="submit" value="IN" id="stampInBtn" />

当然，我在View中有更多的代码；div、头、正文、标题和脚本。但这可能有点无关紧要。

我应该怎么做才能成功地显示这些消息？

谨致问候。

为ajax调用添加一个成功函数

$.ajax({
  url: "ComeAndGo/CreateStamp",
  type: "POST",
  dataType: "json",
  data: { userId: userId },
  success: function(data) {
    // data contains the value returned by the server
    console.log(data);
  }     
});

因此，如果控制器返回

return Json("This is a message");

data的值将为"这是一条消息"。请注意，返回值可以是复杂类型或部分视图

您得到的是$("#userId")的值，但您的输入具有idUser的id。

尝试输入：

<input type="text" id="userId" class="form-control" />

此外，提供您的Stamping模型结构也是一个好主意，因为您似乎只在帖子中传递用户id，而不传递其他信息。

更改您的javascript代码如下：

            $(document).ready(function () {
        $("#stampInBtn").click(function () {
        var userId = $("#userId").val();
            $.ajax({
                url: "ComeAndGo/CreateStamp",
                type: "POST",
                dataType: "json",
                data: {
                    userId: userId,
                },
                success: function(data) {
                var objData= jQuery.parseJSON(data);
                alert(objData.Message );
                },
                error: function (request, status, error) {
                    alert(request.responseText);
                }
            });
        });
    });
相关文章：