У меня есть простая форма контактного сообщения, написанная на бритве asp.net и c #.Всякий раз, когда форма отправляется, я могу обработать ответ сервера без проблем, но по какой-то причине все поля ввода поддерживают одинаковые значения.
Вот частичное представление:
@using PublicWebsite.Models.Contact;
@model ContactFormViewModel
<form role="form" id="contactForm" data-toggle="validator" method="post" asp-controller="Contact" asp-action="SubmitMessage">
@if (!string.IsNullOrWhiteSpace(Model.ServerResponse))
{
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div class="alert @(Model.ServerResponseSuccess ? "alert-success" : "alert-danger")" role="alert">
@Model.ServerResponse
</div>
</div>
</div>
</div>
}
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="prepend-icon">
<input type="text" asp-for="@Model.Name" name="Name" class="form-control input-lg" placeholder="Your Full Name" maxlength="50" required>
<i class="nc-icon-outline users_single-03"></i>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="prepend-icon">
<input type="email" asp-for="@Model.Email" name="Email" class="form-control input-lg" placeholder="Email" maxlength="200" required />
<i class="nc-icon-outline ui-1_email-85"></i>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="prepend-icon">
<input type="tel" asp-for="@Model.Phone" name="Phone" class="form-control input-lg" placeholder="Phone Number" maxlength="25" required>
<i class="nc-icon-outline ui-2_phone"></i>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<select class="form-control" asp-for="@Model.ContactReason" name="ContactReason" data-container-class="input-lg" required style="height:46px !important">
<option value="">Choose a Reason</option>
<option value="Home Remediation">Home Remediation</option>
<option value="Commercial Remediation">Commercial Remediation</option>
<option value="Employment Opportunities">Inquire about employment oppotunities</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="form-group">
<textarea asp-for="@Model.Message" class="form-control" rows="10" name="Message" placeholder="Message" required></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="mysitekeyishere"></div>
<input type="hidden" name="RecaptchaResponse" value="" />
</div>
<button type="submit" id="form-submit" class="btn btn-primary btn-lg icon-left-effect"><i class="nc-icon-outline ui-1_email-85"></i><span>Send message</span></button>
<div id="msgSubmit" class="hidden"></div>
</form>
Вот взгляд на модель представления:
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
namespace PublicWebsite.Models.Contact
{
public class ContactFormViewModel
{
[StringLength(50)]
public string Name { get; set; } = "";
[StringLength(200)]
public string Email { get; set; } = "";
[StringLength(25)]
public string Phone { get; set; } = "";
[StringLength(50)]
public string ContactReason { get; set; } = "";
public string Message { get; set; } = "";
[StringLength(250)]
public string ServerResponse { get; set; } = "";
public bool ServerResponseSuccess { get; set; } = false;
}
}
Внутри страницы контактного индекса CSHTML для контакта я отображаю частичное представление без каких-либо проблем.
@section Scripts {
<script src="@validatorPath"></script>
<script type="text/javascript">
$(function () {
$(document).on('submit', '#contactForm', function (e) {
$form = $(this);
$url = $form.attr('action');
$.ajax({
type: "POST",
url: $url,
data: $form.serialize(), // serializes the form's elements.
success: function (data) {
loadFormData(data); //This works
resetCaptcha();
},
error: function (data) {
alert(data);
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
function loadFormData(data) {
$formContainer = $('.contact-form-container');
$formContainer.empty();
$formContainer.html(data);
console.log(data); //This reports back the same results
}
function resetCaptcha() {
//reset captcha
$('.g-recaptcha').empty();
$.getScript('@recaptchaUrl');
}
});
</script>
}
<div class="col-md-7 contact-form-container">
@{ await Html.RenderPartialAsync("_ContactForm", new ContactFormViewModel()); }
</div>
Все отображается правильно.Как показано на скриншоте ниже.
После заполнения элементов вызывается следующая функция sendmessage, как показано в разделе сценариев выше.
[HttpPost]
public async Task<IActionResult> SubmitMessage(ContactFormViewModel contactForm)
{
var captchaResponse = Request.Form["g-recaptcha-response"].ToString();
if (string.IsNullOrWhiteSpace(captchaResponse))
{
contactForm.ServerResponse = _errorCaptchaMessageBlank;
}
else
{
if (await ValidCaptcha(captchaResponse))
{
try
{
await SendCustomerMessage(contactForm);
var customerName = contactForm.Name;
//This works
contactForm = new ContactFormViewModel
{
ServerResponse = String.Format(_successfulSendMessage, customerName.Split(' ')[0]),
ServerResponseSuccess = true
};
}
catch
{
contactForm.ServerResponse = _errorCaptchaMessageInvalid;
}
}
else
{
contactForm.ServerResponse = _errorCaptchaMessageInvalid;
}
}
//This works and I get the response back on the front end
return PartialView("_ContactForm", contactForm);
}
Вы можете даже увидеть сообщения об ошибках при успешной попытке сервера (т. Е. Ответ сервера, как показано в HTML), и он хранит информацию о пользователе, как и должна, чтобы им не пришлось повторно-введите данные, как показано на рисунке ниже.
Теперь, если все прошло успешно, обратите внимание на приведенный выше код. Я создаю новую контактную форму с очищенными значениямии сообщение об успехе.Тем не менее, та же информация остается заполненной, как показано ниже.Я хочу, чтобы контактная форма была очищена.
Я пытался даже просто вернуть обратно совершенно новую модель представления, но у меня все еще остается та же проблема, когдавсе данные почти кэшированы.В моем ответе console.log от сервера я получаю частичный результат просмотра с предварительно заполненными значениями, поэтому я знаю, что это не проблема браузера.Даже когда я отлаживаю страницу CSHTML, я вижу только ответ сервера и success = true, все остальные поля остаются пустыми.
Любая помощь в выяснении того, почему сервер все еще возвращает результат частичного просмотра с заполненными данными, будет высоко ценится.
