C# 如何在引导模式下显示模型中的对象详细信息
我正在尝试从模型到引导模式获取专辑详细信息。我想点击每张专辑，并显示相关信息，如艺术家和每个特定专辑的标题 由于我使用Asp.net Core 2.2，我尝试使用Asp route id=id映射对象，但问题是它显示了所有页面的详细信息 这是我的模型C# 如何在引导模式下显示模型中的对象详细信息,c#,asp.net-core,visual-studio-2017,C#,Asp.net Core,Visual Studio 2017,我正在尝试从模型到引导模式获取专辑详细信息。我想点击每张专辑，并显示相关信息，如艺术家和每个特定专辑的标题 由于我使用Asp.net Core 2.2，我尝试使用Asp route id=id映射对象，但问题是它显示了所有页面的详细信息 这是我的模型 public class Album { public int AlbumID { get; set; } public string Artist { get; set; } public int MusicID { ge
public class Album
{
public int AlbumID { get; set; }
public string Artist { get; set; }
public int MusicID { get; set; }
public virtual ICollection<Music> Music { get; set; }
}
public async Task<IActionResult> Details(int? id) {
if (id == null)
{
return NotFound();
}
var album = await _context.Albums.FirstOrDefaultAsync(m => m.AlbumID == id);
if (album == null)
{
return NotFound();
}
return View(album);
}
<!-- Button trigger modal -->
<button type="button" asp-controller="Musics" asp-action="Details" asp-route-id="1" data-toggle="modal" data-target="#exampleModal">
我只希望获得有关艺术家、标题和专辑的详细信息，而不是所有详细信息页面。亲爱的@Rocha您没有提到要通过哪种方法获取数据，也没有提供专辑模型属性，所以在这里，我只是为MVC核心编写json代码，通过它，您可以获得音乐信息的详细信息并显示在引导模式上 离子交换法 按钮Html代码 自举模态设计 Json和JQuery
您可以使用ViewModel显示所需内容，下面是一个简单的演示： 1.1.1视图模型：
public class ArtistViewModel
{
public string Artist { get; set; }
public List<string> Title { get; set; }
}
@model IEnumerable<Album>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Artist)
</th>
<th>
@Html.DisplayNameFor(model => model.MusicID)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Artist)
</td>
<td>
@foreach (var music in item.Music)
{
@Html.DisplayFor(modelItem => music.MusicID)<br/>
}
</td>
<td>
<button type="button" id="btn1" data-id="@item.AlbumID" data-toggle="modal" data-target="#exampleModal" onclick="Click(@item.AlbumID)">detail</button>
</td>
<td>
</tr>
}
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="Close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="details">
<table id="tblAlbum" class="table table-striped">
<thead>
<tr>
<th>Artist</th>
<th>Title</th>
</tr>
</thead>
<tbody id="tblalbumbody">
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="Close()">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
@section Scripts{
<script>
function Click(id) {
$.ajax({
method: 'GET',
url: 'Details/' + id,
success: function (data) {
console.log(data);
var rows = "<tr>" +
"<td style='text-align: left;'> " + data.artist + "</td>" +
"<td style='text-align: left;'>" + data.title + "</td>"
"</tr>";
$('#tblalbumbody').append(rows);
$('#exampleModal').modal('show');
},
});
}
function Close() {
$("#tblalbumbody tr").remove();
}
</script>
}
// GET: Albums
public async Task<IActionResult> Index()
{
return View(await _context.Album.Include(a=>a.Music).ToListAsync());
}
public async Task<IActionResult> Details(int? id)
{
if (id == null)
{
return NotFound();
}
var album = await _context.Albums
.Include(a => a.Music).Where(a => a.AlbumID == id)
.Select(a => new ArtistViewModel()
{
Artist = a.Artist,
Title = a.Music.Select(m=>m.Title).ToList()
}).FirstOrDefaultAsync();
if (album == null)
{
return NotFound();
}
return new JsonResult(album);
}
5.添加索引操作谢谢你的回答，我已经更新了我的问题。谢谢你的帮助，谢谢你的帮助。如何将这些值输入相册索引中每个相册的模式。cshtmlI感谢您的帮助。然而此行a.Music.Selectm=>m.Title.ToString出现以下错误：如果我将a.Music.Selectm=>m.Title.ToList更改为a.Music.Selectm=>m.Title.ToString，则无法将类型“System.Collections.Generic.List”隐式转换为“string”。错误消失，但我在Index.cshtml，浏览器中的第33行。第33行是item.MusicHi RochaCarter07中的@foreach var music，这是我的错。我更改了ViewModel，但没有正确更新。您需要更改标题属性字符串以在ViewModel中列出。您好@Rena，再次感谢。我已按照您上面的建议进行了更改，但我遇到以下浏览器错误：NullReferenceException:对象引用未设置为对象的实例。Index.cshtml中的AspNetCore.Views\u Albums\u Index.ExecuteAsync，item.music中的第22行@foreach var music
<button id="btn1" type="button" asp-controller="Musics" asp-action="Details" value="1" data-toggle="modal" data-target="#exampleModal">Get Music Details</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-2" style="text-align:right;font-weight:bold;">Artist:</div>
<div class="col-xs-10">
<span id="spanArtist"></span>
</div>
</div>
<div class="row">
<div class="col-xs-2" style="text-align:right;font-weight:bold;">Title:</div>
<div class="col-xs-10">
<span id="spanTitle"></span>
</div>
</div>
<hr style="margin-bottom:0px;" />
<table id="tblAlbum" class="table table-striped">
<thead>
<tr>
<th style="width:5%;">S.No.</th>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody id="tblalbumbody">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#btn1').on('click', function (e) {
$('#exampleModal').modal('show');
var _MusicID = $(this).val();
$("#tblAlbum tbody tr").remove();
$.ajax({
type: 'POST',
url: '@Url.Action("MusicDetails")',
dataType: 'json',
data: {
MusicID: _MusicID
},
success: function (data) {
$('#spanArtist').html(data.artist);
$('#spanTitle').html(data.title);
$.each(data.particularsList, function (i, item) {
var rows = "<tr>" +
"<td style='text-align: center;padding:5px;'> " + item.srNo + "</td>" +
"<td style='text-align: left;padding:5px;'>" + item.item1 + "</td>" +
"<td style='text-align: left;padding:5px '>" + item.item2 + "</td>"
"</tr>";
$('#tblalbumbody').append(rows);
});
},
error: function (ex) {
alert('Failed to retrieve data.' + ex);
}
});
return false;
});
});
<script>
public class ArtistViewModel
{
public string Artist { get; set; }
public List<string> Title { get; set; }
}
@model IEnumerable<Album>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Artist)
</th>
<th>
@Html.DisplayNameFor(model => model.MusicID)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Artist)
</td>
<td>
@foreach (var music in item.Music)
{
@Html.DisplayFor(modelItem => music.MusicID)<br/>
}
</td>
<td>
<button type="button" id="btn1" data-id="@item.AlbumID" data-toggle="modal" data-target="#exampleModal" onclick="Click(@item.AlbumID)">detail</button>
</td>
<td>
</tr>
}
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="Close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="details">
<table id="tblAlbum" class="table table-striped">
<thead>
<tr>
<th>Artist</th>
<th>Title</th>
</tr>
</thead>
<tbody id="tblalbumbody">
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="Close()">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
@section Scripts{
<script>
function Click(id) {
$.ajax({
method: 'GET',
url: 'Details/' + id,
success: function (data) {
console.log(data);
var rows = "<tr>" +
"<td style='text-align: left;'> " + data.artist + "</td>" +
"<td style='text-align: left;'>" + data.title + "</td>"
"</tr>";
$('#tblalbumbody').append(rows);
$('#exampleModal').modal('show');
},
});
}
function Close() {
$("#tblalbumbody tr").remove();
}
</script>
}
// GET: Albums
public async Task<IActionResult> Index()
{
return View(await _context.Album.Include(a=>a.Music).ToListAsync());
}
public async Task<IActionResult> Details(int? id)
{
if (id == null)
{
return NotFound();
}
var album = await _context.Albums
.Include(a => a.Music).Where(a => a.AlbumID == id)
.Select(a => new ArtistViewModel()
{
Artist = a.Artist,
Title = a.Music.Select(m=>m.Title).ToList()
}).FirstOrDefaultAsync();
if (album == null)
{
return NotFound();
}
return new JsonResult(album);
}