Обновление части сайта с помощью вызова формы Ajax - PullRequest
Новая
       21

Обновление части сайта с помощью вызова формы Ajax

1 голос
/ 09 мая 2019

Я пытаюсь показать сообщение об ошибке, когда возникает ошибка при выполнении запроса формы POST с использованием Ajax (я не хочу, чтобы страница обновлялась).Однако приведенный ниже код не изменяется - он по-прежнему показывает «NO ERRORS», хотя переменная TempData["Error] не равна нулю (она установлена ​​в действии контроллера).Что я делаю не так?

Это мой _Layout.cshtml (я хочу отображать это сообщение об ошибке на каждой странице) 

<!DOCTYPE html>
<html>
@*@RenderBody()*@
<head>
</head>
<body>

<div id="divEmp">

    @if (TempData["Error"] != null)
    {
        <div class="alert alert-danger" role="alert">"Error here"</div>
    }
    else
    {
        <div class="alert alert-success" role="alert">NO ERRORS</div>
    }

</div>

@RenderSection("BodyFill", false)
@RenderBody()
@RenderSection("Scripts", required: false)
</body>
</html>

Это мой контроллер 

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult ShareWorkbook(string emails, string title, string id, string queryBuilderId)
{   
    TempData["Error"] = Res.System_Error_Message;
    return NoContent();
}

Это моя форма (она находится в частичном представлении и вводится во время выполнения на главной странице) 

@using DNAAnalysisCore.Resources
@model DNAAnalysisCore.Models.WorkbookShareModel
@* Partial view that contains the 'Share Workbook dialog' modal *@

<!-- Modal -->
<div onclick="activateShareButtons()" class="modal fade" id="shareFormModal" role="dialog">
    <div class="modal-dialog modal-md">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Share Workbook - @Model.Title</h4>

            </div>

            <form id="partialform" asp-action="ShareWorkbook" asp-controller="Home" method="post" data-ajax="true" data-ajax-update="divEmp">
                <div class="modal-body">
                ...
                </div>
                <div class="modal-footer">
                    <button onclick="hideDialog()" type="submit" class="btn btn-primary">Share</button>
                    <button onclick="activateShareButtons()" id="btnCancelDialog" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

1 Ответ

1 голос
/ 10 мая 2019

Вы можете напрямую изменять HTML-разметки, используя javascript в функции обратного вызова Ajax. Я предполагаю, что в вашем _Layout.cshtml: 

<div id="divEmp">
    <div id="showError" style="display:none;"  class="alert alert-danger" role="alert">"Error here"</div>
    <div id="noError" style="display:none;" class="alert alert-success" role="alert">NO ERRORS</div>
</div>

На вашей странице вы будете использовать ajax для вызова функции на стороне сервера и зависитев ответ вы можете напрямую показать / изменить вышеуказанную область: 

$(function () {
  $.ajax({
      type: "POST",
      url: '/Home/GetJobData',
      contentType: 'application/json; charset=utf-8',
      success: function (response) {

          if (response.success) {
              $("#showError").hide();
              $("#noError").show();
          }
          else {
              $("#showError").show();
              $("#noError").hide();
              $("#showError").text(response.responseText);
          }
      },
      error: function (response) {
          alert("error!");
      }
  });
})

Функция на стороне сервера: 

public IActionResult GetJobData()
{
    var isFileSupported = true;
    if (!isFileSupported)
    {
        //  Send "false"
        return Json(new { success = false, responseText = "Your operation fail !" });
    }
    else
    {
        //  Send "Success"
        return Json(new { success = true, responseText = "Your operation Success !" });
    }
}
...