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

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)