将选定的对象 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 放在那里

显示问题的屏幕

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) {