在 Asp.net Core 中使用 Ajax 的验证表单

Posted

技术标签:

【中文标题】在 Asp.net Core 中使用 Ajax 的验证表单【英文标题】:Validation Form With Ajax in Asp.net Core 【发布时间】:2018-07-02 08:29:01 【问题描述】:

我使用 AJAX 将表单发送到 ASP.NET Core 中的控制器,但我在发送带有验证的表单时遇到问题

<form asp-action="Create" asp-controller="Departments"
      data-ajax="true"
      data-ajax-method="Post"
      data-ajax-mode="replace"
      data-ajax-update="#content"                 
      data-ajax-success="Success"
      data-ajax-failure="Failure">
    <div class="box-body">
       <div class="alert alert-success" id="divalert" ></div>

        <div class="form-group">
            <label asp-for="Title" class="control-label"></label>
            <input asp-for="Title" class="form-control" />
            <span asp-validation-for="Title" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input type="submit" value="ثبت" class="btn btn-success" />
        </div>
    </div>
</form>

这是 Ajax 的 Jquery 代码

<script>
    function Success() 
        $("#divalert").text = "Yes";
    
    function Failure() 
        $("#divalert").text = "No";

    

</script>

但我想在发送带有空文本框的表单时显示验证消息,

这是我的控制器

public async Task<IActionResult> Create([Bind("Department_Id,Title,Task,Description,Department_Status")] Department department)

    if (ModelState.IsValid)
                 
        _genericRepository.Add(department);
        await _genericRepository.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    

    return View(department);

当表单为空时如何使用 Ajax 显示验证消息?

【问题讨论】:

@mplungjan,OP 正在使用 jquery.unobtrusive-ajax.js 插件(它进行 ajax 调用) 您显示的代码可以正常工作,并且不会提交假设您在Title 属性上具有[Required] 属性。您是否正确加载了所有相关脚本? @StephenMuecke 我在哪里可以看到? @mahdi:请不要将问题中的每个单词都大写。阅读真的很烦人 这与客户端验证无关! 【参考方案1】:

我使用局部视图“创建”并且它有效

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<div class="form-horizontal">
    <form asp-action="Create" role="form" asp-controller="Department" asp-antiforgery="true"
          data-ajax-success="Bindgrid"
          data-ajax="true"
          data-ajax-method="POST">
        <div class="form-group">
            <label class="control-label" asp-for="DepartmentName"></label>
            <input class="form-control" type="text" asp-for="DepartmentName" />
            <span asp-validation-for="DepartmentName" class="text-danger"></span>
        </div>
        <input class="btn btn-primary" type="submit" value="Save" />
    </form>
</div>

html 或 ajax 验证需要所有 jquery 文件。

【讨论】:

【参考方案2】:

我用这种方法,效果很好

我应该这样编码吗?

我将控制器从 IActionResult 更改为 JsonResult 。

public async Task<JsonResult> 
Create([Bind("Department_Id,Title,Task,Description,Department_Status")] 
Department department)
    

        if (ModelState.IsValid)
                     

            _genericRepository.Add(department);
            await _genericRepository.SaveChangesAsync();
            return Json(department);

        

        return Json(department);
    `

【讨论】:

以上是关于在 Asp.net Core 中使用 Ajax 的验证表单的主要内容,如果未能解决你的问题,请参考以下文章

在 ASP.NET Core 中使用 ajax 向控制器发送数据

ASP.Net Core使用Ajax局部更新

在 ASP.NET CORE 表单中使用 AJAX 返回 JSON

如何在带有 ADO.NET 的 ASP.NET Core MVC 中使用 jQuery Ajax 自动完成

ASP.Net Core中使用jquery-ajax-unobtrusive替换Ajax.BeginForm

如何在 asp.net core 中使用 ajax 创建评论列表? [关闭]