【发布时间】：2022-08-19 19:14:03
【问题描述】：
我有一个视图在一个模型中显示用户的名字和姓氏，另一个模型存储他们图片的 url。所有这些都连接到视图模型，并显示为单个对象。但是，我有一些需要 foreach 循环的东西，但我不能使用IEnumerable，因为这会引发错误。
因此，我不想将它们放在一个视图模型中，而是想使用存储IEnumerable 的局部视图，然后在常规视图上调用它。但是当我这样做时，什么都没有出现。我正在使用 jQuery 渲染局部视图
部分观点：
@model IEnumerable<Website_friend_feature.Models.Messages>
@foreach(var message in Model)
{
<div class=\"w3-container w3-card w3-white w3-round w3-margin\"><br>
<img src=\"/w3images/avatar2.png\" alt=\"Avatar\" class=\"w3-left w3-circle w3-margin-right\" style=\"width:60px\">
<span class=\"w3-right w3-opacity\">1 min</span>
<h4>John Doe</h4><br>
<hr class=\"w3-clear\">
<p> @message.Message </p>
<div class=\"w3-row-padding\" style=\"margin:0 -16px\">
<div class=\"w3-half\">
<img src=\"/w3images/lights.jpg\" style=\"width:100%\" alt=\"Northern Lights\" class=\"w3-margin-bottom\">
</div>
</div>
<button type=\"button\" class=\"w3-button w3-theme-d1 w3-margin-bottom\"><i class=\"fa fa-thumbs-up\"></i> Like</button>
<button type=\"button\" class=\"w3-button w3-theme-d2 w3-margin-bottom\"><i class=\"fa fa-comment\"></i> Comment</button>
</div>
}
profile.cshtml:
@model Website_friend_feature.Models.ProfilePictureViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS Template</title>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<link rel=\"stylesheet\" href=\"https://www.w3schools.com/w3css/4/w3.css\">
<link rel=\"stylesheet\" href=\"https://www.w3schools.com/lib/w3-theme-blue-grey.css\">
<link rel=\'stylesheet\' href=\'https://fonts.googleapis.com/css?family=Open+Sans\'>
<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">
<style>
html, body, h1, h2, h3, h4, h5 {font-family: \"Open Sans\", sans-serif}
</style>
</head>
<body class=\"w3-theme-l5\">
<!-- Navbar -->
<div class=\"w3-top\">
<div class=\"w3-bar w3-theme-d2 w3-left-align w3-large\">
<a class=\"w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-theme-d2\" href=\"javascript:void(0);\" onclick=\"openNav()\"><i class=\"fa fa-bars\"></i></a>
<a href=\"#\" class=\"w3-bar-item w3-button w3-padding-large w3-theme-d4\"><i class=\"fa fa-home w3-margin-right\"></i>Logo</a>
<a href=\"#\" class=\"w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white\" title=\"News\"><i class=\"fa fa-globe\"></i></a>
<a href=\"#\" class=\"w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white\" title=\"Account Settings\"><i class=\"fa fa-user\"></i></a>
<a href=\"#\" class=\"w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white\" title=\"Messages\"><i class=\"fa fa-envelope\"></i></a>
<div class=\"w3-dropdown-hover w3-hide-small\">
<button class=\"w3-button w3-padding-large\" title=\"Notifications\"><i class=\"fa fa-bell\"></i><span class=\"w3-badge w3-right w3-small w3-green\">3</span></button>
<div class=\"w3-dropdown-content w3-card-4 w3-bar-block\" style=\"width:300px\">
<a href=\"#\" class=\"w3-bar-item w3-button\">One new friend request</a>
<a href=\"#\" class=\"w3-bar-item w3-button\">John Doe posted on your wall</a>
<a href=\"#\" class=\"w3-bar-item w3-button\">Jane likes your post</a>
</div>
</div>
<a href=\"#\" class=\"w3-bar-item w3-button w3-hide-small w3-right w3-padding-large w3-hover-white\" title=\"My Account\">
<img src=\"/w3images/avatar2.png\" class=\"w3-circle\" style=\"height:23px;width:23px\" alt=\"Avatar\">
</a>
</div>
</div>
<!-- Navbar on small screens -->
<div id=\"navDemo\" class=\"w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium w3-large\">
<a href=\"#\" class=\"w3-bar-item w3-button w3-padding-large\">Link 1</a>
<a href=\"#\" class=\"w3-bar-item w3-button w3-padding-large\">Link 2</a>
<a href=\"#\" class=\"w3-bar-item w3-button w3-padding-large\">Link 3</a>
<a href=\"#\" class=\"w3-bar-item w3-button w3-padding-large\">My Profile</a>
</div>
<!-- Page Container -->
<div class=\"w3-container w3-content\" style=\"max-width:1400px;margin-top:80px\">
<!-- The Grid -->
<div class=\"w3-row\">
<!-- Left Column -->
<div class=\"w3-col m3\">
<!-- Profile -->
<div class=\"w3-card w3-round w3-white\">
<div class=\"w3-container\">
<p class=\"w3-center\"><img src=@Model.ProfilePictureVM.Picture class=\"w3-circle\" style=\"height:106px;width:106px\" alt=\"Avatar\"></p>
<h4 class=\"w3-center\" style=\"margin-bottom: 0px;\">@Model.ApplicationUserVM.FirstName @Model.ApplicationUserVM.LastName</h4>
<h2 style=\"color: lightgray; text-align: center; font-size: 9px; margin-top: 0px; \"> @@@Model.ApplicationUserVM.UserName</h2>
<hr>
<p><i class=\"fa fa-pencil fa-fw w3-margin-right w3-text-theme\"></i> Designer, UI</p>
<p><i class=\"fa fa-home fa-fw w3-margin-right w3-text-theme\"></i> London, UK</p>
<p><i class=\"fa fa-birthday-cake fa-fw w3-margin-right w3-text-theme\"></i> April 1, 1988</p>
</div>
</div>
<br>
<!-- Accordion -->
<div class=\"w3-card w3-round\">
<div class=\"w3-white\">
<button onclick=\"myFunction(\'Demo1\')\" class=\"w3-button w3-block w3-theme-l1 w3-left-align\"><i class=\"fa fa-circle-o-notch fa-fw w3-margin-right\"></i> My Groups</button>
<div id=\"Demo1\" class=\"w3-hide w3-container\">
<p>Some text..</p>
</div>
<button onclick=\"myFunction(\'Demo2\')\" class=\"w3-button w3-block w3-theme-l1 w3-left-align\"><i class=\"fa fa-calendar-check-o fa-fw w3-margin-right\"></i> My Events</button>
<div id=\"Demo2\" class=\"w3-hide w3-container\">
<p>Some other text..</p>
</div>
<button onclick=\"myFunction(\'Demo3\')\" class=\"w3-button w3-block w3-theme-l1 w3-left-align\"><i class=\"fa fa-users fa-fw w3-margin-right\"></i> My Photos</button>
<div id=\"Demo3\" class=\"w3-hide w3-container\">
<div class=\"w3-row-padding\">
<br>
<div class=\"w3-half\">
<img src=\"/w3images/lights.jpg\" style=\"width:100%\" class=\"w3-margin-bottom\">
</div>
<div class=\"w3-half\">
<img src=\"/w3images/nature.jpg\" style=\"width:100%\" class=\"w3-margin-bottom\">
</div>
<div class=\"w3-half\">
<img src=\"/w3images/mountains.jpg\" style=\"width:100%\" class=\"w3-margin-bottom\">
</div>
<div class=\"w3-half\">
<img src=\"/w3images/forest.jpg\" style=\"width:100%\" class=\"w3-margin-bottom\">
</div>
<div class=\"w3-half\">
<img src=\"/w3images/nature.jpg\" style=\"width:100%\" class=\"w3-margin-bottom\">
</div>
<div class=\"w3-half\">
<img src=\"/w3images/snow.jpg\" style=\"width:100%\" class=\"w3-margin-bottom\">
</div>
</div>
</div>
</div>
</div>
<br>
<!-- Interests -->
<div class=\"w3-card w3-round w3-white w3-hide-small\">
<div class=\"w3-container\">
<p>Interests</p>
<p>
<span class=\"w3-tag w3-small w3-theme-d5\">News</span>
<span class=\"w3-tag w3-small w3-theme-d4\">W3Schools</span>
<span class=\"w3-tag w3-small w3-theme-d3\">Labels</span>
<span class=\"w3-tag w3-small w3-theme-d2\">Games</span>
<span class=\"w3-tag w3-small w3-theme-d1\">Friends</span>
<span class=\"w3-tag w3-small w3-theme\">Games</span>
<span class=\"w3-tag w3-small w3-theme-l1\">Friends</span>
<span class=\"w3-tag w3-small w3-theme-l2\">Food</span>
<span class=\"w3-tag w3-small w3-theme-l3\">Design</span>
<span class=\"w3-tag w3-small w3-theme-l4\">Art</span>
<span class=\"w3-tag w3-small w3-theme-l5\">Photos</span>
</p>
</div>
</div>
<br>
<!-- Alert Box -->
<div class=\"w3-container w3-display-container w3-round w3-theme-l4 w3-border w3-theme-border w3-margin-bottom w3-hide-small\">
<span onclick=\"this.parentElement.style.display=\'none\'\" class=\"w3-button w3-theme-l3 w3-display-topright\">
<i class=\"fa fa-remove\"></i>
</span>
<p><strong>Hey!</strong></p>
<p>People are looking at your profile. Find out who.</p>
</div>
<!-- End Left Column -->
</div>
<!-- Middle Column -->
<div class=\"w3-col m7\">
<div class=\"w3-row-padding\">
<div class=\"w3-col m12\">
<div class=\"w3-card w3-round w3-white\">
<div class=\"w3-container w3-padding\">
<h6 class=\"w3-opacity\">Social Media template by w3.css</h6>
<p contenteditable=\"true\" class=\"w3-border w3-padding\">Status: Feeling Blue</p>
<button type=\"button\" class=\"w3-button w3-theme\"><i class=\"fa fa-pencil\"></i> Post</button>
</div>
</div>
</div>
</div>
<div id=\"partialMessages\">
</div>
<!-- End Middle Column -->
</div>
<!-- Right Column -->
<div class=\"w3-col m2\">
<div class=\"w3-card w3-round w3-white w3-center\">
<div class=\"w3-container\">
<p>Upcoming Events:</p>
<img src=\"/w3images/forest.jpg\" alt=\"Forest\" style=\"width:100%;\">
<p><strong>Holiday</strong></p>
<p>Friday 15:00</p>
<p><button class=\"w3-button w3-block w3-theme-l4\">Info</button></p>
</div>
</div>
<br>
<div class=\"w3-card w3-round w3-white w3-center\">
<div class=\"w3-container\">
<p>Friend Request</p>
<img src=\"/w3images/avatar6.png\" alt=\"Avatar\" style=\"width:50%\"><br>
<span>Jane Doe</span>
<div class=\"w3-row w3-opacity\">
<div class=\"w3-half\">
<button class=\"w3-button w3-block w3-green w3-section\" title=\"Accept\"><i class=\"fa fa-check\"></i></button>
</div>
<div class=\"w3-half\">
<button class=\"w3-button w3-block w3-red w3-section\" title=\"Decline\"><i class=\"fa fa-remove\"></i></button>
</div>
</div>
</div>
</div>
<br>
<div class=\"w3-card w3-round w3-white w3-padding-16 w3-center\">
<p>ADS</p>
</div>
<br>
<div class=\"w3-card w3-round w3-white w3-padding-32 w3-center\">
<p><i class=\"fa fa-bug w3-xxlarge\"></i></p>
</div>
<!-- End Right Column -->
</div>
<!-- End Grid -->
</div>
<!-- End Page Container -->
</div>
<br>
<!-- Footer -->
<footer class=\"w3-container w3-theme-d3 w3-padding-16\">
<h5>Footer</h5>
</footer>
<footer class=\"w3-container w3-theme-d5\">
<p>Powered by <a href=\"https://www.w3schools.com/w3css/default.asp\" target=\"_blank\">w3.css</a></p>
</footer>
<script>
$(\'#partialMessages\').load(\"/User/DisplayMessages\")
// Accordion
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf(\"w3-show\") == -1) {
x.className += \" w3-show\";
x.previousElementSibling.className += \" w3-theme-d1\";
} else {
x.className = x.className.replace(\"w3-show\", \"\");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(\" w3-theme-d1\", \"\");
}
}
// Used to toggle the menu on smaller screens when clicking on the menu button
function openNav() {
var x = document.getElementById(\"navDemo\");
if (x.className.indexOf(\"w3-show\") == -1) {
x.className += \" w3-show\";
} else {
x.className = x.className.replace(\" w3-show\", \"\");
}
}
</script>
</body>
</html>
用户控制器：
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Website_friend_feature.Areas.Identity.Data;
using Website_friend_feature.Models;
namespace Website_friend_feature.Controllers
{
public class UserController : Controller
{
private readonly UserManager<ApplicationUser> _userManager;
private readonly ProfilePictureConnection _PP;
Messages mess = new Messages();
public UserController (UserManager<ApplicationUser> userManager, ProfilePictureConnection PP)
{
_userManager = userManager;
_PP = PP;
}
public IActionResult Index()
{
return View();
}
public async Task<IActionResult> Profile(String id)
{
ProfilePictureViewModel viewModel = new ProfilePictureViewModel();
if (id == null)
{
return BadRequest();
}
//var user = await viewModel.UserManagerVM.FindByNameAsync(id);
var user = await _userManager.FindByNameAsync(id);
viewModel.ApplicationUserVM = user;
var picture = await _PP.ProfilePicture.FindAsync(id);
viewModel.ProfilePictureVM = picture;
return View(viewModel);
}
public IActionResult DisplayMessages()
{
var messages = _PP.Messages.ToList();
return PartialView(\"_DisplayMessagesPartial\", messages);
}
}
}
标签： c# asp.net-mvc partial-views