Question

在我的ASP.Net Core MVC应用程序中

查看

<form>
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-4">
            <div class="form-group">
                <input type="text" class="form-control small" asp-for="UserName" />
            </div>
            <div class="form-group">
                <input type="text" class="form-control small" asp-for="Password" />
            </div>
            <div class="form-group">
                <a class="btn btn-sm btn-success pull-right" asp-action="Validate" asp-controller="LogIn" onclick="ValidateLogin()">Log In</a>
                <input type="submit" value="LogIn" asp-action="Validate" asp-controller="LogIn" onclick="ValidateLogin(this)" />
            </div>
        </div>
    </div>
</div>

TypeScript代码

   function ValidateLogin(e:Event) {
    var username = (document.getElementById('UserName') as HTMLInputElement).value;
    var password = (document.getElementById('UserName') as HTMLInputElement).value;
    if ((username.length > 0) && (password.length > 0)) {

    }
    else {
        alert('Fields required');
        e.preventDefault();
    }
}

如果字段为空，则它将终止请求，但仅显示警报，并且e，preventDefault（）在此处无效。

我也尝试返回false，但是这里似乎没有任何作用。在preventDefault之后，不应使用操作方法或返回false语句

有人可以告诉我在这个非常简单的任务中我想念的是什么吗？

更新1

如果我以下面的方式更改代码，则它会起作用

document.getElementById('btn').onclick = function (e) {
var username = (document.getElementById('UserName') as HTMLInputElement).value;
var password = (document.getElementById('UserName') as HTMLInputElement).value;
if ((username.length > 0) && (password.length > 0)) {

}
else {
    alert('Fields required');
    return false;
}

}

我仍然不知道为什么将它包装在方法中而不是直接使用.onclick（）调用时它不起作用

Answer 1

onclick="ValidateLogin(this)"

您的问题是您的ValidateLogin方法。您传递“ this”上下文，并且您的方法需要一个事件参数。

改为执行此操作。

<form onsubmit="ValidateLogin()">

从您的提交按钮中删除onlclick。

Answer 2

我也尝试返回false，但是这里似乎没有任何作用。在preventDefault之后，不应使用操作方法或返回false语句

正如kemicofa's answer所指出的那样，您的ValidateLogin函数期望将Event作为参数。但是您通过了this。

让我们检查您的代码：

<input type="submit" value="LogIn" asp-action="Validate" asp-controller="LogIn" onclick="ValidateLogin(this)" />

这里的ValidateLogin(this)意味着您要告诉浏览器将此input DOM元素作为参数传递给ValidateLogin()函数。由于Input元素没有preventDefault方法，因此失败。

我仍然不知道为什么将它包装在方法中而不是直接用.onclick()来

简而言之，这里的 this引用了DOM元素，这是我们将事件处理程序附加到的元素。无论如何，this不是Event的实例。

如果您希望将事件处理程序与on{eventtype}="script_code" HTML属性绑定，则可以使用event变量：

    onclick="ValidateLogin(this)"

    onclick="ValidateLogin(event)"

因为event可以被视为script_code的预定义局部变量。有关更多详细信息，请参见Registering on-event handlers

通过从JavaScript设置.onclick=function(event){/**/};调用和使用内联HTML属性调用ValidateLogin(event)两者都应按预期工作。

e.preventDefault（）不适用于MVC

2 个答案: