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

Question

又加了一个post，这次更正了，因为前面那个比较难看懂

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

以下是使用目录呈现视图的主要操作：

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>

我想做一些事情，当用户点击给定的文件夹时，他会看到重命名选项。单击更改名称后，会出现一个弹出窗口，用户可以在其中更改所选文件夹的名称。我写的关于它的内容已经完成，但还没有完全完成。对我来说，它的工作原理是当您单击只需更改名称时，会出现一个弹出窗口 window 并在 "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 新值。

要执行您想要的操作，您首先必须将自定义点击事件添加到您的 "Change name" 按钮以获取正确的局部视图，然后显示模态。

首先从您的按钮中删除 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 的 url。

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

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

Passing the selected object id to the @HTML.Action parameter

html

c#

asp.net

asp.net-mvc-4