删除模态表单按钮上的默认提交

Question

我有一个父表单正在使用模式表单来更新它。用户完成模态表单后：

1. 我希望它关闭模态表单
2. 触发将调用控制器函数来更新数据库表的回发
3. 避免使用默认提交操作 (e.preventDefault()) 进行重定向

我的问题是，如果我删除默认提交事件，则不会发生回发，并且我的数据库表保持不变。我正在使用 AJAX 修改父表单上的文本以反映用户更新。

如何在不离开父表单的情况下强制发回帖子？我不想重新加载网页；只更新值，关闭模态表单并触发 post 事件调用更新函数。

注意：如果我省略 preventDefault() 事件，网页总是会重定向到 url：/client/UpdateClientDetails/' + id

请看下面我的代码 sn-ps：

AJAX sn-p

<script type="text/javascript">
$('.btn-primary').click(function (e) {
    $.ajax({
        url: '/Client/UpdateClientDetails',
        type: 'POST',            
        dataType: 'json',
        data: newClient = {
            address1: $("#clientAddress1-@Model.Id").val(),
            address2: $("#clientAddress2-@Model.Id").val(),
            city: $("#clientCity-@Model.Id").val(),
            province: $("#clientProvince-@Model.Id").val(),
            postalCode: $("#clientPostalCode-@Model.Id").val(),
            phoneNumber: $("#clientPhoneNumber-@Model.Id").val()
        },
        cache: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            $("#Address1-@Model.Id").text(newClient.address1);
            $("#Address2-@Model.Id").text(newClient.address2);
            $("#City-@Model.Id").text(newClient.city);
            $("#Province-@Model.Id").text(newClient.province);
            $("#PostalCode-@Model.Id").text(newClient.postalCode);
            $("#PhoneNumber-@Model.Id").text(newClient.phoneNumber);

            $("#dialog-actions").dialog('close');
        },
        error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
    });
});

模态形式的开始

@using (Html.BeginForm("UpdateClientDetails", "Client", FormMethod.Post, attributes))
{
    //HTML Helpers & other things here
}

我要调用的控制器方法

[HttpPost]
public void UpdateClientDetails(Client newClientDetails)
{
    _clientService.UpdateClient(newClientDetails);
}

Answer 1

<input type="submit">，当在表单元素中时，将在单击时提交表单，除非您返回 false 或 event.preventDefault();

省略 preventDefault() 将始终提交表单，因为您的输入是“提交”。 e.preventDefault() 就像返回 false 一样，服务器中没有真正调用任何内容。

使用按钮而不是提交

由于您已经在使用 AJAX，因此您可以这样做。

更新您的控制器方法以返回 JsonResult。

    [HttpPost]
public JsonResult UpdateClientDetails(Client newClientDetails)
{
    _clientService.UpdateClient(newClientDetails);
    return Json("Success", JsonRequestBehavior.DenyGet);
}

Javascript。

$(".btn-primary").click(function () {
    $.ajax({
                url: 'URL to your json method',
                type: 'POST',
                dataType: 'json',
                data: 'Build your JSON object and set it here',
                cache: false,
                contentType: 'application/json; charset=utf-8',
                success: function (data) {

                    var returnValue;
                    try {
                        returnValue = data;

                        //Do your logic. 
                        $("#dialog-actions").dialog('close');

                    } catch (e) {
                        // error

                        return;
                    }


                },
                error: function () { alert("Something went wrong! Please contact the system admin.") }
            })
});