How can I show ViewBag message in html part after implementing AJAX result in ASP.NET MVC?

Question

I have an issue about showing a ViewBag message with respect to the result of a Contract function. I wrote some codes to cope with this process but I cannot show the message in the HTML part. What code should I write in the success part of the AJAX process?

Here is my Html part shown below.

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

Here is my Contract function method shown below.

[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();
}

Here is my ajax part shown below.

<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>

Answer 1

Here is my solution shoen below.

html part.

<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>