Как я могу обновить свой Partial View при успешном представлении формы?

Question

Прежде всего, я извиняюсь, если это было рассмотрено в другом месте, в основном у меня есть страница справки на моем веб-сайте, состоящая из страницы часто задаваемых вопросов (содержимое которой подается из веб-службы), а также кнопку, которая отображает частичный вид, это частичное представление принимает информацию запроса справки и отправляет ее на Сервер в соответствии с вашим представлением формы «bog standard».

Однако я бы хотел не покидать страницу, вместо этого предпочитаю использовать AJAX для отображения успешного сообщения после сохранения информации.

Я уже пытался вернуть JSON из контроллера и получить его через AJAX для отображения на странице. Однако это заменяет мою всю страницу только JSON!

Я очень благодарен за толкание в правильном направлении, если это вообще возможно.

Вот мой контроллер действий

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

и мой Частичный вид

@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

Мне действительно удалось решить эту проблему самостоятельно, произошло то, что мой код действительно работал нормально; однако я ничего не делал с результатами моего звонка AJAX!

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

    })) 

Мой метод успеха

function Success(result) { 
     alert(result); 


    } 

Answer 2

Используйте InsertMode «Заменить» на Ajax.BeginForm(), а затем возвращать частичный вид, который наследуется сообщение об успехе.

Это заменит «SuccessText», так как TargetId установлен на это. Убедитесь, что вы добавили JS-библиотеку jquery.unobtrusive-ajax.min.js, иначе это не сработает!