Question

我在部分视图中有一个Ajax.BeginForm但是有嵌套表单的问题，因此我想使用jquery脚本替换Ajax.BeginForm并获得tesame结果。

这是我首先使用的Ajax.BeginForm：

@using (Ajax.BeginForm("CreateIngredient", "Recipe", new AjaxOptions() { UpdateTargetId = "create-ingredient", HttpMethod = "Post", OnComplete = "ClearTextboxes" }, new { @id = "createIngredient" }))
{
    @Html.LabelFor(model => model.Ingredients, "Custom Ingredient")
    @Html.TextBoxFor(model => model.addIngredient, new { @id = "addIngredient" })
    <input type="submit" id="createButton" value="Create" class="default-btn small-button light-border" onclick="$('#SelectedIngredient').append('<option>' + $('#addIngredient').val() + '</option>')" />
}

我试过这个剧本：

<script type="text/javascript">
function ClearTextboxes() {
    document.getElementById('addIngredient').value = ''
}

$(function () {
    $("#createButton").click(function () {
        $.ajax({
            type: "POST",
            url: "/Recipe/CreateIngredient",
            success: function (data) {
                $('#result').html(data);
            }
        });
    });
});

但是当点击按钮时，它会转到SubmitRecipe HttpPost而不是CreateIngredient HttpPost

Submit.cshtml查看：

http://pastebin.com/GdKmK6V6

Answer 1

您正在使用CreateIngredient()方法，但由于您尚未取消默认提交，因此您也在点击SubmitRecipe()。

将按钮更改为

<input type="button" id="createButton" ....

因此它不再提交父表单，或取消默认操作

$("#createButton").click(function () {
    $.ajax({
        type: "POST",
        url: '@Url.Action("CreateIngredient", "Recipe")', // use Url.Action()
        success: function (data) {
            $('#result').html(data);
        }
    });
    return false; // add this
});

请注意，您拥有无效html的嵌套表单，您需要将内部表单移动到外部表单下方。您也没有向CreateIngredient()成分方法发送任何数据。您尚未显示该方法，但假设它具有参数string ingredient，则需要添加

data: { ingredient: $('#addingredient').val() },`

到ajax函数

用jquery脚本

1 个答案: