ASP.NET MVC Ajax绑定列表数据及图片路径问题求助

1. 渲染符合要求的通知列表结构 #

修改Ajax成功回调里的$.each循环部分，替换原有的文本追加逻辑，生成你期望的<li>结构：

$.each(data.listNoti, function (index, value) {
    // 构造标准列表项
    var listItem = '<li>' +
                      '<a>' +
                        '<span class="message">' + value.Ndetails + '</span>' +
                      '</a>' +
                    '</li>';
    $('#menu1').append(listItem);
});

2. 修复头像图片路径错误问题 #

你的JavaScript写法存在两个核心问题：MVC路由顺序颠倒、字符串拼接语法错误，以下是修正方案：

方法一：提前生成基础URL（推荐） #

在页面Razor代码中生成头像接口的正确路径，存入隐藏元素避免JS硬编码路由：

<!-- 页面任意位置添加 -->
<input type="hidden" id="profileImageBaseUrl" value="@Url.Action("RetriveProfileImage", "Account")" />

然后在Ajax回调中使用该路径：

$.each(data.listNoti, function (index, value) {
    var baseUrl = $('#profileImageBaseUrl').val();
    var listItem = '<li>' +
                      '<a>' +
                        '<span class="image">' +
                          '<img src="' + baseUrl + '?id=' + value.ReUsr + '" ' +
                               'alt="Profile Image" ' +
                               'onerror="this.src=\'/Theme/production/images/Profilepic.png\'">' +
                        '</span>' +
                        '<span class="message">' + value.Ndetails + '</span>' +
                      '</a>' +
                    '</li>';
    $('#menu1').append(listItem);
});

方法二：直接构造正确路由 #

如果不想用隐藏元素，直接按照MVC控制器/动作的路由规则拼接路径：

$.each(data.listNoti, function (index, value) {
    var listItem = '<li>' +
                      '<a>' +
                        '<span class="image">' +
                          '<img src="/Account/RetriveProfileImage?id=' + value.ReUsr + '" ' +
                               'alt="Profile Image" ' +
                               'onerror="this.src=\'/Theme/production/images/Profilepic.png\'">' +
                        '</span>' +
                        '<span class="message">' + value.Ndetails + '</span>' +
                      '</a>' +
                    '</li>';
    $('#menu1').append(listItem);
});

关键修正点 #

• 路由路径改为/Account/RetriveProfileImage?id=xxx，符合MVC默认路由规则
• onerror中的路径用单引号包裹，避免与外层双引号冲突
• 确保src属性的引号正确闭合，变量拼接位置无语法错误

完整修正后的Ajax代码 #

function getData() {
    $('#menu1').empty();
    $('#menu1').append($('<li> Loading.. </li>'));
    $.ajax({
        type: 'GET',
        url: $("#Get").val(),
        dataType: 'json',
        data: {},
        success: function (data) {
            if (data.Success == true) {
                $('#menu1').empty();
                if (data.listNoti.length == 0) {
                    $('#menu1').append($('<li>There is nothing to show </li>'));
                    console.log("No Data");
                }
                $("#notiCount").empty();
                $("#notiCount").append(data.listNoti.length);
                
                var baseUrl = $('#profileImageBaseUrl').val();
                $.each(data.listNoti, function (index, value) {
                    var listItem = '<li>' +
                                      '<a>' +
                                        '<span class="image">' +
                                          '<img src="' + baseUrl + '?id=' + value.ReUsr + '" ' +
                                               'alt="Profile Image" ' +
                                               'onerror="this.src=\'/Theme/production/images/Profilepic.png\'">' +
                                        '</span>' +
                                        '<span class="message">' + value.Ndetails + '</span>' +
                                      '</a>' +
                                    '</li>';
                    $('#menu1').append(listItem);
                });
            }
        }
    });
}

内容的提问来源于stack exchange，提问作者Dev Beginner