追加数据到表格后项目中餐食信息不显示问题排查

接口测试能正常返回数据，说明后端逻辑没问题，问题出在前端视图代码上，具体问题和修复方案如下：

直接导致不显示的错误 #

你拼接表格行HTML的时候，Edit、Delete两列的单元格闭合标签写错了，漏了闭合标签开头的<，把</td>写成了/td>，生成的HTML结构非法，浏览器解析的时候直接判定整行无效不渲染，最后就只剩表头。
错误代码片段：

res += '<td> Edit/td>';
res += '<td> Delete/td>';

把这两行的/td>改成</td>就能解决核心问题。

建议补充的优化（避免后续踩坑） #

• 给AJAX请求加error回调，请求出错、JSON解析失败的时候直接在浏览器控制台打报错信息，不用瞎猜问题在哪
• 给WebAPI接口加明确路由，避免两个Get方法后续出现路由匹配冲突
• DbContext用完记得释放，不然跑久了会占满数据库连接池
• 调前端问题先按F12开开发者工具，控制台看JS报错、网络面板看接口返回，能快速定位绝大多数问题

修正后的代码参考 #

1. 视图JS部分（改完直接用就行） #

@section scripts {
    <script>
        function showMeals() {
            $.ajax({
                url: "/api/webcms",
                method: "GET",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (k, v) {
                        var res = '<tr>';
                        res += '<td>' + v.MealId + '</td>';
                        res += '<td>' + v.MealName + '</td>';
                        res += '<td>' + v.MealPrice + '</td>';
                        res += '<td>' + v.MealImg + '</td>';
                        res += '<td>' + v.Cat + '</td>';
                        res += '<td>Edit</td>';
                        res += '<td>Delete</td>';
                        res += '</tr>';
                       
                        $("#meals_tbl").append(res);
                    });
                },
                error: function(xhr, status, error) {
                    console.log("请求失败：", error);
                    console.log("接口返回内容：", xhr.responseText);
                }
            });
        }

        $(document).ready(function () {
            showMeals();
        });
    </script>
}

2. WebAPI控制器优化（可选，解决路由隐患） #

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using Delivary.Models;
using System.Web.Http;

namespace Delivary.Controllers.api
{
    public class webcmsController : ApiController
    {
        private ApplicationDbContext db = new ApplicationDbContext();

        [HttpGet]
        [Route("api/webcms/meals")]
        public IEnumerable<Meal> GetMeals()
        {
            return db.MealTable.ToList();
        }

        [HttpGet]
        [Route("api/webcms/meals/{id}")]
        public Meal GetoneMeal(int id)
        {
            return db.MealTable.SingleOrDefault(x => x.MealId == id);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

如果用了上面的特性路由，把AJAX请求里的url改成/api/webcms/meals就行。

改完刷新页面，餐食数据就会正常加载到表格里。

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