ASP.NET Core MVC link added by jQuery does not work

Project on ASP NET Core MVC 3.1, jQuery v3.5.1, Bootstrap v4.1.3.

Case – get drop down list items based on user role. Drop down component from Bootstrap 4.

What works:

1. Getting drop down items from server by ajax
2. Adding <a> with asp-controller=Profile and asp-action=Admin tags.

What does not work:

1. I expected such scenario – clicking drop down item and sending http request on server to get admin profile page(Profile/Admin)

jQuery code which I use to create <a> elements in <div> drop-down:

<script>
    $(document).ready(function () {
        $('#dropdownMenuLink').on('click', function () {
            GetDropDownMenu();
        });
    });

    function GetDropDownMenu() {
        $.ajax({
            type: "GET",
            url: "/Menu/GetProfileMenu",
            success: function (response) {
                console.log(response);
                var menuDiv = $(".dropdown-menu");
                $.each(response, function (i, element) {
                    console.log(element);
                    var controllerAndAction = element.path.split('/');
                    var aElement = $('<a>').attr({ 'asp-controller': controllerAndAction[0], 'asp-action': controllerAndAction[1], 'class':"dropdown-item" });
                    aElement.text(element.text);
                    menuDiv.append(aElement);
                });
            }
        });
    }
</script>

Html drop down element:

<div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Profile
    </a>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    </div>
</div>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I don’t think you can set the asp-* properties after rendering like that.

Instead just set the href attribute of the link.

<script>

    $(document).ready(function () {
        $('#dropdownMenuLink').on('click', function () {
            GetDropDownMenu();
        });
    });

    function GetDropDownMenu() {
        $.ajax({
            type: "GET",
            url: "/Menu/GetProfileMenu",
            success: function (response) {
                console.log(response);
                var menuDiv = $(".dropdown-menu");
                $.each(response, function (i, element) {
                    console.log(element);
                    var controllerAndAction = element.path.split('/');
                    //set href however you want
                    var aElement = $('<a>').attr({ 'href': "/" + controllerAndAction[0] + "/"+ controllerAndAction[1], 'class':"dropdown-item" });
                    aElement.text(element.text);
                    menuDiv.append(aElement);
                });
            }
        });
    }

</script>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0