无法将 JSON 结果传递回视图

Cannot Pass JSON Result back to View

本文关键字：视图 结果 JSON      更新时间：2023-09-26

>我有以下HTML来显示一些消息

...
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <span id="fail_message" class="label label-danger"></span>
        <span id="success_message" class="label label-success"></span>
    </div>
</div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="button" value="Invite User" class="btn btn-primary"/>
    </div>
</div>
...

按下按钮时触发的脚本是 

<script>
    $(function () {
        $("input[type=button]").click(function () {
            var data_email = $('#email').val();
            var data_product = $('#product option:selected').text();
            $.ajax({
                url: 'Tools/SendInvite',
                type: 'POST',
                data: { email: data_email, product: data_product },
                success: function (result_success, result_failure) {
                    $('#fail_message').val(result_failure);
                    $('#success_message').val(result_success);
                }
            });
        });
    });
</script>

然后在我的控制器中，我有 

[AllowAnonymous]
public async Task<ActionResult> SendInvite(
    string email, string product)
{
    // Check if admin.
    ApplicationUser user = null;
    if (ModelState.IsValid)
    {
        user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
        if (user.IsAdmin != null && (bool)user.IsAdmin)
        {
            string key = String.Empty;
            string subMsg = String.Empty;
            var accessDB = new AccessHashesDbContext();
            switch (product) { /* do stuff */ }
            // Send email.
            try
            {
                await Helpers.SendEmailAsync(new List<string>() { email }, null, "my msg string" );
                result = String.Format("Invitation successfully sent to '"{0}'"", email);
                return Json(new {
                        result_success = result,
                        result_failure = String.Empty
                    },
                    JsonRequestBehavior.AllowGet);
            }
            catch (Exception)
            {
                result = String.Format("Invitation to '"{0}'" failed", email);
                return Json(new {
                        result_success = String.Empty,
                        result_failure = result
                    },
                    JsonRequestBehavior.AllowGet);
            }
        }
    }
    return Json(new {
            result_success = String.Empty,
            result_failure ="Invite Failure"
        },
        JsonRequestBehavior.AllowGet);
}

控制器方法触发，发送电子邮件并返回视图，但不显示我的消息。如何让标签显示我的正确文本？

谢谢你的时间。

注意。我见过

  1. ASP.NET 返回 JSON 或部分 html 的 MVC 控制器操作
  2. 如何在jQuery中设置文本框值

但这些对我没有帮助。

JavaScript 需要是这样的：

<script>
    $(function () {
        $("input[type=button]").click(function () {
            var data_email = $('#email').val();
            var data_product = $('#product option:selected').text();
            $.ajax({
                url: 'Tools/SendInvite',
                type: 'POST',
                data: { email: data_email, product: data_product },
                success: function (result) {
                    $('#fail_message').html(result.result_failure);
                    $('#success_message').html(result.result_success);
                }
            });
        });
    });
</script>

请注意，成功函数显示只传入一个参数：result 。

这是因为在您的操作中，您返回以下内容：

return Json(new {
            result_success = String.Empty,
            result_failure ="Invite Failure"
        },
        JsonRequestBehavior.AllowGet);

你创建一个新对象：new {}然后用一些字段填充它。因此，当它被发送回页面时，将有一个对象(result(具有两个属性。显然，返回的对象不叫result，但这是在函数上下文中赋予它的名称。

最后，由于您使用的是return Json因此还应确保 Action 方法返回的类型JsonResult而不是ActionResult 。在幕后 ASP.NET 团队扩展了ActionResult但他们也设置了一些属性，如内容类型，以确保网页知道如何处理响应。此外，它还使用 JavaScript 序列化器来正确序列化对象。参考： http://aspnetwebstack.codeplex.com/SourceControl/latest#src/System.Web.Mvc/JsonResult.cs

public async Task<JsonResult> SendInvite(
    string email, string product)
{

如果您想使用牛顿软件 JSON.net 我会创建实现它的自定义结果。

通过以下方式更改您的成功方法

success: function (result) {
    $('#fail_message').html(result.result_failure);
    $('#success_message').html(result.result_success);
}

服务器返回一个 JSON 对象。

尝试将 ajax 成功处理程序更改为类似

  function (result) {
       $('#fail_message').html(result.result_failure);
       $('#success_message').html(result.result_success);
   }

处理程序应接收一个 JSON 对象，其中包含您在操作中指定的 2 个属性。

你必须使用它

<script>
    $(function () {
        $("input[type=button]").click(function () {
            var data_email = $('#email').val();
            var data_product = $('#product option:selected').text();
            $.ajax({
                url: 'Tools/SendInvite',
                type: 'POST',
                data: { email: data_email, product: data_product },
                success: function (result) {
                         $('#fail_message').html(result.result_failure);
                         $('#success_message').html(result.result_success);
                }
            });
        });
    });
</script>

$('#fail_message').html(result.result_failure);
$('#success_message').html(result.result_success);
相关文章：