.net `undefined`显示在MVC详细信息中

7uzetpgm  于 2023-03-31  发布在  .NET
关注(0)|答案(1)|浏览(164)

当我点击一个表格行时,注解应该显示在右边,而不是undefined

该应用程序的主要目标是从数据库中读取公司,当我单击html表中的公司行时,读取并显示每个公司的评论。当我尝试读取评论内容时,每个评论都显示'undefined'(例如:测试公司有2条评论:“Comment test 1”,“Comment test 2”)。对于这个项目,我使用了MVC模板和EntityCoreFramework。
下面是显示注解的代码:

@section scripts {  
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <script>
            $(function () {               
                var selectedCompanyId = $("tbody tr:first").data("company-id");
                $("tbody tr:first").addClass("selected");

                $("tbody tr").on("click", function () {                   
                    $("tbody tr").removeClass("selected");
                   
                    $(this).addClass("selected");
                   
                    var companyId = $(this).data("company-id");
                    
                    $.get("/Home/GetComments", { companyId: companyId }, function (data) {
                        
                        var commentsHtml = "";
                        data.forEach(function (comment) {
                            commentsHtml += "<div>" + comment.Content + "</div>";
                        });
                       
                        $("#company-comments").html(commentsHtml);
                    });
                });
            });
        </script>        
    }

HomeController.cs

public class HomeController : Controller
    {
        private readonly CompanyDataContext context;

        public HomeController(CompanyDataContext context)
        {
            this.context = context;
        }

        public IActionResult Index()
        {
            var companies = this.context.Companies
                .Select(c => new CompanyViewModel
                {
                    CompanyId = c.CompanyId,
                    Name = c.Name,
                    Count = c.Comments.Count,
                    Comments = c.Comments.Select(co => new CommentViewModel
                    {
                        CommentCompanyId = co.CompanyId,
                        CommentId = co.CommentId,
                        Content = co.Content
                    }).ToList()
                }).ToList();

            return View(companies);
        }

        [HttpGet]
        public List<Comment> GetAll()
        {
            return context.Comments.ToList();
        }
        public async Task<IActionResult> GetComments(int companyId)
        {
            var company = await this.context.Companies
                .Include(c => c.Comments)
                .FirstOrDefaultAsync(c => c.CompanyId == companyId);

            if (company == null)
            {
                return NotFound();
            }

            var comments = company.Comments.Select(c => new CommentViewModel
            {
                CommentCompanyId = c.CompanyId,
                CommentId = c.CommentId,
                Content = c.Content
            });

            return Ok(comments);
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

Index.cshtml

@model IEnumerable<CompanyApp.ViewModels.CompanyViewModel>

@{
    ViewData["Title"] = "Home Page";
}

<div style="display: flex;" class=" container">
    <div class="box1">
        <table id="my-table" class="my-table">
            <thead>
                <tr>
                    <th>Company ID</th>
                    <th>Company Name</th>
                    <th>Comments</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var company in Model)
                {
                    <tr data-company-id="@company.CompanyId">
                        <td>@company.CompanyId</td>
                        <td>@company.Name</td>
                        <td align="center">@company.Count</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    <div id="company-comments" class="box2"></div>        
</div>

    @section scripts {  
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <script>
            $(function () {               
                var selectedCompanyId = $("tbody tr:first").data("company-id");
                $("tbody tr:first").addClass("selected");

                $("tbody tr").on("click", function () {                   
                    $("tbody tr").removeClass("selected");
                   
                    $(this).addClass("selected");
                   
                    var companyId = $(this).data("company-id");
                    
                    $.get("/Home/GetComments", { companyId: companyId }, function (data) {
                        
                        var commentsHtml = "";
                        data.forEach(function (comment) {
                            commentsHtml += "<div>" + comment.Content + "</div>";
                        });
                       
                        $("#company-comments").html(commentsHtml);
                    });
                });
            });
        </script>        
    }

SS与当前结果,注解应显示在右侧(https://i.stack.imgur.com/Axh18.png

py49o6xq

py49o6xq1#

在这个JS代码段中:

data.forEach(function (comment) {
    commentsHtml += "<div>" + comment.Content + "</div>";
});

comment.Content更改为comment.content
undefined是一个JavaScript值。当代码试图读取一个不存在的属性时,它会返回。因为你得到了两个undefined值,这意味着有两个comment对象,但没有一个具有Content属性。
JavaScript区分大小写,因此Contentcontent引用两个不同的属性。根据约定,JSON属性名称是小写的。ASP.NET MVC遵循该约定并将Content序列化为content

相关问题