I'm trying to add a button to load more comments in my View.
Main View:
#Html.Action("Index", "Comment")
Partial View that gets returned by the action above:
<div class="comments">
<div class="container">
#foreach (var item in Model)
{
<div class="comment">
<div class="profile">
<div class="profile-image">
<img src="~/Content/img/image-styles/avatar.jpg" alt="">
</div>
<div class="profile-content">
<p>#item.PersonName</p>
<p>#item.CreatedOn</p>
</div>
</div>
<div class="comment-content">
<p>#item.Content</p>
</div>
</div>
}
</div>
</div>
Action:
return PartialView("_PostComments", dbcontext.Post.toList())
I'm just starting out, and couldn't understand the other threads I saw here. Any tip/help would be appreciated
Related
I am trying to get a list of categories to display on the home page of an ASP.NET MVC app, I am making use of an Index view and a partial view. One of the categories in the Category table displays, but the other 3 are ignored, can anyone tell me how to fix this?
Here is the partial:
#model IEnumerable<MenuItem>
#if (Model.Count() > 0)
{
<div class="col-12">
<div class="row">
<h3 class="text-success"> #Model.FirstOrDefault().Category.Name </h3>
</div>
</div>
}
Here is the code from the view itself
#foreach (var category in Model.Category)
{
<div class="row" id="menu-wrapper">
<partial name="_ThumbnailAreaPartial" model="#Model.MenuItem.Where(u=>u.Category.Name.Equals(category.Name))" />
</div>
}
I can't figure out why only one item is being displayed.
Thank you
fix view
#foreach (var category in Model.Category)
{
<div class="row" id="menu-wrapper">
<partial name="_ThumbnailAreaPartial"
model="#Model.MenuItem.Where(u=>u.Category.Name.Equals(category.Name)).FirstOrDefault()" />
</div>
}
and partial view
#model MenuItem
#if (Model!=null && Model.Category!=null )
{
<div class="col-12">
<div class="row">
<h3 class="text-success"> #Model.Category.Name </h3>
</div>
</div>
}
For example in the Model.Examples = List(1,2,3,4,5,6).
I get the data and show it to the user but I have a little problem. I want to show data like under below
<div class="x">
<div class="y">1</div>
<div class="y">2</div>
<div class="y">3</div>
</div>
<div class="X">
<div class="y">4</div>
<div class="y">5</div>
<div class="y">6</div>
</div>
I try to this but my method is not correct.
<div class="x">
#foreach(var item in Model.Examples)
{
<div class="y">#item.Number</div>
}
When I execute the code, my result is
</div class="x">
<div class="y">1</div>
<div class="y">2</div>
<div class="y">3</div>
<div class="y">4</div>
<div class="y">5</div>
<div class="y">6</div>
</div>
How can I do it in .NET Core?
You can use LINQ's Take and Skip:
<div class="x">
#foreach(var item in Model.Examples.Take(Model.Examples.Count/2))
{
<div class="y">#item.Number</div>
}
</div>
<div class="X">
#foreach(var item in Model.Examples.Skip(Model.Examples.Count/2))
{
<div class="y">#item.Number</div>
}
</div>
I wish to create a UI like this using .NET core MVC framework.
what should my view be like?
i tired looping through each data model and embedding razor code into the same bootstrap tempate but i'm not getting anywhere near the desired functionality.
<div class="container h-100 w-100">
<div class="row w-100 ml-0 mr-0 mt-0 mb-0">
<div class="col-3">
<div class="list-group" id="list-tab" role="tablist">
#{
foreach(var user in Model)
{
<a class="list-group-item list-group-item-action" id="list-#user.FirstName-list" data-toggle="list" href="##user.FirstName" aria-controls="#user.FirstName" role="tab">
#Html.DisplayFor(modelItem => user.FirstName)
</a>
}
}
</div>
</div>
<div class="col-9">
<div class="tab-content" id="nav-tabContent">
#{
foreach(var user in Model)
{
<div class="tab-pane fade show " id="list-#user.FirstName" role="tabpanel" aria-labelledby="list-#user.FirstName-list">
<p>#Html.DisplayFor(modelItem => user.FirstName)</p>
</div>
}
}
</div>
</div>
</div>
</div>
The first part of the list group is getting displayed but when i try clicking on it, i dont get to see the description
First, you are appending "list-" to id of your .tab-pane, while the href for list item does not have that prefix.
Second, you can make the first active selection via JavaScript. Avoid putting fade show in your razor code, or put the condition in loop such that it should add it to only first element.
HTML :
<div class="col-3">
<div class="list-group" id="list-tab" role="tablist">
#foreach (var user in Model)
{
<a class="list-group-item list-group-item-action" id="list-#user.FirstName-list" data-toggle="list" href="##user.FirstName" aria-controls="#user.FirstName" role="tab">
#Html.DisplayFor(modelItem => user.FirstName)
</a>
}
</div>
</div>
<div class="col-9">
<div class="tab-content" id="nav-tabContent">
#foreach (var user in Model)
{
<div class="tab-pane" id="#user.FirstName" role="tabpanel" aria-labelledby="list-#user.FirstName-list">
<p>#Html.DisplayFor(modelItem => user.FirstName)</p>
</div>
}
</div>
</div>
</div>
</div>
JS :
<script>
$(".tab-pane").first().addClass("fade show active");
$(".list-group-item").first().addClass("active");
</script>
I have an Index page like below and on button click I have some code to save data into database and then it goes on details page.
But I the code should go to the details page only after completing the database save operation; I want to show a loader image until then; how can I do this?
Currently I'm using begin post to post method and bind all model not using any ajax call. How can I show loader image and render before process complete to details page?
Index.cshtml
#model Dev.Models.DeviceReg
#using (Html.BeginForm("AddAsync", "Home", FormMethod.Post))
{
<div class="panel panel-primary">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<h4 id="aa">Name</h4>
<label>Select</label>
<table>
<tr>
<td>
#Html.DropDownListFor(m => m.Name, (SelectList)ViewBag.Name, "---Select Name---")
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4 id="aa">Model</h4>
<label>Select</label>
<table>
<tr>
<td>
#Html.DropDownListFor(m => m.Type, (SelectList)ViewBag.TypeName, "---Select Type---")
</td>
</tr>
</table>
</div>
</div>
<div class="panel-footer" align="left">
<button type="submit" id="save" class="btn btn-success">
<span class="glyphicon glyphicon-arrow-right"></span> save
</button>
</div>
</div>
}
HomeController.cs
public async Task<ActionResult> AddAsync(DeviceReg deviceRegistration)
{
foreach (var deviceId in collection)
{
// save device information into database
Models.Device newDevice = new Models.Device()
{
Id = Guid.NewGuid(),
DeviceTypeId = deviceRegistration.DeviceType,
PlatformId = deviceRegistration.PlatformType,
DeviceId = deviceId,
};
_repository.InsertDevice(newDevice);
_repository.Save();
}
return View("Details", deviceRegistration);
}
Details.cshml
#model Dev.Models.DeviceReg
<body style="background-color:black">
<div class="panel panel-primary">
<div class="panel-heading" align="center">
<h2 class="panel-title">Details</h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<h3><label>Current Data</label></h3>
<br />
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4 id="aa">Name</h4>
<label>#Model.Name</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4 id="aa">Type</h4>
<label>#Model.TypeName</label>
</div>
</div>
<hr />
<br />
<label>Your process is running.</label>
<br />
<div class="row">
<div class="col-md-6">
<h3><label>Status</label></h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div style="clear: both">
<h2 style="float: left">10</h2>
<h6 style="float: right">Active Number</h6>
</div>
</div>
</div>
</div>
</div>
</body>
Well, if you need to show loader while post form is submitting, you can use javascript functions to show it, like
#using (Html.BeginForm("AddAsync", "Home", FormMethod.Post, new { onsubmit = "showLoader(this);" }))
{
...
}
plus JS
<script>
var showLoader = function(form){
$("<div />").css({
'position' : 'fixed',
'left' : 0,
'right' : 0,
'bottom' : 0,
'top' : 0,
'background' : '#0020ff36',
'z-index' : '99',
'text-align' : 'center'
}).appendTo($("body"))
.append(
$("<img />").attr("src", "https://mir-s3-cdn-cf.behance.net/project_modules/disp/35771931234507.564a1d2403b3a.gif")
);
}
</script>
or by jquery event, like
<script>
$("form").submit(function(){
//show loader
});
</script>
example of this code https://dotnetfiddle.net/gfEVSE
But, regarding to your clarification of the issue in comments, it's impossible to show Details page with progress of saving without Javascript or another additional requests.
Example without ajax but with aditional requests every N seconds
[HttpPost]
public ActionResult AddAsync(SampleViewModel deviceRegistration)
{
Task.Run(()=>
{
//Saving to DB
});
return RedirectToAction("Details", id = deviceRegistration.id);
}
public ActionResult Details(int id)
{
var isObjectExistInDb = checkIfExistInDb(id);
if (!isObjectExistInDb){
return View("ShowLoader", id);
}
return View(object);
}
where in ShowLoader.cshtml you need to reload page every N seconds.
With ajax it will be more clear, pretty code. Please, let me know, if you need example with ajax :)
I hope this is straight forward! I have a partial which loads just fine, it uses ajax to apply filters / sorting which works fine. However the pagination links send the correct url, and the response is the desired page, only it doesn't actually update/replace whats there.
Parent View:
#model Sakura.AspNetCore.IPagedList<YaCu_2017.Models.Review>
#{
ViewBag.Title = "Review Dashboard";
#using YaCu_2017.Controllers;
}
<p class="green-text">#ViewBag.StatusMessage</p>
<p class="red-text">#ViewBag.ErrorMessage</p>
<h2>Our Product Reviews</h2>
<div class="row">
<div class="col s2">
<h5>Filter by Product:</h5>
<form method="get">
#{
var product = ReviewController.GetProductListIncId();
var productCount = ReviewController.GetProductCountList();
ViewBag.ProductList = product;
ViewBag.ProductCount = productCount;
}
<select asp-items="#ViewBag.ProductList" id="searchProduct"
class="dropdown-button btn"></select>
<h5>Reviews per page</h5>
<select asp-items="#ViewBag.ProductCount" id="perPage"
class="dropdown-button btn"></select>
</form>
</div>
</div>
<p></p>
<div class="reviewView" id="filter">
#await Html.PartialAsync("ShowReviewDetails", Model)
</div>
Child View:
#model IPagedList<YaCu_2017.Models.Review>
#using System.Globalization
#using Sakura.AspNetCore
#using YaCu_2017.Controllers
#using YaCu_2017.Models
#{
ViewData["Title"] = "Digital Jeeves - Reviews";
}
<form method="post" data-ajax="true">
<div class="row">
<div id="pagerow" class="col s12 center center-align center-block">
<p>Page #(Model.TotalPage < Model.PageIndex ? 1 :
Model.PageIndex) of #Model.TotalPage<pager id="pager" class="pagination"
setting-link-attr-data-ajax-update="filter" setting-link-attr-data-ajax-
mode="replace" setting-link-attr-data-ajax="true" /></></p>
<cs-pager cs-paging-pagesize="#Model.PageSize"
cs-paging-pagenumber="#Model.PageIndex"
cs-paging-totalitems="#Model.TotalPage"
cs-pagenumber-param="page"
asp-route-perPage="#ViewData["Page"]"
asp-route-searchProduct="#ViewData["Product"]"
asp-controller="Review"
asp-action="GetProducts"
cs-ajax-target="filter"></cs-pager>
</div>
</div>
</form>
<hr />
<div id="stuff">
#foreach (var item in Model)
{
var stars = item.Stars.ToString();
var starurl = string.Format("images/stars/{0}_star.jpg", stars);
<div class="container opaque-parent z-depth-5">
<div class="row">
<div class="col s6"><h6 style="border-bottom:thin">Title :
#Html.DisplayFor(model => item.Title)</h6></div>
<div class="col s3"><h6 style="border-bottom:thin">Product :
#Html.DisplayFor(model => item.Product)</h6></div>
<div class="col s3"><h6 style="border-bottom:thin">Rated:
<img src="~/#starurl" class="responsive-img" id="#item.Id" /></h6></div>
</div>
<div class="row" style="">
<div class="col s12" style="border-bottom:inset">
<h6>Comment:</h6>
</div>
</div>
<div class="row" style="border-bottom:inset">
<div class="col s6 offset-s3">
<p class="flow-text">"#Html.DisplayFor(model =>
item.ReviewText)"</p>
</div>
</div>
<div class="row">
<div class="col s3">
<p>Date Created : #Html.DisplayFor(modelItem =>
item.CreatedDate)</p>
</div>
<div class="col s3">
<p>Chosen Display Name: #Html.DisplayFor(modelItem =>
item.DisplayName)</p>
</div>
</div>
</div>
<hr />
}
</div>
I thought that it may be because its a child trying to update a parent, but I cant find any info. I tried to put pagination outside of the target div, all that happend was the pagination never got updated when there were pages >1.
I'm new to this, only having made websites without ajax, until now! I figured the filter/sorting out, but I keep going around in circles here, I even tried a diferent nuget package for pagination Link to git, still no joy! Like I say, the next page is in the response, but it doesn't replace whats there.
Thanks :)
Figured it out... in the data-ajax-update="filter" I needed to add a hashtag infront of the element id e.g. data-ajax-update="#filter"... facepalm