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

Question

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>

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