Question

我试图从html razor表单（在视图中）调用另一个操作而不是我的默认操作，但它总是调用默认方法。我使用jquery ajax但无法解决这个问题。我试过以下代码。

Html razor代码： -

@using (Html.BeginForm("InitialView", "AgreementRegistration", FormMethod.Post, new { id = "firstform", role = "form" }))
{

//Other Razor code

<input type="submit" value="Add Another" id="btnAddAnother" name="btnAddAnother" />

}

Jquery Ajax代码： -

 $(document).ready(function () {

$("#btnAddAnother").click(function(){
                e.preventDefault();
                var element = this;
                $.ajax({

                    url: "/AgreementRegistration/AddNew",
                    type: "POST",
                    data: JSON.stringify({ 'Options': someData }),
                    dataType: "json",
                    traditional: true,
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        if (data.status == "Success") {
                            alert("Executed!!!");
                            $(element).closest("form").submit(); //Submit form
                        } else {
                            alert("Not Executed");
                        }
                    },
                    error: function () {
                        alert("error occured!!!");
                    }

                });
            });

 });

在此，如果我点击'AddAnother'按钮，它会调用默认的'InitialView'动作，我想改为调用'AddNew'动作。通过使用上面的jquery代码，它不会执行。我该如何解决这个问题？

Answer 1

您没有传递事件（因此不会取消它）。将代码更改为

$("#btnAddAnother").click(function(e) { // add the parameter
    e.preventDefault();
    ....

或将其设为按钮

<button type="button" id="btnAddAnother" name="btnAddAnother" />Add Another</button>

并删除e.preventDefault;

Answer 2

您正在将事件挂钩到提交按钮的click事件，这意味着表单仍在使用标准POST方法提交。相反，您应该挂钩submit元素的form事件。试试这个：

$("#firstform").submit(function(e){
    e.preventDefault();
    var $form = $(this);

    $.ajax({
        url: $form.prop('action'),
        type: $form.prop('method'),
        data: { 'Options': someData },
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data.status == "Success") {
                alert("Executed!!!");
            } else {
                alert("Not Executed");
            }
        },
        error: function () {
            alert("error occured!!!");
        }
    });
});

Answer 3

使用此代码如果您可以使用提交按钮以便提交页面，但您可以使用普通按钮，只有onclick事件函数调用，所以请使用以下代码...

CSHTML网页代码 -

@using (Html.BeginForm("InitialView", "AgreementRegistration", FormMethod.Post, new { id = "firstform", role = "form" }))
{

//Other Razor code

<input type="button" value="Add Another" id="btnAddAnother" name="btnAddAnother" />

}

脚本代码

$("#btnAddAnother").click(function(){
                e.preventDefault();
                var element = this;
                $.ajax({

                    url: "/AgreementRegistration/AddNew",
                    type: "POST",
                    data: JSON.stringify({ 'Options': someData }),
                    dataType: "json",
                    traditional: true,
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        if (data.status == "Success") {
                            alert("Executed!!!");
                            $(element).closest("form").submit(); //Submit form
                        } else {
                            alert("Not Executed");
                        }
                    },
                    error: function () {
                        alert("error occured!!!");
                    }

                });
            });

Answer 4

将类型更改为输入的button

<input type="button" value="Add Another" id="btnAddAnother" name="btnAddAnother" />

您可以通过稍微更改代码来实现此目的

$(document).ready(function () {
    $("#btnAddAnother").click(function(){
        var element = $(this);
        $.ajax({
            .
            .
        });
        return false;
    });
 });

希望这会有所帮助

Ajax不会调用适当的操作

4 个答案: