I have a view that displays a user's first and last name in one model and another stores the url of their picture. All of that is connected to a view model and it gets displayed as single objects. However, I have something that requires a foreach loop, but I can't use IEnumberal because that throws an error.
So instead of putting them in one view model, I wanted to use a partial view that stores the IEnumerable, and then I call it on the regular view. But when I do that nothing appears. I'm using jquery to render the partial view
partial view:
@model IEnumerable<Website_friend_feature.Models.Messages>
@foreach(var message in Model)
{
<div ><br>
<img src="/w3images/avatar2.png" alt="Avatar" style="width:60px">
<span >1 min</span>
<h4>John Doe</h4><br>
<hr >
<p> @message.Message </p>
<div style="margin:0 -16px">
<div >
<img src="/w3images/lights.jpg" style="width:100%" alt="Northern Lights" >
</div>
</div>
<button type="button" ><i ></i> Like</button>
<button type="button" ><i ></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 >
<!-- Navbar -->
<div >
<div >
<a href="javascript:void(0);" onclick="openNav()"><i ></i></a>
<a href="#" ><i ></i>Logo</a>
<a href="#" title="News"><i ></i></a>
<a href="#" title="Account Settings"><i ></i></a>
<a href="#" title="Messages"><i ></i></a>
<div >
<button title="Notifications"><i ></i><span >3</span></button>
<div style="width:300px">
<a href="#" >One new friend request</a>
<a href="#" >John Doe posted on your wall</a>
<a href="#" >Jane likes your post</a>
</div>
</div>
<a href="#" title="My Account">
<img src="/w3images/avatar2.png" style="height:23px;width:23px" alt="Avatar">
</a>
</div>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" >
<a href="#" >Link 1</a>
<a href="#" >Link 2</a>
<a href="#" >Link 3</a>
<a href="#" >My Profile</a>
</div>
<!-- Page Container -->
<div style="max-width:1400px;margin-top:80px">
<!-- The Grid -->
<div >
<!-- Left Column -->
<div >
<!-- Profile -->
<div >
<div >
<p ><img [email protected] style="height:106px;width:106px" alt="Avatar"></p>
<h4 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 ></i> Designer, UI</p>
<p><i ></i> London, UK</p>
<p><i ></i> April 1, 1988</p>
</div>
</div>
<br>
<!-- Accordion -->
<div >
<div >
<button onclick="myFunction('Demo1')" ><i ></i> My Groups</button>
<div id="Demo1" >
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')" ><i ></i> My Events</button>
<div id="Demo2" >
<p>Some other text..</p>
</div>
<button onclick="myFunction('Demo3')" ><i ></i> My Photos</button>
<div id="Demo3" >
<div >
<br>
<div >
<img src="/w3images/lights.jpg" style="width:100%" >
</div>
<div >
<img src="/w3images/nature.jpg" style="width:100%" >
</div>
<div >
<img src="/w3images/mountains.jpg" style="width:100%" >
</div>
<div >
<img src="/w3images/forest.jpg" style="width:100%" >
</div>
<div >
<img src="/w3images/nature.jpg" style="width:100%" >
</div>
<div >
<img src="/w3images/snow.jpg" style="width:100%" >
</div>
</div>
</div>
</div>
</div>
<br>
<!-- Interests -->
<div >
<div >
<p>Interests</p>
<p>
<span >News</span>
<span >W3Schools</span>
<span >Labels</span>
<span >Games</span>
<span >Friends</span>
<span >Games</span>
<span >Friends</span>
<span >Food</span>
<span >Design</span>
<span >Art</span>
<span >Photos</span>
</p>
</div>
</div>
<br>
<!-- Alert Box -->
<div >
<span onclick="this.parentElement.style.display='none'" >
<i ></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 >
<div >
<div >
<div >
<div >
<h6 >Social Media template by w3.css</h6>
<p contenteditable="true" >Status: Feeling Blue</p>
<button type="button" ><i ></i> Post</button>
</div>
</div>
</div>
</div>
<div id="partialMessages">
</div>
<!-- End Middle Column -->
</div>
<!-- Right Column -->
<div >
<div >
<div >
<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 >Info</button></p>
</div>
</div>
<br>
<div >
<div >
<p>Friend Request</p>
<img src="/w3images/avatar6.png" alt="Avatar" style="width:50%"><br>
<span>Jane Doe</span>
<div >
<div >
<button title="Accept"><i ></i></button>
</div>
<div >
<button title="Decline"><i ></i></button>
</div>
</div>
</div>
</div>
<br>
<div >
<p>ADS</p>
</div>
<br>
<div >
<p><i ></i></p>
</div>
<!-- End Right Column -->
</div>
<!-- End Grid -->
</div>
<!-- End Page Container -->
</div>
<br>
<!-- Footer -->
<footer >
<h5>Footer</h5>
</footer>
<footer >
<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>
UserController:
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);
}
}
}
CodePudding user response：
can u just put them in one model ?
class yourViewModel
{
// your prop
// your prop
List<Messages> Messages {get;set;}
}
in the view
@model yourViewModel
.
.
.
// here u can loop throw your model
@foreach(var message in Model.Messages)
{
}