asp.net core уведомление пользователя после формы сообщение

Question

Хорошо, это мой первый вопрос, поэтому я постараюсь быть ясным и не повторять то, что раньше задавали другие. Я попытался выполнить поиск на форуме до публикации, но не нашел ничего, что могло бы помочь мне исправить мою проблему. Если бы я пропустил ответ, который был бы уместным, осторожно закройте этот вопрос как дубликат.

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

Мой вопрос в том, что является лучшим способом отправки уведомлений с обратной стороны на пользовательский интерфейс без обновления всего представления.

Вот что я пытался до сих пор, и почему он не работает:

1. Первая попытка была добавить данные в ViewData словаря и передать его в представлении. Он работает, но снова загружает полную страницу, что нежелательно.

2. Как я видел, ища, что это хорошая практика, чтобы перенаправить на GET запроса, прежде чем вернуться к просмотру, я создал редирект метод успеха, который будет затем отобразить ViewData словаря, но я обнаружил, что это не сработало, поскольку перенаправление не пропускает ничего через viewdata.

3. Потом я обнаружил, что я могу использовать TempData, как он живет за счет перенаправления в отличие от ViewData и ViewBag. Проблема с этим решением заключается в том, что есть некоторые проблемы с безопасностью, а также я не мог запускать свой javascript на стороне клиента, за исключением предупреждения, которое не очень привлекательно для пользователя.

4. Последнее, что я сделал, это использовать запрос Ajax, чтобы обновление страницы не обновлялось, и тогда я мог отправлять уведомление пользователю только после ответа сервера. Проблема с этим решением заключается в том, что я не могу получить данные формы на бэкэнд, он всегда заполняется нулевыми значениями. Следует отметить, что я попытался добавить атрибут [FromBody] перед ContactViewModel, поскольку я видел его в других сообщениях как причина, по которой он не связывался правильно, но это не помогло мне. Вот код, который у меня есть до сих пор:

a. Для контроллера:

[HttpPost] 
[AjaxOnly] 
public async Task<IActionResult>SendContactRequest(ContactViewModel model) 
{ 

    if (ModelState.IsValid) 
    { 
     string recipientEmailAddresses = anyEmail@anyExtension.com; 

      string subject = "Website customer request from " + model.firstName + " " + model.lastName; 
      string message = ""; 
      if (model.jobTitle != null) 
      { 
       message += "Job title: " + model.jobTitle; 
      } 
      message += "Request or comment: " + model.requestMsg; 

      // Only actually send the message if we are in production/staging or other, anything else than development 
      if (!_env.IsDevelopment()) 
      { 
       await _emailSender.SendEmailAsync(model.contactEmail, $"{model.firstName} {model.lastName}", recipientEmailAddresses, subject, message); //using interpolated string here 
      } 

      // Sending confirmation via response.writeAsync 
      await Response.WriteAsync("success"); 
     } 
     else 
     { 
      await Response.WriteAsync("the message could not be sent as model is not valid"); 
     } 

     // this method redirects to the good section on page, but cannot pass the model along with it... 
     return Redirect("Index#contact"); 
    } 

b. Для стороны клиента:

<form id="contactForm" asp-controller="Home" asp-action="SendContactRequest"> 
    <div class="form-group"> 
     @*<label asp-for="firstName">First Name</label>*@ 
     <input asp-for="firstName" class="form-control" placeholder="First name" /> 
     <span asp-validation-for="firstName" class="text-warning"></span> 
    </div> 
    <div class="form-group"> 
     @*<label asp-for="lastName">Last Name</label>*@ 
     <input asp-for="lastName" class="form-control" placeholder="Last name" /> 
     <span asp-validation-for="lastName" class="text-warning"></span> 
    </div> 
    <div class="form-group"> 
     @*<label asp-for="contactEmail">Contact Email</label>*@ 
     <input asp-for="contactEmail" class="form-control" placeholder="Full email address" /> 
     <span asp-validation-for="contactEmail" class="text-warning"></span> 
     <small id="email" class="form-text text-muted">We'll never share your email with anyone else.</small> 
    </div> 
    <div class="form-group"> 
     @*<label asp-for="jobTitle">Job title</label>*@ 
     <input asp-for="jobTitle" class="form-control" placeholder="Job title (optional)" /> 
     <span asp-validation-for="jobTitle" class="text-warning"></span> 
    </div> 
    <div class="form-group"> 
     @*<label asp-for="jobTitle">Job title</label>*@ 
     <textarea asp-for="requestMsg" class="form-control" placeholder="Request or comment" rows="8"></textarea> 
     <span asp-validation-for="requestMsg" class="text-warning"></span> 
    </div> 

    <button type="submit" class="btn btn-primary">Submit</button> 
</form> 

c. Наконец, для части сценария (вызов Ajax):

// Attach a submit handler to the form 
    $("#contactForm").submit(function (event) { 

     // Stop form from submitting normally 
     event.preventDefault(); 

     var formdata = new FormData(document.querySelector('#contactForm')[0]); 

     // Send the data using ajax 
     $.ajax({ 
      type: "POST", 
      url: $form.attr("action"), 
      data: formdata, 
      processData: false, 
      contentType: false, 
      success: function (response) { 
       if (response.includes("success")) { 
        alert(response); 
        document.getElementById("contactRequestForm").reset(); 
       } 
      }, 
      error: function() { 
       alert("Mail not sent, please try again later \n If this error persists, please contact us directly via email @ webmaster@set-ets.com"); 
      } 
     }); 
    }); 

Answer 1

Подход 4 - это то, что я бы рекомендовал (Ajax). У вас небольшая ошибка в коде, который публикует данные формы, и поэтому он не привязан к вашей модели.

// Attach a submit handler to the form 
$("#contactForm").submit(function (event) { 

    // Stop form from submitting normally 
    event.preventDefault(); 

    // this won't work - take out the indexer 
    // var formdata = new FormData(document.querySelector('#contactForm')[0]); 

    // this should work 
    var formdata = new FormData(document.querySelector('#contactForm')); 


    // Send the data using ajax 
    $.ajax({ 
     type: "POST", 
     url: $form.attr("action"), 
     data: formdata, 
     processData: false, 
     contentType: false, 
     success: function (response) { 
      if (response.includes("success")) { 
       alert(response); 
       document.getElementById("contactRequestForm").reset(); 
      } 
     }, 
     error: function() { 
      alert("Mail not sent, please try again later \n If this error persists, please contact us directly via email @ webmaster@set-ets.com"); 
     } 
    }); 
}); 

Однако ваш код контроллера не будет делать то, что вы хотите.Вероятно, вы захотите вернуть какой-то тип ответа типа json с любыми ошибками модели и т. Д. Но этот код должен привести вас к тому, что он привязан к модели правильно, а затем вы можете возиться с вашим методом контроллера, чтобы вернуть что-то более разумный (не redirect)