将所选对象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>

我想做一些事情，当用户点击给定的文件夹时，他会看到重命名选项。单击更改名称后，会出现一个弹出窗口，用户可以在其中更改所选文件夹的名称。我写的关于它的东西已经完成了，但还没有完全完成。对我来说，它的工作原理是，当你点击更改名称时，会出现一个弹出窗口，并在"模态主体"中启动@HtmlAction：

public PartialViewResult EditName(int id)
{
Node node = _context.NodeEntities.FirstOrDefault(x => x.Id == id);
return PartialView("_EditName", node); 
}

这是PartialView:

@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。当页面加载时，它将执行盎司，但您不能在客户端动态更新路由值，并让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生成我的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) {