Accessing dynamically created variable in onclick-CodePudding

I have a foreach loop, enumerating my models to create a table. In this table, i need to have an edit button for each model where i call a javascript function to show a modal.

I need to pass the model into the javascript function, but i can't get this to work. I've worked out how to dynamically create the variables, but not how to use it as input.

Right now, it's just hardcoded to use 'department1', which is just the first created. I need toggleManageDepartmentModal to be called with (department @department.Id)

Creating the table

@foreach (var department in Model.PaginatedDepartments())
            {
                <tr>
                    <td>@department.Name</td>
                    <td>@department.Description</td>
                    <td >@department.Created.ToLocalTime().ToString("dd-MM-yyyy")</td>
                    <td >
                        <div >
                            <script>
                                //Dynamically create variables for each department
                                eval('var department'   @department.Id   '= @Json.Serialize(department);');
                            </script>

                            <button type="button"  onclick="toggleManageDepartmentModal(department1)">
                                <span  aria-hidden="true"></span>
                                Rediger
                            </button>
                        </div>   
                    </td>
                </tr>
            }

Javascript function to show modal

function toggleManageDepartmentModal(department) {
        var model = {
            department : department,
            controller : 'Admin',
            action : 'ManageDepartment'
        };
        $.ajax({
            type: "Post",
            url: "/Modals/ShowManageDepartmentModal",
            data:model,
            success: function (data) {
                $("#loadModal").html(data);
                $('#modal-manage-department').modal('show')
            }
        })
    }

I would like to do something like this:

<button type="button"  onclick='toggleManageDepartmentModal(Eval("department"   @department.Id))'>
                                <span  aria-hidden="true"></span>
                                Rediger
                            </button>

CodePudding user response：

I am not exactly familiar with the tool (a templating engine?) you are using to build your HTML, but I will try to help.

Traditionally, before the JS framework takeover, the way to attach data to HTML elements was to use data-attributes. In your case, I would use something like data-department. I would dare to say that it's much better way then using script tags eval()

The simplest way would be to attach the data to the button. Probably like a serialized JSON:

<button data-department="@DataGoesHere" type="button" >
Rediger</button>

How about the onclick function? You can get the button's reference by using this argument:

<button onclick="toggleManageDepartmentModal(this)" data-department="@DataGoesHere" type="button" >
Rediger</button>

Then, you can access the data by querying this.dataset.department:

function toggleManageDepartmentModal(targetElement) {
    // `this` is event's target element
    const department = targetElement.dataset.department;
    // or rather JSON.parse(targetElement.dataset.department)
    // or targetElm.getAttribute('data-department')
    …
}

There's one caveat – because data-attributes are part of the 'public' markup, you really should not put anything confidential in there (but I guess that this is not the case).

CodePudding user response：

I ended up taking a little different approch which works very well.

@foreach (var department in Model.PaginatedDepartments())
            {
                <tr>
                    <td>@department.Name</td>
                    <td>@department.Description</td>
                    <td >@department.Created.ToLocalTime().ToString("dd-MM-yyyy")</td>
                    <td >
                        <div >
                            <script>
                                //Store model JSON in localStorage
                                localStorage.setItem('department'   @department.Id, JSON.stringify(@Json.Serialize(department)))
                            </script>

                            <button type="button"  onclick="toggleManageDepartmentModal(@department.Id)">
                                <span  aria-hidden="true"></span>
                                Rediger
                            </button>
                        </div>   
                    </td>
                </tr>
            }


function toggleManageDepartmentModal(id) {
        var modelJSON = localStorage.getItem('department'   id);

        var model = {
            department : JSON.parse(modelJSON),
            controller : 'Admin',
            action : 'ManageDepartment'
        };
        $.ajax({
            type: "Post",
            url: "/Modals/ShowManageDepartmentModal",
            data:model,
            success: function (data) {
                $("#loadModal").html(data);
                $('#modal-manage-department').modal('show')
            }
        })
    }