Question

<form data-ajax="true" data-ajax-mode="replace" data-ajax-update="#results" asp-action="CreateCarClient" asp-controller="Account" method="post" enctype="multipart/form-data">

此表格无效

Answer 1

您正在ASP.NET Core中使用jQuery Unobtrusive AJAX。您需要使用npm install jquery.unobtrusive-ajax将jquery.unobtrusive-ajax软件包安装到项目中，并在视图中添加对该项目的引用。

请参阅剃须刀页面here的教程。

This link演示了我如何逐步使用代码的示例。

Answer 2

您可以使用FormHelper在ASP.NET Core上创建ajax表单。此外，FormHelper可以帮助您将服务器端的验证转换为客户端的验证。

易于使用。您只需要在表单标签中添加 asp-formhelper =“ true” 。

<form asp-formhelper="true" asp-controller="Home" asp-action="Save">
   // <input...
   // ...
</form>

您可以在FormHelper GitHub Page上查看其文档。您可以从Nuget下载该软件包。

Answer 3

如果您尝试在 .NET 5 中执行此操作，请像往常一样将 JQuery.Unobtrusive.Ajax 库添加到您的项目中，然后编写您自己的小标签助手！

这是非常基础的，但您可以根据需要对其进行扩展。

namespace MyProject.Helpers.TagHelpers
{
    [HtmlTargetElement("form", Attributes ="ajax")]
    public class AjaxForm : TagHelper
    {
        public string replaceId { get; set; }
        public string onAjaxBegin { get; set; }
        public string id { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagMode = TagMode.StartTagAndEndTag;
            output.Attributes.SetAttribute("data-ajax", "true");
            output.Attributes.SetAttribute("data-ajax-method", "POST");
            output.Attributes.SetAttribute("data-ajax-mode", "replace");
            output.Attributes.SetAttribute("method", "post");
            output.Attributes.SetAttribute("id", id);

            if (!string.IsNullOrWhiteSpace(onAjaxBegin))
                output.Attributes.SetAttribute("data-ajax-begin", onAjaxBegin);

            if (string.IsNullOrWhiteSpace(replaceId))
                throw new Exception("ReplaceId is required!");

            output.Attributes.SetAttribute("data-ajax-update", $"#{replaceId.TrimStart('#')}");
        }
    }
}

记得在您的 _ViewImports.cshtml

中注册这个标签助手

@addTagHelper  MyProject.Helpers.TagHelpers.*, MyProject

用法示例：

  <form id="GandalfForm" ajax replace-id="partialViewWrapper" on-ajax-begin="OnBeginDoSomethingInJavascript" asp-controller="SomeController" asp-action="SomeMethod">
                    <div id="partialViewWrapper">
                        @await Html.PartialAsync("~/Views/Shared/SampleContent.cshtml", Model)
                    </div>

请注意，“ReplaceId”DOM 元素必须以 # 开头，这样不显眼的 ajax 库才能正常工作。

如何在Asp.Net Core中创建AJAX表单

3 个答案: