JQuery三元运算符逻辑异常：动态按钮渲染不符合预期

需求说明：

• 基于isAssigned变量动态切换按钮样式与行为：
  • 当isAssigned为false时，渲染<button class="btn btn-success-outlined" data-action="join">Join</button>，点击跳转至Join控制器方法
  • 当isAssigned为true时，渲染<button class="btn btn-success" data-action="leave">Joined</button>，点击跳转至Leave控制器方法

实际异常：无论isAssigned实际取值是true还是false，页面始终渲染Joined按钮。已通过console.log确认isAssigned值正确且未被其他JS代码覆盖，改用if else语句也无法解决。

相关代码 #

Razor视图代码 #

@model TaskManager.Application.Task.TaskDto

...

<div class="card-footer" id="buttons">
       <!-- JS 会填充此处内容 -->          
</div>

其余代码...

<script>
    var encodedName = "@Html.Raw(Model.EncodedName)";
    var isAssigned = "@Html.Raw(Model.IsAssigned)";
</script>
<script src="~/js/TaskManager/Details.js"></script>

JavaScript代码 #

document.addEventListener("DOMContentLoaded", function () {
    var referenceLinkButton = document.getElementById("referenceLinkButton");
    var referenceLink = referenceLinkButton.dataset.referenceUrl;

    referenceLinkButton.addEventListener("click", function () {
        if (isValidURL(referenceLink)) {
            window.open(referenceLink, "_blank");
        }
    });

    function isValidURL(url) {
        var pattern = /^(https?:\/\/)/i;
        return pattern.test(url);
    }

    // 使用 Razor 视图中定义的全局变量
    let data = {
        encodedName: encodedName,
        isAssigned: isAssigned
    };

    const container = $("#buttons")

    function RenderJoinButton(data, container) {
        container.empty();
        const button = data.isAssigned
            ? `<button class="btn btn-success" data-action="leave">Joined</button>`
            : `<button class="btn btn-success-outlined" data-action="join">Join</button>`

        container.append(button);

        container.find('[data-action="join"]').click(function (event) {
            event.preventDefault();
            const encodedName = $(this).data('encodedname');
            navigateToProjectManagerEdit(encodedName);
        });

        container.find('[data-action="leave"]').click(function (event) {
            event.preventDefault();
            const encodedName = $(this).data('encodedname');
            navigateToTaskManagerIndex(encodedName);
        });
    };

    RenderJoinButton(data, container)
});

问题原因 #

核心问题出在Razor视图中isAssigned的赋值方式：你把布尔值用双引号包裹，导致JS中拿到的是字符串类型的"true"或"false"。在JavaScript的布尔判断逻辑里，任何非空字符串都会被判定为true，因此三元运算符永远执行第一个分支（渲染Joined按钮）。

解决方案 #

方案1：直接输出布尔值（推荐） #

修改Razor视图中的isAssigned赋值，去掉双引号，让Razor直接输出布尔值给JS：

<script>
    var encodedName = "@Html.Raw(Model.EncodedName)";
    var isAssigned = @Html.Raw(Model.IsAssigned);
</script>

方案2：在JS中转换字符串为布尔值 #

如果无法修改视图代码，可在JS赋值时手动转换类型：

let data = {
    encodedName: encodedName,
    isAssigned: isAssigned === "true" // 将字符串转为布尔值
};

额外修复：按钮缺失data-encodedname属性 #

当前按钮模板中没有携带encodedName数据，点击事件里的$(this).data('encodedname')会返回undefined，需要在按钮模板中补充该属性：

const button = data.isAssigned
    ? `<button class="btn btn-success" data-action="leave" data-encodedname="${data.encodedName}">Joined</button>`
    : `<button class="btn btn-success-outlined" data-action="join" data-encodedname="${data.encodedName}">Join</button>`

内容的提问来源于stack exchange，提问作者luhmückpickle