Javascript 点击按钮触发mvc表单中的模式弹出窗口

我在mvc中有一个视图，其中显示模型的详细信息。模式弹出窗口工作正常，直到我没有将其放入表单块。现在它只是回发，而不是显示弹出窗口

这是我的看法：

@using App.Portal.WebUI.Controllers
@using MvcPaging
@model IPagedList<App.Models.Device>

    @{
        ViewBag.Title = "Manage Devices";
    }

<h2>Manage Devices</h2>
@Html.ActionLink("Add New Device", "Manage", "Handhelds", new { @class = "editUser btn btn-info" })
<button id="showInactive" class="btn btn-primary">Show Inactive Devices</button>
<br /><br />
@using (Ajax.BeginForm("Home", "Handhelds",
    new AjaxOptions {UpdateTargetId = "grid-list", HttpMethod = "get", LoadingElementId = "loading", OnBegin = "beginPaging", OnSuccess = "successPaging", OnFailure = "failurePaging"},
    new {id = "frm-search"}))
{
    <div class="input-append">
        <input class="span2" id="appendedInputButton" type="text" name="handheld" placeholder="Enter Text" />
        <button class="btn" type="submit">
            <i class="icon-search"></i>&nbsp;Search</button>
    </div>
    <br />
    <div id="grid-list">
        <div class="table-responsive">
            <table id="dataTable" class="table table-striped">
                <tr>
                    <td>No</td>
                    <td>Device ID</td>
                    <td>Serial Number</td>
                    <td>Options</td>
                </tr>
                @foreach (var device in Model)
                {
                    <tr>
                        <td>@device.DeviceID</td>
                        <td>@device.DeviceIDView</td>
                        <td>@device.DeviceSerialNumber</td>
                        <td>
                            @Html.ActionLink("Edit", "Manage", new {id = @device.DeviceID}, new {@class = "editUser btn btn-info"})
                            <button id="btnDeleteHandheld" class="deleteHandheld btn btn-danger" data-id="@device.DeviceID">Delete</button>
                        </td>
                    </tr>
                }
            </table>
        </div>
    </div>
}

<script type="text/javascript">
    $(document).ready(function () {
        $('button.btnAddDevice').click(function () {
            $('#addNewDevice').modal('show');
        });

        $('button.deleteHandheld').click(function () {
            $("#hfDeviceId").val($(this).data('id'));
            $('#deleteConfirm').modal('show');
        });

        $('button.deleteDeviceConfirm').click(function () {
            $.ajax({
                url: '@Url.Action("Delete", "Handhelds")',
                data: { deviceid: $("#hfDeviceId").val() },
                dataType: "json",
                type: 'POST',
                success: function (data) {
                    if (data === "OK") {
                        $('#deleteConfirm').modal('hide');
                        $('#deleteConfirmation').modal('show');
                        setTimeout(function () {
                            location.reload();
                        }, 3000);
                    }
                },
                error: function (textStatus, errorThrown) {
                    Success = false;//doesn't goes here
                }
            });
        });
    });

</script>

<div id="deleteConfirm" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h4>Are you sure you want to remove the device?</h4>
                <button class="btn btn-success deleteDeviceConfirm">Yes</button>
                <button class="btn btn-danger" data-dismiss="modal">No</button>
                <input type="hidden" id="hfDeviceId" />
            </div>
        </div>
    </div>
</div>

<div id="deleteConfirmation" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h4>Device removed</h4>
                <button class="btn btn-danger btn-block" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

@使用App.Portal.WebUI.Controllers
@使用MvcPaging
@IPagedList模型
@{
ViewBag.Title=“管理设备”；
}
管理设备
@ActionLink（“添加新设备”、“管理”、“手持设备”、新{@class=“editUser btn btn info”}）
显示非活动设备



@使用（Ajax.BeginForm（“Home”、“Handhelds”），
新的AjaxOptions{UpdateTargetId=“grid list”，HttpMethod=“get”，LoadingElementId=“loading”，OnBegin=“beginPaging”，OnSuccess=“successPaging”，OnFailure=“failurePaging”}，
新的{id=“frm search”}）
{
搜寻


不
设备ID
序列号
选择权
@foreach（模型中的var装置）
{
@device.DeviceID
@设备视图
@设备。设备序列号
@ActionLink（“编辑”、“管理”，新的{id=@device.DeviceID}，新的{@class=“editUser btn btn info”}）
删除
}
}
$（文档）.ready（函数（）{
$（'button.btnaddevice'）。单击（函数（）{
$（'#addNewDevice'）.modal（'show'）；
});
$（'button.delete'）。单击（函数（）{
$（“#hfDeviceId”）.val（$（this.data（'id'））；
$（'deleteConfirm'）.modal（'show'）；
});
$（'button.DeleteDeviceConfig'）。单击（函数（）{
$.ajax({
url:'@url.Action（“删除”、“手持设备”），
数据：{deviceid:$（“#hfDeviceId”）.val（）}，
数据类型：“json”，
键入：“POST”，
成功：功能（数据）{
如果（数据==“正常”）{
$（'#deleteConfirm'）.modal（'hide'）；
$（“#删除确认”）.modal（'show'）；
setTimeout（函数（）{
location.reload（）；
}, 3000);
}
},
错误：函数（textStatus，errorshown）{
Success=false；//不在这里
}
});
});
});
是否确实要删除该设备？
对
不
移除的设备
好啊

---

我需要id为BTNDelete掌上电脑的按钮来触发相关的模式弹出窗口。我需要改变什么

我认为默认情况下，

按钮

使输入提交。要防止post，请像这样使用preventDefault：

   $('button.deleteHandheld').click(function (e) {
        e.preventDefault();
        $("#hfDeviceId").val($(this).data('id'));
        $('#deleteConfirm').modal('show');
    });

您也可以用以下按钮替换您的按钮：

<input type="button" "id="btnDeleteHandheld" class="deleteHandheld btn btn-danger" data-id="@device.DeviceID">Delete</input>

---

是否尝试将“事件”作为按钮单击的函数参数并调用e.preventDefault（）？在函数中的语句末尾是否也返回false？