將選定的對象 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) {