Greetings, I hope this message finds you well. I have a help page on my website that includes an FAQ section (content served from a Web Service) and a button that displays a partial view. The partial view collects help request information and submits it to the Server using a standard form submission method.

My goal is to integrate AJAX functionality to display a success message without reloading the page once the information has been successfully saved.

I've attempted to return JSON data from the Controller and then use AJAX to update the page with the success message. However, this approach replaces the entire page contents with just the JSON data!

If you could provide some guidance or suggest a better approach on how to achieve this, I would greatly appreciate your assistance.

Below is a snippet of my Controller Action:

  [AllowAnonymous]
        public ActionResult Index()
        {
            FAQModel.Questions = Service.PopulateFAQQuestions();
            FAQModel.Answers = Service.PopulateFAQAnswers();

            return View("Index", FAQModel);
        }

        [AllowAnonymous]
        [HttpPost]
        public async Task<ActionResult> SendHelpRequest(RequestViewModel model)
        {
            model.RequestDate = DateTime.Now;
            await Service.SendHelpRequestAsync(model.Name, model.Details, model.RequestDate, model.Email, model.ContactNumber);

            return RedirectToAction("Index");
        }

And here's an excerpt from my Partial View:

@model MyProject.Models.RequestViewModel

<script>
    function Success() {
        var Success = document.getElementById("SuccessText");

       Success.innerHTML = "Request Submitted";
    }

    function Failure() {
        var Failure = document.getElementById("SuccessText");

        Failure.innerHTML = "Request Failed";
    }
</script>

@using (Ajax.BeginForm("SendHelpRequest", "Help", null, new AjaxOptions
    {
        HttpMethod = "POST",
        OnSuccess = "Success",
        OnFailure = "Failure",
        UpdateTargetId = "SuccessText"
    }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: none !important;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Support Request</h3>
            </div>

            <div class="container-fluid">
                <div class="form-group">
                    @Html.LabelFor(m => m.Name, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10" style="border-top: none !important;">
                        @Html.TextBoxFor(m => m.Name, new { @class = "form-control", @id = "txtEmail", @placeholder = "E.G: Fred Flintstone" })
                        @Html.ValidationMessageFor(m => m.Name, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", @placeholder = "E.G: example@example.com" })
                        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.Details, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.TextAreaFor(m => m.Details, new { @class = "form-control", @rows = "10", @style = "max-width:100%; max-height:100%; resize:none", @placeholder = "Please Enter Details (max 500 Characters)", @maxlength = "500" })
                        @Html.ValidationMessageFor(m => m.Details, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(m => m.ContactNumber, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.ContactNumber, new { @class = "form-control", @rows = "10", @placeholder = "E.G:00000000000", @maxlength = "15" })
                        @Html.ValidationMessageFor(m => m.ContactNumber, "", new { @class = "text-danger" })

                    </div>
                </div>

                <div class="col-md-12">
                    <div class="modal-footer">
                        <div align="left" class="col-md-6">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        <div align="right" class="col-md-6">
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    }

<div id =" SuccessText"></div>