Question

我的应用程序中有一个View'Parent'，我正在使用@ Html.BeginForm＆amp;用于保存父视图数据的提交按钮。我在Parent视图中也有一个局部视图，我试图从局部视图调用ajax方法（使用jQuery），但每次它将我重定向到父窗体的动作方法。

Parent View
@using (Html.BeginForm("Test1", "Home", new { id = 1 }, FormMethod.Get))
{
    @Html.Partial("TestPartial", Model)
    <div>
        <input id="Button1" type="submit" value="Parent" />
    </div>
}

Partial View
<script>
function onClientClick() {
    $.ajax({
        url: "/Home/Test2",
        type: "GET",
        dataType: "json",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({ ID: 1 }),
        cache: false,
        success: function (data) {
            alert('Success');
        },
        error: function (err, result) {
            alert("Error" + err.responseText);
        }
    });
}
</script>
<div>
<input type="submit" name="submit" onclick="onClientClick()" value="Submit" />
</div>

每次我尝试从Partial视图调用/ Home / Test2时，它会将我重定向到/ Home / Test1（父窗体的动作）

Answer 1

问题出在这一行：

<input type="submit" name="submit" onclick="onClientClick()" value="Submit" />

类型为submit，因此它正在提交表单并将您重定向到父级中的Action。

在部分视图中，您可以定期button而不是submit button来请求AJAX内容：

<input type="button" onclick="onClientClick()" value="Ajax Call" />

您也可以return false但我认为使用标准button而不是submit更适合此背景。

Answer 2

在false函数结束时调用ajax后返回onClientClick

或重新撰写提交

<input type="submit" name="submit" id="submit" value="Submit" />

然后在jquery中将click事件视为

$("submit").click(function(e){
e.preventDefault()
$.ajax({
        url: "/Home/Test2",
        type: "GET",
.
.
. 

});

或将input类型从submit更改为button

从部分视图单击按钮可重定向到父操作方法

2 个答案: