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

Posted 2023-02-22

【中文标题】使用 javascript 将路由值传递给 Html.BeginForm

【英文标题】：Pass routing value to Html.BeginForm using javascript

【发布时间】：2015-08-16 11:03:51

【问题描述】：

我目前有面板，每个面板都有一个与之关联的 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();
    
);

【问题讨论】：

你能放一些代码来帮助你理解你的需求吗？

【参考方案1】：

在您的 javascript 和用户交互执行之前，Html.BeginForm 会转换为 <form> 标记。您可以使用类似这样的方式修改该表单

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

【讨论】：

你知道我的情况是什么 myattribute 吗？路线价值？

@Johnathon64 HTML 没有路由/MVC 的概念。您需要做的是在表单上设置 Action。我建议您使用服务器端代码输出具有已知值的示例路由，然后在 JS 中替换实际值。当然，如果您使用多条路线/需要多种样式，则需要单独执行每种类型，这不太理想

action 是表单标签上的属性名称