当我点击一个表格行时,注解应该显示在右边,而不是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)
1条答案
按热度按时间py49o6xq1#
在这个JS代码段中:
将
comment.Content
更改为comment.content
。undefined
是一个JavaScript值。当代码试图读取一个不存在的属性时,它会返回。因为你得到了两个undefined
值,这意味着有两个comment
对象,但没有一个具有Content
属性。JavaScript区分大小写,因此
Content
和content
引用两个不同的属性。根据约定,JSON属性名称是小写的。ASP.NET MVC遵循该约定并将Content
序列化为content