PartialViewResult 表单不会清除 ajax 结果上的值 - ASP.NET Core Razor c#

Posted 2023-04-13

【中文标题】PartialViewResult 表单不会清除 ajax 结果上的值 - ASP.NET Core Razor c#

【英文标题】：PartialViewResult Form will not clear values on ajax result - ASP.NET Core Razor c#

【发布时间】：2019-06-20 22:21:24

【问题描述】：

我有一个用 razor 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;
    

在 Contact 的 Contact Index 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 页面时，我也只看到服务器响应和成功 = true，所有其他字段都是空白的。

任何帮助弄清楚为什么服务器仍然返回带有填充数据的部分视图结果将不胜感激。

【参考方案1】：

您可以将此添加到您的成功回调函数中：

$('#contactForm').find('input[type=text], textarea, select').val('');

它基本上会找到表单中的所有输入字段并清除它们的值。

【讨论】：

这很有用。但是，我想知道服务器返回部分视图的原因，该部分视图与我的最终屏幕截图中填充的值相同。

【参考方案2】：

尝试改变你的成功回调函数，如下所示：

 success: function () 
         document.getElementById("contactForm").reset();
                ,

【参考方案3】：

当Partial 方法返回混乱的数据时，清除模型状态有助于解决类似的问题：

public PartialViewResult OnPostData()

    ...
    ViewData.ModelState.Clear();
    return Partial("_ViewName", model);