在 ASP.NET MVC 中实现 AJAX 结果后，如何在 html 部分显示 ViewBag 消息？答案

【问题标题】：How can I show ViewBag message in html part after implementing AJAX result in ASP.NET MVC?在 ASP.NET MVC 中实现 AJAX 结果后，如何在 html 部分显示 ViewBag 消息？
【发布时间】：2021-07-10 00:10:46
【问题描述】：

我有一个关于显示与合同函数结果有关的 ViewBag 消息的问题。我写了一些代码来处理这个过程，但我无法在 HTML 部分显示消息。 AJAX流程的成功部分应该写什么代码？

这是我的 Html 部分，如下所示。

<div class="my-3">
        <div class="error-message">@ViewBag.Error</div>
        <div class="sent-message">@ViewBag.Success</div>
</div>

下面是我的 Contract 函数方法。

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Contract(string nameSurname = null, string email = null, string subject = null, string message = null)
        {

        if (nameSurname != null && email != null) 
        {
            SmtpClient smtpClient = new SmtpClient("smtp.gmail.com");
            smtpClient.Port = 587;

            smtpClient.Credentials = new System.Net.NetworkCredential("gmail address", "gmail address password");
            // smtpClient.UseDefaultCredentials = true; // uncomment if you don't want to use the network credentials
            smtpClient.DeliveryMethod = SmtpDeliveryMethod.Network;
            smtpClient.EnableSsl = true;

            MailMessage mail = new MailMessage();
            mail.Subject = subject;
            mail.IsBodyHtml = true;
            mail.Body = message;

            //Setting From , To and CC
            mail.From = new MailAddress(email);
            mail.To.Add(new MailAddress("gmail address"));

            smtpClient.Send(mail);
            ViewBag.Success = "Success";
        }
        else
        {
            ViewBag.Error = "Error";
        }
        return View();
}

这是我的 ajax 部分，如下所示。

<script type="text/javascript">

        $(document).ready(function () {

            $("#submitButton").click(function () {

                var nameSurname = $("#nameSurname").val();
                var email = $("#email").val();
                var subject = $("#subject").val();
                var message = $("#message").val();

                var form = $('#contactForm');
                var token = $('input[name="__RequestVerificationToken"]', form).val();

                $.ajax({
                    url: '/Home/Contract/',
                    data: {
                        __RequestVerificationToken: token,
                        nameSurname: nameSurname, email: email, subject: subject, message: message
                    },
                    type: 'POST',
                    success: function (data) {
                        // code
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                       alert('custom message. Error: ' + errorThrown);
                    }
                });
            });
    })

</script>

【问题讨论】：

您正在使用 ajax 并返回视图。除非您从返回的 html 替换视图的某些部分，否则它不会以这种方式工作。

标签： javascript html ajax asp.net-mvc

【解决方案1】：

下面是我的解决方案。

html部分。

<div class="my-3">

                            @if (ViewBag.Success != null)
                            {
                                <div class="alert alert-success" role="alert">
                                    @ViewBag.Success
                                </div>
                            }

                            @if (ViewBag.Error != null)
                            {
                                <div class="alert alert-danger" role="alert">
                                    @ViewBag.Error
                                </div>
                            }

                        </div>

【讨论】：