Asp.net core mvc 有条件地允许单击提交按钮

在表单中，我有一个字段，它应该采用文件名（在浏览文件之后）和按钮submit。单击“提交”后，应将文件加载到服务器。它工作正常。但如果我没有选择任何文件（例如，字段为空）-单击“导致异常”，因为没有要加载的内容

是的，大家好，mvc和web技术的新手

如何防止这种行为？例如，如何在单击sumbit后弹出“输入为空”的消息

<form asp-action="Upload" asp-controller="Home" method="post" enctype="multipart/form-data">
<div class="row">
    <div class="col-sm-7">
            <label for="file">Xml file</label>
            <div data-width="85%" class="input-group">
                <label class="input-group-btn">
                    <span class="btn btn-primary">
                        <input id="file" name="Files" type="file" accept=".xml" style="display: none;">Browse&hellip;
                    </span>
                </label>
                <input type="text" class="form-control" readonly>
            </div>
        </div>
        <div class="col-sm-1"></div>
        <div class="col-sm-4" style="margin-top:15px;">
            <input type="submit" class="btn btn-primary btn-block" value="Upload" />
        </div>       
</div>

Xml文件
浏览&hellip；

我会使用javascript和数据注释来解决这个问题，比如（用作方向）：

还可以在viewmodel中使用数据注释。例如，如果使用

[必需]

-属性，则在没有文件的情况下无法提交表单

---

看一看

我认为公认的答案是懒惰和javascript漫游，并且一旦有超过1个输入字段，就会变得单调乏味

遵循代表模型-视图-控制器的MVC模式

您需要一个模型，该模型是从视图中收集的数据，然后在控制器中进行操作，在您的示例中，这是一个文件

因此，您的模型应该如下所示：

public class MyModelName {
     [Required(ErrorMessage = "Display a custom error message when the field is not filled out, leave this option out for default error message")]
     public IFormFile MyFileName { get; set; } 
}

为了能够在视图中使用

MyModelName

（我们称之为

MyView

，它在控制器中获取并发布到

MyView

操作），您必须让视图知道它。这是通过在视图文件的顶部包含

@model MyModelName

来完成的（区分大小写）。当视图知道模型时，要引用它，请使用

@model

，这将显示对象

现在，对于您的表单，使用asp helpers，而不是手动向输入字段添加属性，如

name

和

type

因此，不是：

这样写：

查看使用浏览器开发工具生成的内容，您将看到自动添加到输入字段的各种属性

页面上的任意位置为验证消息添加一个空格（通常位于输入字段下方）：

此时，您可以通过调用

ModelState.IsValid

使用服务器端验证，如下所示：

[HttpPost]
public IActionResult MyView(MyModelName model){
    if(ModelState.IsValid)
         //proceed to do whatever with the file
    return View(model); //return the model with the validation errors
}

因此，服务器端验证意味着，在您可以在浏览器中看到错误消息之前，站点必须往返到后端

要在不访问服务器的情况下进行验证，可以在视图中包含部分验证脚本，该脚本由默认的Microsoft模板提供。在

MyView.cshtml

include的底部（您需要默认的jquery库）：

一旦进入这一阶段，您将进行客户端验证，除非满足所有验证要求，否则不会提交表单

如果要进一步操作验证，则在部分中添加的验证脚本将提供一个函数

valid（）

可以这样使用：

$('form').on('submit', function(e){
    //stop the form from being submitted
    e.preventDefault();

    if($(this).valid()) {
        //do stuff if form is valid
    }
    //do stuff if form is not valid
})

---

有关模型的更多信息

您需要添加一些验证代码（如果愿意，可以在客户端和服务器中添加，但必须在服务器中添加），以便在处理模型中字段的值之前进行检查。这是一个相当标准的东西，您应该能够在线阅读它使用视图模型并添加

[必需]

属性到

HttpPostedFileBase

属性，并使用

HtmlHelper

方法对其进行强绑定，并实现mvc的客户端验证我回答说也应该使用数据注释-js方法仅通过禁用按钮向用户提供额外的视觉反馈。

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

$('form').on('submit', function(e){
    //stop the form from being submitted
    e.preventDefault();

    if($(this).valid()) {
        //do stuff if form is valid
    }
    //do stuff if form is not valid
})