Develop Reference

MVC C# show two items from database in one slide carousel

I am able to retrieve data from database and displaying it in Carousel, one item at a time, but my requirement is to show multiple item (2 items) at a time in one slide. I have tried but could not achieve it. Below is my code for reference:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000"
data-pause="hover" data-wrap="true">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
#{int i = 0; }
#foreach (var item in Model)
{
i++;
var active = i == 1 ? "active" : "";
<div class="item #active">
<img src="#Url.Content(item.AchievementCategory.Cat_Img)" alt="#item.A_Title" class="img-responsive" />
<div class="carousel-caption d-none d-md-block">
<h5>#item.A_Title</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
}
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Controller:
public ActionResult
{
var list = db.Achievements.OrderByDescending(x => x.A_Id).ToList();
return View(list);
}

It's ugly solution and has redundant code, but works I think.
The idea is to have how many slider containers equal to models and each of them has one 'current' element and the next one.
Active class is set on the parent of two items.
The view
#model List<WebApplication1.Controllers.ModelModel>;
#{
ViewData["Title"] = "Home Page";
}
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
#for (var index=0; index< Model.Count; index++)
{
var item1 = Model[index];
var item2 = Model[index+1<Model.Count?index+1: 0 ];
var active = index == 0 ? "active" : string.Empty;
<div class="carousel-item #active">
<div class="wrapper">
<div class=" half-item">
<div>#item1.Title</div>
<div>#item1.Desc </div>
</div>
<div class=" half-item">
<div>#item2.Title</div>
<div>#item2.Desc </div>
</div>
</div>
</div>
}
</div>
</div>
<style>
.wrapper {
display:flex;
justify-content:space-between;
}
.half-item {
width:49%;
border:1px solid black;
}
</style>
and controller method (easy part)
public IActionResult Index()
{
var model = Enumerable.Range(1, 4).Select(x => new ModelModel() {
Title = $"Title{x}",
Desc =$"Description{x}{x}"
}).ToList();
return View(model);
}

Well, I have used the logic suggested by # benuto and added little bit of modification and it worked. I am posting the answer for if anyone needs it.
<div class="carousel-inner" role="listbox" style="border:2px solid red;">
#foreach (var item in Model)
{
for (var index = 0; index < Model.Count; index++)
{
var item1 = Model[index];
//var item2 = Model[index + 1 < Model.Count ? index + 1 : 0];
var active = index == 0 ? "active" : string.Empty;
<div class="item #active">
<div class="row">
<div class="col-xs-3">
<img src="#Url.Content(item.AchievementCategory.Cat_Img)" alt="#item.A_Title" class="img-responsive" />
</div>
<div class="col-xs-3">
<img src="#Url.Content(item1.AchievementCategory.Cat_Img)" alt="#item1.A_Title" class="img-responsive" />
</div>
</div>
</div>
}
}
</div>
public ActionResult CAchievements()
{
var list = db.Achievements.OrderByDescending(x => x.A_Id).ToList();
return View(list);
}

could not update the value of session data in asp.net core

I want to update quantity data, for that, I used a controller, I debugged and I looked, in HTTPpost, the value of quantity value successfully update.but when debug pointer goes to HTTPget method then it not updated and again I found the old quantity value.
for these outputs my code is:
[HttpGet]
public IActionResult Cart()
{
List<Spray> spray = HttpContext.Session.Get<List<Spray>>("spray");
if (spray == null)
{
spray = new List<Spray>();
HttpContext.Session.Set("spray", spray);
}
return View(spray);
}
[HttpPost]
public IActionResult Cart(int id)
{
List<Spray> spray = HttpContext.Session.Get<List<Spray>>("spray");
var item = spray.SingleOrDefault(x => x.Id.Equals(id));
if (item != null)
{
item.Quantity++;
}
return RedirectToAction(nameof(Cart));
}
here I added an old quantity of my session data. this code is:
[HttpGet]
public ActionResult Details(int? id)
{
if (id == null)
{
return NotFound();
}
var product = _db.Spray.Include(c => c.ProductTypes).FirstOrDefault(c => c.Id == id);
if (product == null)
{
return NotFound();
}
return View(product);
}
[HttpPost]
[ActionName("Details")]
public ActionResult ProductDetails(int id,Spray s)
{
var r = _db.Spray.Include(c => c.ProductTypes).FirstOrDefault(c => c.Id == id);
r.Quantity = s.Quantity;
//List<Spray> spray = new List<Spray>();
if (Utility.SessionExtensions.Get<List<Spray>>(HttpContext.Session, "spray") == null)
{
List<Spray> spray = new List<Spray>();
spray.Add(r);
r.Quantity = s.Quantity;
Utility.SessionExtensions.Set(HttpContext.Session, "spray", spray);
}
else
{
List<Spray> spray = Utility.SessionExtensions.Get<List<Spray>>(HttpContext.Session, "spray");
int index = isExist(id);
if (index != -1)
{
spray[index].Quantity++;
}
else
{
var m = _db.Spray.Include(c => c.ProductTypes).FirstOrDefault(c => c.Id == id);
m.Quantity = s.Quantity;
spray.Add(m);
}
Utility.SessionExtensions.Set(HttpContext.Session, "spray", spray);
}
return RedirectToAction("Index");
}
private int isExist(int id)
{
List<Spray> spray = Utility.SessionExtensions.Get<List<Spray>>(HttpContext.Session, "spray");
var r = _db.Spray.Include(c => c.ProductTypes).FirstOrDefault(c => c.Id == id);
for (int i = 0; i < spray.Count; i++)
{
if (spray[i].Id.Equals(id))
{
return i;
}
}
return -1;
}
Details.cshtml
<form method="post" asp-action="" enctype="multipart/form-data">
<div class="row">
<div class="col-1">
<img src="~/#Model.Image" style="width:100%" onclick="myFunction(this);">
</br></br>
<img src="~/#Model.Image1" style="width:100%" onclick="myFunction(this);">
</div>
<div class="col-4 container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
<div class="col-4">
<input type="hidden" asp-for="Id" />
<h2>#Model.Name</h2>
<p><b>#Model.Description</b></p>
<h4>#Model.Price $</h4>
<small class="text-danger">Clearence</small>
</br>
<hr>
<h4>Size:#Model.Size</h4>
<h6>Product Color:#Model.ProductColor</h6>
</br></br></br></br>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<div class="col-sm-12 col-xs-12 spinner-block">
<div class="number-spinner">
<div class="input-group number-spinner">
<b class="mr-4"> <label asp-for="#Model.Quantity"></label></b></br>
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number btncartsniper" data-type="minus" data-dir="dwn"><span class="fa fa-minus fa-sm"></span></button>
</span>
<input asp-for="#Model.Quantity" class="form-control input-number Snippper_qty" value="0" type="number">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number btncartsniper" data-type="plus" data-dir="up"><span class="fa fa-plus fa-sm"></span></button>
</span>
</div>
</div>
</div>
<input type="submit" value="Add To Cart" class="btn btn-dark form-control" />
#if (Model.Quantity > 0)
{
<h3>This Product Is InStock</h3>
}
else
{
<h1>Not InStock</h1>
}
</div>
</div>
<div>
<a asp-action="Index" class="btn btn-dark">Back To List</a>
</div>
</form>
Cart.cshtml
#using HuddsonBay.Models
#model List<Spray>
#{
ViewData["Title"] = "Cart";
}
<h1>Your Cart</h1>
<br />
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th>Image</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Color</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<img src="~/#item.Image" width="200px" height="150px" />
</td>
<td>#item.Name</td>
<td>#item.Price</td>
<td>#item.Quantity</td>
<td>
<partial name="_QuantityPartial" model="#item.Id" />
</td>
<td>#item.ProductColor</td>
<td>
<a asp-area="Customer" asp-action="Remove" asp-controller="SprayShow" asp-route-id="#item.Id" class="btn btn-danger">
<i class="fas fa-trash"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="row">
<div class="col-6">
<a asp-action="Index" asp-controller="SprayShow" class="btn btn-primary">Back To Home</a>
</div>
<div class="col-6 text-right">
<h3>Total Amount</h3>
<h3>Grand Total : #Model.Sum(c => c.Price)</h3>
<a asp-area="Customer" asp-action="Checkout" asp-controller="Order" class="btn btn-info">Process To CheckOut</a>
</div>
</div>
my output is:
when I click the "+" button, then it responds goes to the cart "httpPost" here quantity value increase but when debug pointer goes cart "HTTPget" then I found the old value of the quantity.for that similarly, I can not find the updated quantity value of my output. I want to increase my quantity value.
I am a beginner. please help anyone.

The session data in ASP.NET Core is serialized, not as actual objects. This means when you get an object and modify it nothing is stored, since there’s no link with the serialized data in session store. You have to store the modified list back into the session after modifying anything in it.
See documentation

[HttpPost]
public IActionResult Cart(int id)
{
List<Spray> spray = HttpContext.Session.Get<List<Spray>>("spray");
var item = spray.SingleOrDefault(x => x.Id.Equals(id));
if (item != null)
{
item.Quantity++;
HttpContext.Session.Set("spray", spray); //it's must add for a set new session data
}
return RedirectToAction(nameof(Cart));
}

Refresh partial view using jquery

This partial view is used to list cart-items:
<ul class="cart-dropdown">
<li>
<div class="cart-items cart-caption">
<ul>
#foreach (var i in Model.CartItems)
{
<li id="list-item-#i.item.ItemID">
<div class="container-fluid item-wrap" style="position: relative">
<div class="item-remove">
<a href="#" class="RemoveLink"
data-id="#i.RecordID" data-itemid="#i.item.ItemID">
x
</a>
</div>
<div class="col-md-2 item-img">
<div class="row-cart">
<img alt="" id="cartImg" height="71" width="75" src="#i.item.ImageUrl">
</div>
</div>
<div class="col-md-5 item-info">
<div class="row-cart">
<div class="brand-name">
<a href="#" class="brandName">
#i.item.BrandName
</a>
</div>
<div class="product-name">
<a href="#" class="productName">
#i.item.ItemName
</a>
</div>
<div class="product-qty">
<p class="productQTY" id="item-count-#i.item.ItemID">
#i.Count x #i.item.ItemPrice
</p>
</div>
</div>
</div>
<div class="col-md-5 price-info">
<div class="row-cart" style="margin-top: 10px">
<div class="col-md-6">
<div class="row-mrp">
<span class="cartItemPrice" id="item-total-#i.item.ItemID">
Rs #(#i.Count * #i.item.ItemPrice)
</span>
</div>
</div>
</div>
</div>
</div>
</li>
}
</ul>
</div>
</li>
<li class="clearfix">
<div class="col-md-6">
<div class="row-cart sub-cost" style="background: #fff; margin-left: -10px; margin-right: 0">
<p>
Sub Total :
<span style="float: right">
Rs
<span class="ng-binding"></span>
</span>
</p>
<p>
Delivery Charge :
<span qa="delChargeMB" style="float: right">Free</span>
</p>
</div>
<div class="row-cart cart-chkout-btn">
<button type="button">View Basket & Checkout</button>
</div>
</div>
</li>
</ul>
Above partial view is rendered when user clicks on "My cart" button. I need to allow customers to remove any cart-item they like by clicking a 'remove' button inside _cartDetails.cshtml. This jQuery code is being used to accomplish this task:
$(function () {
$(".RemoveLink").click(function () {
var recordToDelete = $(this).attr("data-id");
var itemID = $(this).attr("data-itemid");
if (recordToDelete != '') {
$.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete, "itemID": itemID },
function (data) {
if (data.ItemCount == 0) {
$('#list-item-' + recordToDelete).fadeOut('slow');
}
else {
$('#item-count-' + recordToDelete).text(data.ItemCount + " x " + data.ItemPrice);
$('#item-total-' + recordToDelete).text(data.ItemCount * data.ItemPrice);
}
$('#update-message').text(data.Message);
$(".confirmItemCart").show();
$(".confirmItemCart").addClass("collapsed");
$('.confirmItemCart').delay(30000).fadeOut('slow');
$('#cart-status').text('Cart (' + data.CartCount + ')');
$('#cart-total').text(data.CartTotal);
});
}
})
});
Controller: (UPDATED)
public ActionResult cartDropDown()
{
return RedirectToAction("cartDropDownChild");
}
[ChildActionOnly]
public ActionResult cartDropDownChild()
{
var cart = ShoppingCart.GetCart(this.HttpContext);
// Set up list of cart items with total value
var viewModel = new ShoppingCartViewModel
{
CartItems = cart.GetCartItems(),
CartTotal = cart.GetTotal(),
ItemCount = cart.GetCount(),
Message = Server.HtmlEncode("There are no items in your cart. Continue shopping.")
};
foreach (var item in viewModel.CartItems)
{
item.item = db.Items.Single(i => i.ItemID == item.ItemID);
}
return PartialView("_cartDetails", viewModel);
}
This code is successfully removing items from the cart-items list but not updating the partial view (_cartDetails.cshtml). In debug mode, I've checked the values for the (data) which is returned from the ajax call and all values are correct. It is just the binding of those values with the _cartDetails html elements that is not working. Maybe I'm missing out something. Someone please guide.
Thanks in advance.

This is actually a system design related issues. Partial view gets rendered when the page loads.
When you are removing an item why don't you post to a child action which would render the same partial view and return the html. Then you can put the html in place. You do not need to handle the list-item, cart-total, cart-status etc. manually.
Add the [ChildActionOnly] filter to the action that renders the cart information section.
Then in the action: return PartialView("_cartDetails");
For example:
Move the logic from cartDropDown() function to a private function which will return a viewModel object. Then call that private function from both cartDropDown() and also in RemoveFromCart action (after deleting the data).
[ChildActionOnly]
public ActionResult cartDropDown()
{
return PartialView("_cartDetails", preparecartDropDown(this.HttpContext));
}
[ChildActionOnly]
public ActionResult RemoveFromCart(...)
{
//Delete data
return PartialView("_cartDetails", preparecartDropDown(this.HttpContext));
}
private ShoppingCartViewModel preparecartDropDown(HttpContext context)
{
var cart = ShoppingCart.GetCart(context);
var viewModel = new ShoppingCartViewModel
{
CartItems = cart.GetCartItems(),
CartTotal = cart.GetTotal(),
ItemCount = cart.GetCount(),
Message = Server.HtmlEncode("There are no items in your cart. Continue shopping.")
};
foreach (var item in viewModel.CartItems)
{
item.item = db.Items.Single(i => i.ItemID == item.ItemID);
}
return viewModel;
}

select all items inside a foreach

I have a project were you select dates in a list, and than report x-amount of hours on a project on. It looks like this:
But what I want to is, I want to add a check-box after the months name if I want to select all dates under that month. But I am currently not sure how I would do that so I would be glad if I could get some guidance.
This is the view that prints out all the dates:
<form class="form-horizontal">
<div class="portlet-body form">
<div class="form-group">
#if (ViewBag.MissingDays != null)
{
int i = 0;
var months = ((List<DateTime>)ViewBag.MissingDays).GroupBy(x => x.Month);
IEnumerable<IGrouping<int, DateTime>> groups = months as IList<IGrouping<int, DateTime>> ?? months.ToList();
foreach (var group in groups)
{
i++;
var month = CultureInfo.CreateSpecificCulture("sv-SE").DateTimeFormat.GetMonthName(group.Key);
if (groups.Count() > 1)
{
<div class="panel-group accordion" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse_#i">
#month
</a>
</h4>
</div>
<div id="collapse_#i" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-md-12">
#foreach (var date in group)
{
var isoDate = date.ToString("yyMMdd");
var day = date.ToString("ddd", new CultureInfo("sv-SE")).Substring(0, 2);
<label style="padding-left: 10px">
<input type="checkbox" id="isoDate" name="isoDate" value="#isoDate" />#day-#isoDate
</label>
}
</div>
</div>
</div>
</div>
</div>
}
else
{
<div class="col-md-12">
#foreach (var date in group)
{
var isoDate = date.ToString("yyMMdd");
var day = date.ToString("ddd", new CultureInfo("sv-SE")).Substring(0, 2);
<label style="padding-left: 10px">
<input type="checkbox" id="isoDate" name="isoDate" value="#isoDate" />#day-#isoDate
</label>
}
</div>
}
}
}
</div>
</div>
And this is the script on how I select the dates right now.
$(document).ready(function() {
$('input[name="isoDate"]').change(function() {
$("#date").val("");
$('input[name="isoDate"]').each(function() {
if (this.checked) {
$("#date").val($("#date").val() + " " + $(this).val());
}
});
});
});

You can try like this..
First remove the id="isoDate" as Id should be unique. And add a check box inside div near to month field
<input type="checkbox" class="selectAll" name="all" />
Now add a JQuery click handler
$(".selectAll").on("click", function() {
if ($(this).is(':checked')) {
$(this).closest('.panel-default').find("input[name='isoDate']").prop('checked',true);
} else {
$(this).closest('.panel-default').find("input[name='isoDate']").prop('checked',false);
}
});
See working FIDDLE

first time use diferent ids for each input element. Then use js or jquery. Some like this :
var i = 0;
var ids = "juli_150505_" + i;
i++;
then you finde any checkbox element whot you want. By JS or jQuery.
Or you can use class param, then GetElementByClass().
<input type="checkbox" id="isoDate" class="Juli" name="isoDate" value="#isoDate" />

Put a checkbox in front of every month name and give it a class name like 'chkAll'
$('input[name="chkAll"]').click(function(){ //if any chkAll is clicked
if (this.checked) {
$(this).find("input[type='checkbox']").each(function() {
//Loop through
$(this).prop('checked', true);
});
}
else
{
$(this).find("input[type='checkbox']").each(function() {
$(this).prop('checked', false);
});
}
});

I would like to know is there a better way to design my page without using foreach mulitple times

I would like to know is there a better way to design my page without using foreach mulitple times. I have 3 column that will contain data. However I have to use a foreach in each column in order to display the data.
What would be the best way to handle.
I am using an IEnumerable.
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
#foreach (var item in Model)
{
var desc = item.PageContentLongDesc;
if (item.PageContentSeqNbr == 2)
{
<p> #Html.Raw(#desc)</p>
}
}
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
#foreach (var item in Model)
{
var desc = item.PageContentLongDesc;
if (item.PageContentSeqNbr == 3)
{
<p> #Html.Raw(#desc)</p>
}
}
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
#foreach (var item in Model)
{
var desc = item.PageContentLongDesc;
if (item.PageContentSeqNbr == 4)
{
<p> #Html.Raw(#desc)</p>
}
}
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>

A little better? Few people might agree, or not.
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
#foreach (var item in Model.Where(c => c.PageContentSeqNbr == 2))
{
var desc = item.PageContentLongDesc;
<p> #Html.Raw(#desc)</p>
}
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
#foreach (var item in Model.Where(c => c.PageContentSeqNbr == 3))
{
var desc = item.PageContentLongDesc;
<p> #Html.Raw(#desc)</p>
}
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
#foreach (var item in Model.Where(c => c.PageContentSeqNbr == 4))
{
var desc = item.PageContentLongDesc;
<p> #Html.Raw(#desc)</p>
}
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>