如何在成功提交表单后更新我的部分视图？

Question

First of all I do apologize if this has been covered elsewhere, basically I have a help page on my website, consisting of an FAQ page (the content of which, is being served from a Web Service), and also a button which displays a partial view, this partial view takes help request information and sends it to the Server as per your "bog standard" form submission.

However, I would like not to leave the page ,instead preferring to utilize AJAX to display a success message once the information has been saved.

I have already tried returning JSON from the Controller, and retrieving that through AJAX to display on the page However, this replaces my entire page with only the JSON on it!

I'd really appreciate a push in the right direction with this, if at all possible.

Here's 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 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>

Answer 1

Use the Insertmode "Replace" on your Ajax.BeginForm() then return a partial view that inherits the success message.

This will replace the the "SuccessText" since the TargetId is set to this. Make sure you have added the "jquery.unobtrusive-ajax.min.js" JS library otherwise it will not work!

Answer 2

I actually managed to solve this problem myself, what happened was that my code was actually working fine; however I wasn't doing anything with the results of my AJAX call!

@using (Ajax.BeginForm("SendHelpRequest", "Help", null, new AjaxOptions
    {
        HttpMethod = "POST",
        OnSuccess = "Success",
        OnFailure = "Failure",
        UpdateTargetId = "SuccessText",
        InsertionMode = InsertionMode.Replace

    }))

My success method

function Success(result) {
      alert( result);


    }