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

Question

Once again, I added an post, this time corrected, because the previous one was difficult to understand

I have a page where directories are shown something like a network drive

Here is the main Action to render view with catalogs:

public ActionResult Index(int? id)
{

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

This action renders the view:

@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>

I would like to do something such that when a user clicks on a given folder, he is shown the option rename. After clicking change name, a pop-up appears in which the user can change the name of the selected folder. And what I wrote about it is done, but not completely. For me, it works so that when you click just change the name, a pop-up window appears and @HtmlAction is launched in the "modal-body":

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

    return PartialView("_EditName", node); 
}

Here is the PartialView:

@model Tree.Models.Node



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

It works, but I passed in @Html.Action parameter "id = 3" and I would like to put there the id of the selected folder

Screen showing the problem

Answer 1

You cannot use Html.Action for this. It will execute ounce when the page loads, but you cannot update the route values dynamically client-side and have Html.Action execute again to fetch the new partial view. You would have to reload the whole page, and pass Html.Action the new value.

To do what you want you first have to add a custom click event to your "Change name" button that fetches the correct partial view, then displays the modal.

First remove data-toggle="modal" data-target="#exampleModalCenter" from you button so that Bootstrap doesn't wire up a click event to the button since we are creating our own.

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

Next write some javascript to wire up your own click event to this button:

       $('#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');
            });
        });

UPDATE

Most times I like to have my url generation on the server-side instead of having a string somewhere in javascript file or view. To do this I will geneate my url with @Url.Action on the button.

On a button you can do this:

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

And javascript update:

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

Or simply use an <a> tag (instead of a button ) and href attribute:

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

And javascript updates:

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