Question

当我点击提交按钮时，它会使用电子邮件，密码和FName等表单字段并执行控制器事件，而不是通过下面给出的jQuery方法。

在jQuery方法中，我已将EMAIL地址编辑为sdsdsd@sdd.dd，但是，在控制器中，我看到了我在表单字段中输入的值。所以，我认为我的jQuery方法还没有被解雇。

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

@Html.ValidationSummary()
<div class="form-group">
    @Html.LabelFor(m => m.EMAIL, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.EMAIL, new { id = "Email", @class = "form-control" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.PASSWORD, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.PasswordFor(m => m.PASSWORD, new { id = "pwd", @class = "form-control" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.Fname, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.PasswordFor(m => m.Fname, new { @class = "form-control" })
    </div>
</div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" class="btn btn-default" value="Register" id="submitbuttonid"  />
    </div>
</div>

}

JQUERY

$(function () {
            $('submitbuttonid').click(function () {
                if ($(this).valid()) {
                    $.ajax({
                        url: '/Action/Register',
                        type: this.method,
                        data: {EMAIL : "sdsdsd@sdd.dd"},
                        success: function (result) {
                            $('#result').html(result);
                        }
                    });
                }
                return false;
            });
        });

CONTROLLER

    [AllowAnonymous]
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Register(RegisterViewModel acc)
    {
        return RedirectToAction("Index", "Home");
    }

更新

@using (Html.BeginForm(null,null,FormMethod.Post, new { id = "yourFormId" }))
{
    @Html.AntiForgeryToken()
    <strong>Hi </strong>
    @Html.Label("Text Content", new { id = "lastnamelbl" })
    @Html.Label("Text Content", new { id = "firstnamelbl" })
    <hr />
    @Html.ValidationSummary()
    <div class="form-group">
        @Html.LabelFor(m => m.EMAIL, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.EMAIL, new { id = "Email", @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.PASSWORD, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.PASSWORD, new { id = "pwd", @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Fname, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Fname, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" id="submitbuttonid"  />
        </div>
    </div>

}

JS

 <script>


    $(function () {
        $('#yourFormId').on('submit', function (e) { //make it form submit event
            e.preventDefault(); // stop the form submission.
            if ($(this).valid()) {  // if form is valid, proceed with your ajax logic.
                // your current Code
                alert("jhjh");
                $.ajax({
                    url: '/Account/Register',
                    type: 'POST',
                    data: { EMAIL: "sdsdsd@sdd.dd" },
                    success: function (result) {
                        $('#result').html(result);
                    }
                });
            }
            return false;
        });
    });

更新

<form action="/Account/Register/yourFormId" method="post"><input name="__RequestVerificationToken" type="hidden" value="poLluIrZEBZBe0Fr5QWfr5LoI4yrKn6Vc77gPYIE09RZc2qYvFxP3tNQ0UavJMc862RZ5Bd2vcEqKfmji39ktEnslbT38tKalIBeRD1la_U1" />

Answer 1

问题：与您当前的代码一样，

$('submitbuttonid').click(function () { // You have a missing # in selector, Also this is click event of button
 if ($(this).valid()) { // $(this).valid() is always undefined, hence you ajax is never executed.
  // your current Code
 } 
return false;
});

解决方案：将事件更改为提交（）而不是点击按钮

$('#yourFormId').on('submit',function (e) { //make it form submit event
 e.preventDefault(); // stop the form submission.
 if ($(this).valid()) {  // if form is valid, proceed with your ajax logic.
  // your current Code
 } 
return false;
});

Answer 2

ajax方法中的参数EMAIL是String类型。因此，您必须在C＃方法中声明相同的名称和相同的类型，如下所示：

[AllowAnonymous]
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Register(string  Email)
{
    return RedirectToAction("Index", "Home");
}

Answer 3

您的POST方法使用document.querySelector('.content').setAttribute('something',''); //Pure JS //Or $('.content').attr('something',''); //jQuery进行修饰，但您没有传递令牌，因此服务器上会抛出异常。删除属性，或在请求中传递属性，例如

[ValidateAntiForgeryToken]

但是，这意味着您没有通过模型的任何其他属性，因此不清楚您尝试使用此功能实现的目标。要序列化表单中的所有控件（包括令牌），您可以使用

$('form').submit(function() {
    if (!$(this).valid()) {
        return;
    }
    var token = $('[name=__RequestVerificationToken]').val();
    $.ajax({
        url: '@Url.Action("Register", "Account")', // don't hard code
        type: 'POST',
        data: { EMAIL: "sdsdsd@sdd.dd", __RequestVerificationToken: token},
        success: function (result) {
            $('#result').html(result);
        }
    });
    return false; / you do not need .preventDefault() when this is included
});

从Razor Form执行Jquery方法

3 个答案: