Перенаправление ASpNetCore 2.1 MVC на результат JSON

Question

У меня есть следующее:

<form asp-action="Login">
  <div asp-validation-summary="ModelOnly" class="text-danger"></div>

  <div class="form-group">
    <label asp-for="EmailAddress" class="control-label">Email Address</label>
    <input asp-for="EmailAddress" class="form-control" />
    <span asp-validation-for="EmailAddress" class="text-danger"></span>
  </div>
  <div class="form-group">
    <label asp-for="Password" class="control-label"></label>
    <input type="password" asp-for="Password" class="form-control" />
    <span asp-validation-for="Password" class="text-danger"></span>
  </div>

  <div class="form-group">
    <input type="submit" value="Create" class="btn btn-default" />
  </div>
</form>

Это прекрасно работает, когда я отправляю сообщение, как обычно, к методу контроллера. Однако моя проблема заключается в том, что по разным причинам. Мне не разрешено перенаправлять в контроллере, но я возвращаю объект JSON из контроллера обратно в представление. На данный момент JSON просто попадает на страницу. Что мне нужно изменить в моем коде выше, чтобы заставить пост вернуться к выполнению функции javascript?

Answer 1

Хорошо, вы можете попробовать что-то подобное. Как предложил Стивен, вы должны отправлять сообщения обратно на свой контроллер с помощью Ajax. Я свяжу свой пример с jQuery (так как вы, вероятно, уже имеете к нему доступ).

Примечание: это простой пример, и я делаю некоторые предположения

<form id="frmLogin" asp-action="Login">
  <div asp-validation-summary="ModelOnly" class="text-danger"></div>

  <div class="form-group">
    <label asp-for="EmailAddress" class="control-label">Email Address</label>
    <input asp-for="EmailAddress" class="form-control" />
    <span asp-validation-for="EmailAddress" class="text-danger"></span>
  </div>
  <div class="form-group">
    <label asp-for="Password" class="control-label"></label>
    <input type="password" asp-for="Password" class="form-control" />
    <span asp-validation-for="Password" class="text-danger"></span>
  </div>

  <div class="form-group">
    <input type="button" id="btnSubmit" value="Create" class="btn btn-default" />
  </div>
</form>
<script>
    $(document).ready(function() {
        $("#btnSubmit").on("click", function(e) {
            e.preventDefault();

            //you could do some validation here/trigger unobtrusive validation
            if(("#frmLogin").valid()) {
                var data = $("#frmLogin").serialize();
                //assumption: your controller action accepts the form/object as a param called 'data'
                $.post("/yourcontroller/youraction", { data : data }, function(response) {
                     //this is just an example...if your JSON had a boolean 'success' element you could check it like so...
                     if(response.success) {
                         //do something
                     }
                     else {
                         //display an error
                     }
                });
            }
        });
    });
</script>