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

本文关键字：重定向 操作方法 按钮 视图 单击 | 更新日期: 2023-09-27 18:05:50

我在我的应用程序中有一个视图'Parent'，我使用@Html。BeginForm,一个提交按钮来保存父视图的数据。我也有一个父视图内的部分视图，我试图从部分视图调用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>

每次我试图从部分视图调用/Home/Test2时，它将我重定向到/Home/Test1(父窗体的动作)

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

问题在这一行:

<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在这种情况下更适合。

调用ajax后返回false…在onClientClick函数的末尾

或将提交重写为

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

然后在jquery BND中点击事件为

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

OR将input类型从submit更改为button

相关文章：