将选定的对象 ID 传递给 @HTML.Action 参数

Question

我又加了一个帖子，这次更正了，因为上一个比较难理解

我有一个页面，其中显示的目录类似于网络驱动器

这是使用目录渲染视图的主要操作：

public ActionResult Index(int? id)
{

    return View(_context.NodeEntities.Where(x=>x.ParentId == id));
}

这个动作渲染视图：

@model IEnumerable<Tree.Models.Node>

@{

    ViewBag.Title = "Home Page";
}
<div class="container">
    <div class="row">
        @foreach (var node in Model)
        {
            <div class="col-md-3 one-node mx-3" id="@node.Id" onClick="Select(this.id)">
                <img src="https://img.icons8.com/color/144/000000/folder-invoices.png">
                @Html.ActionLink(node.Name, "Index", "Home", new { node.Id }, new { @style = "display:block;" })

            </div>
        }
    </div>


    <!-- Button trigger modal -->
    <button id="change_name" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
        Change name
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Change name:</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="modalBodyId" class="modal-body">

                    @Html.Action("EditName", "Home", new { id = 1 })
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    var div;
    function Select(clicked_id) {

        if (div != null) {
            div.style.removeProperty('background-color');
        }
        div = document.getElementById(clicked_id);
        div.style.backgroundColor = "lightgreen";
    }
</script>

我想做一些事情，当用户单击给定文件夹时，会显示重命名选项。单击更改名称后，将出现一个弹出窗口，用户可以在其中更改所选文件夹的名称。我写的关于它的内容已经完成，但还没有完全完成。对我来说，它的工作原理是当您单击更改名称时，会出现一个弹出窗口并在“modal-body”中启动@HtmlAction：

public PartialViewResult EditName(int id)
{
    Node node = _context.NodeEntities.FirstOrDefault(x => x.Id == id);

    return PartialView("_EditName", node); 
}

这是部分视图：

@model Tree.Models.Node



@using (Html.BeginForm("ZmienNazwe", "Home"))
{
    <div class="form-group">
        @Html.TextBoxFor(m => m.Name)
    </div>
}

它有效，但我传入了@Html.Action 参数“id = 3”，我想将所选文件夹的 id 放在那里

Screen showing the problem

Answer 1

您不能为此使用Html.Action。它会在页面加载时执行 ounce，但您不能在客户端动态更新路由值并让 Html.Action 再次执行以获取新的局部视图。您必须重新加载整个页面，并传递 Html.Action 新值。

要执行您想要的操作，您首先必须向“更改名称”按钮添加一个自定义点击事件，以获取正确的局部视图，然后显示模式。

首先从你的按钮中删除data-toggle="modal" data-target="#exampleModalCenter"，这样 Bootstrap 就不会将点击事件连接到按钮，因为我们正在创建自己的按钮。

<button id="change_name" type="button" class="btn btn-primary">
    Change name
</button>

接下来编写一些 javascript 将您自己的点击事件连接到此按钮：

       $('#change_name').on('click', function (e) {
            e.preventDefault();

            var id = 1; // TODO: Get id of selected node

            $.get('/path/to/EditName/' + id, function (html) {
                $('#exampleModalCenter .modal-body').html(html);
                $('#exampleModalCenter').modal('show');
            });
        });

更新

大多数时候，我喜欢在服务器端生成 url，而不是在 javascript 文件或视图中的某处使用字符串。 为此，我将在按钮上使用@Url.Action 生成我的网址。

在button 上，您可以这样做：

<button id="change_name" type="button" class="btn btn-primary" data-base-url="@Url.Action("EditName", "Controller")">
    Change name
</button>

还有 javascript 更新：

var url = $(this).data('base-url');
$.get(url  + '/' + id, function (html) {

或者只需使用<a> 标记（而不是button）和href 属性：

<a id="change_name" href="@Url.Action("EditName", "Controller")" class="btn btn-primary">
        Change name
    </a>

还有 javascript 更新：

$.get(this.href+ '/' + id, function (html) {