Reputation: 21
I got a small problem, I'm trying to display Facebook, Instagram and twitter in one view and order them by date, but i'm not really sure how can i achieve that
Here is my ActionResult for Twitter, then I have almost identical for Instagram and Facebook
var twitterContext = new TwitterContext(auth);
ulong sinceId = 1;
const int Count = 20;
var combinedSearchResults = new List<Status>();
var tweets =
await
(from tweet in twitterContext.Status
where tweet.Type == StatusType.User &&
tweet.Count == Count &&
tweet.RetweetedStatus.StatusID == 0 &&
tweet.ExcludeReplies == true &&
tweet.SinceID == sinceId
select new NewsViewModel
{
DateAdded = tweet.CreatedAt,
ScreenName = tweet.User.ScreenNameResponse,
Text = tweet.Text,
StatusId = tweet.StatusID
})
.ToListAsync();
return View(tweets);
}
how can I put all those 3 together and display them in Index view ? I'm kinda new to this stuff, would really appreciate the answer and help
Upvotes: 0
Views: 90
Reputation: 874
May be you want this:
var postList = new PostList();
var twitterPost = await GetTwitterpost(....);
var fbPost = await GetFbPost(....);
var instagramPost = await GetInstagramPost(....);
if(twitterPost !=null)
postList.AddRange(twitterPost);
if(fbPost !=null)
postList.AddRange(fbPost);
if(instagramPost !=null)
postList.AddRange(instagramPost);
postList = postList?.OrderByDescending(p=>p.DateAdded).ToList();
return View(postList);
I don't know if i really understand what you want ! But this way you get all your post in one collection and you can display them by date.
Upvotes: 0
Reputation: 13217
It can be achived by creating three components direved from Microsoft.AspNetCore.Mvc.ViewComponent
:
public class TwitterViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync(string parameter)
{
...
return View(tweets);
}
}
then create common view Views\Shared\Components\Twitter\Default.cshtml
or specific for controller view Views\[controllerName]\Components\Twitter\Default.cshtml
depending on your needs.
And then you can render your component like this:
<div>
@await Component.InvokeAsync("Twitter", new { parameter = "parameterValue"})
</div>
You can just render child action in your view:
<div>
@{Html.RenderAction("Twitter");}
</div>
Upvotes: 1
Reputation: 40958
If I understand you correctly, you want to take all three sources and display them together in a single list.
Assuming you can convert all three to your NewsViewModel
type, then just add the results from Facebook and Instagram to the same list, and just pass that one list to your view.
So you don't use three views - you get data from the three data sources in your controller, then pass the consolidated list to the one view.
Something like this (consolidated, but you get the idea):
var posts = await (from tweet ...).ToListAsync(); //what you already have
posts.AddRange(await (from facebook ....).ToListAsync());
posts.AddRange(await (from instagram ....).ToListAsync());
return View(posts);
Upvotes: 1