Question

我目前有面板，每个面板都有一个与之关联的ID，该ID保存在每个面板的data-id属性中。我可以通过JavaScript轻松搞定。一个面板我有一个删除按钮，它将删除面板及其在数据库中的条目。单击此删除按钮后，将使用Html.BeginForm（）启动模式，该Html.BeginForm（）连接到我的控制器上的操作。我想知道是否可以通过JavaScript将小部件ID添加到路由值？

这是我的模态：

<div class="modal fade" id="deleteWidgetModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Delete widget?</h4><!--add depending on which panel you have clicked-->
        </div>
        <div class="modal-body" id="myModalBody">
            <!--Depending on which panel insert content-->
            @using (Html.BeginForm("DeleteWidgetConfirmed", "Dashboard", FormMethod.Post,))
            {
                @Html.AntiForgeryToken()

                <div class="form-horizontal">
                    Do you wish to delete this widget?

                    <div class="form-group">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" value="DeleteWidgetConfirmed" class="btn btn-danger btn-ok" id="delete-widget">Delete</button>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

这是JavaScript：

    /*---------------------------------------------DELETING PANELS-------------------------------------------------*/
$(document).ready(function () {
    $('#columns').on('click', '.glyphicon.glyphicon-trash', function (event) {
        //get id here

        //toggle the modal
        $('#deleteWidgetModal').modal('toggle');

        //pass id to form
    });
});

$(document).ready(function () {
    document.getElementById('#delete-widget').onclick = function (event) {
        event.preventDefault();

        var parentElement = $(this).closest(".col-md-4.column");
        var targetElement = $(this).closest(".panel.panel-default");
        targetElement.remove();

        //parentElement.addClass("expand-panel");
        checkEmptyPanelContainers();
    }
});

Answer 1

在执行javascript和用户交互之前，Html.BeginForm会转换为<form>标记。您可以使用类似

之类的内容修改该表单

$("form").prop('myattribute', value)

使用javascript将路由值传递给Html.BeginForm

1 个答案: