I have a problem with calling my function that show the books for same author, for example I have a these authors :
Author Name : Jeremy McPeak; Joe Fawcett; Nicholas C. Zakas;
When I click on "Jeremy McPeak" and "Joe Fawcett" the new page opened well and show all the books for those authors .
But when click on this author "Nicholas C. Zakas" and since he has a DOT in his name , I got exception
Object reference not set to an instance of an object.
This problem only when I click on any author that have a DOT In his name ..
also here is my function :
public ActionResult Author(string AuthorName, int? page)
{
if (AuthorName != null)
{
ViewBag.AuthorName = AuthorName;
int pageSize = 6;
int pageNumber = page ?? 1;
var result = db.Books.Where(s => s.Author_name.Contains(AuthorName)).OrderByDescending(x => x.Book_id).ToList();
return View(result.ToPagedList(pageNumber, pageSize));
}
return RedirectToAction("Index", "Home");
}
Author View Code:
#using PagedList.Mvc
#using System.Text.RegularExpressions;
#model PagedList.IPagedList<SmartBookLibrary.Models.Book>
#{
ViewBag.Title = "Books For " + ViewBag.AuthorName+ "- Smart Books Library";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section AdditionalMeta
{
<meta name="robots" content="index,follow">
}
<div class="container">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
<span class="fa fa-pencil"></span>#ViewBag.AuthorName
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4 portfolio-item" style="margin-bottom:10px;height:450px">
<div class="ih-item square effect3 bottom_to_top">
<a href="~/book/#item.Book_id/#item.UrlSlug">
<div class="img"><img itemprop="image" class="img-responsive" src="~/Images/#item.Book_Image" alt="#item.Book_name" title="#item.Book_name"></div>
<div class="info">
<h3>#item.Book_name</h3>
</div>
</a>
</div>
<h3 itemprop="name">
<a href="~/book/#item.Book_id/#item.UrlSlug">
#item.Book_name
#if (item.Edition != 0)
{
switch (item.Edition)
{
case 1:<small class="btn btn-default btn-xs">#item.Edition'St Edition</small> break;
case 2:<small class="btn btn-default btn-xs">#item.Edition'nd Edition</small> break;
case 3:<small class="btn btn-default btn-xs">#item.Edition'rd Edition</small> break;
case 4 - 10:<small class="btn btn-default btn-xs">#item.Edition'th Edition</small> break;
default:<small class="btn btn-default btn-xs">#item.Edition'th Edition</small> break;
}
}
</a>
</h3>
<p itemprop="description">
#*#Html.Raw(item.Book_Description)*#
</p>
</div>
}
</div>
<!-- /.row -->
<hr>
Page #(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of #Model.PageCount
#Html.PagedListPager(Model, page => Url.Action("Author", new { AuthorName = ViewBag.AuthorName, page }))
</div>
Calling Area :
#{
var s = Model.Book.Author_name.ToString();
string[] Auth = s.Split(',');
ViewBag.Author = Auth;
}
<p itemprop="author">
<i class="glyphicon glyphicon-pencil"></i> <b>Author Name :</b>
#for (int i = 0; i < Auth.Length; i++)
{
<a style="color:#777777" href="~/Author/#Auth[i]">#Auth[i];</a>
}
</p>
Any one know how to fix that ?
I test code in Author action without return View(result.ToPagedList(pageNumber, pageSize));
There is no problem.I think, ToPagedList has caused an error. result.ToPagedList(pageNumber, pageSize) is null.
You trace it.
Related
I need to make a food ordering site for a university graduation project and I have no previous experience in the subject. I did most of the site, but I want to sort with the blue buttons in the menu, but I couldn't do it. I created #Html.ActionLink Name and Price links to try it but it doesn't work. That's why I couldn't assign tasks to the blue buttons. Alphabetically, best seller, price ascending, price descending. Can you help me?
Controller
```
public class MenuController : Controller
{
// GET: Menu
Context c = new Context();
public ActionResult Index(string sortBy)
{
ViewBag.SortNameParameter = string.IsNullOrEmpty(sortBy) ? "Name desc" : "";
ViewBag.SortPriceParameter = sortBy == "Price" ? "Price desc" : "Price";
var uruns = c.Uruns.AsQueryable();
switch(sortBy)
{
case "Name desc":
uruns = uruns.OrderByDescending(x => x.UrunAdi);
break;
case "Price desc":
uruns = uruns.OrderByDescending(x => x.UrunFiyat);
break;
case "Price":
uruns = uruns.OrderBy(x => x.UrunFiyat);
break;
default:
uruns = uruns.OrderBy(x => x.UrunAdi);
break;
}
Context _db = new Context();
Menu vm = new Menu();
//vm.Deger1 = (_db.Uruns.Where(i=>i.Durum)&&_db.Kategoris.Where(i=>i.Durum)).ToList();
vm.Deger1 = _db.Uruns.Where(i=>i.Durum).ToList();
vm.Deger2 = _db.Kategoris.Where(i=>i.Durum).ToList();
return View(vm);
}
View
<ul class="filters_menu">
<li class="active" data-filter="*">All</li>
#foreach (var k in Model.Deger2)
{
if (k.Durum != false)
{
<li class="" data-filter=".#k.KategoriAdi">#k.KategoriAdi</li>
}
}
</ul>
<p class="filters_menu">
<button class="btn btn-primary btn-round" type="button">A/Z</button>
<button class="btn btn-primary btn-round" type="button">En çok satan</button>
<button class="btn btn-primary btn-round" type="button">Fiyat (Artan)</button>
<button class="btn btn-primary btn-round" type="button">Fiyat (Azalan)</button>
#Html.ActionLink("Name", "Index", new { sortBy = ViewBag.SortNameParameter })
#Html.ActionLink("Price", "Index", new { sortBy = ViewBag.SortPriceParameter })
</p>
<div class="filters-content">
<div class="row grid">
#foreach (var item in Model.Deger1.OrderBy(item => item.UrunFiyat))
{
//if (item. != false)
//{
using (Html.BeginForm("SepeteEkle", "Sepet", FormMethod.Post, new { Id = item.Urunid }))
{
<div class="col-sm-6 col-lg-4 all #item.Kategori.KategoriAdi">
<div class="box">
<div>
<div class="img-box">
<img src="#item.UrunGorsel" alt="">
</div>
<div class="detail-box">
<h5>
#item.UrunAdi
</h5>
<div class="options">
<h6>
#item.UrunFiyat ₺
</h6>
<input name="Id" value="#item.Urunid" type="hidden" />
<input name="qty" class="form-control" type="number" name="" value="1" max="10" min="1" style="max-width: 60px; min-width: 60px;" />
<input type="submit" value="Sepete Ekle" class="btn btn-success btn-circle" />
#*<button class="btn btn-success btn-circle" type="button">Sepete Ekle</button>*#
</div>
</div>
</div>
</div>
</div>
}
}
</div>
</div>
</div>
```
[Menu][1]
[1] : https://i.stack.imgur.com/M1SVO.jpg
I am building a mini online shopping CMS project for collage.
I finished the project and now I want to add a feature where I have limited quantity of products.
When the quantity is equal to 0 then product is shown as 'out of stock' and my 'Add to cart' button becomes disabled.
I have added a 'quantity' property to my product class and now I need to change something in the Index view of the product.
I tried few options and it does not seem to work.
Here is the code for the Index.cshtml page.
#model IEnumerable
<Product>
#{ ViewData["Title"] = "Products"; }
<h1 class="display-4 pb-5">All Products</h1>
<div class="row">
#foreach (var item in Model)
{
<div class="col-4">
<div class="ajaxbg d-none">
<img src="~/Images/ajax_loader.gif" />
<p class="lead alert alert-success text-center d-none">
The product has been added!
</p>
</div>
<img src="~/Media/Products/#item.Image" class="img-fluid" alt="" />
<h4>#item.Name</h4>
<div>
#Html.Raw(item.Description)
</div>
<p>
#item.Price.ToString("C2")
</p>
<p>
<a asp-controller="Cart" asp-action="Add" asp-route-id="#item.Id" data-id="#item.Id" id="addToCartButton" class="btn btn-primary addToCart">Add to cart</a>
</p>
#if (item.Quantity == 0) { }
</div>
}
#if (ViewBag.TotalPages > 1) {
<div class="d-flex w-100 justify-content-center">
<pagination page-count="#ViewBag.TotalPages" page-target="/products" page-number="#ViewBag.PageNumber" page-range="ViewBag.PageRange"></pagination>
</div>
}
</div>
#section Scripts {
<script>
function DisableBtn() {
document.getElementById("addToCartBUtton").disabled = true;
}
$(function() {
$("a.addToCart").click(function(e) {
e.preventDefault();
let ajaxDiv = $(this).parent().parent().find("div.ajaxbg");
ajaxDiv.removeClass("d-none");
let id = $(this).data("id");
$.get('/cart/add/' + id, {}, function(data) {
$("div.smallcart").html(data);
ajaxDiv.find("img").addClass("d-none");
ajaxDiv.find("p").removeClass("d-none");
setTimeout(() => {
ajaxDiv.animate({
opacity: 0
}, function() {
$(this).addClass("d-none").fadeTo(.1, 1);
$(this).find("img").removeClass("d-none");
$(this).find("p").addClass("d-none");
});
});
});
});
});
</script>
}
Try this
#If(Model!=null)
{
#foreach (var item in Model)
{
..........
<p>
#if (item.Quantity == 0) {
<a disabled class="btn btn-primary addToCart">Add to cart</a>
}
else
{
<a asp-controller="Cart" asp-action="Add" asp-route-id="#item.Id" data-id="#item.Id" id="addToCartButton" class="btn btn-primary addToCart">Add to cart</a>
}
</p>
}
}
Ok I have the following View
#model IEnumerable<WebApplication3.Models.user>
#{
ViewBag.Title = "Password Management";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section title {<h1>#ViewBag.Title</h1>}
<div id="page-block" class="page-block-three row">
<div style="margin-top: 30px;" class="col-lg-offset-2 col-lg-8">
#using (Html.BeginForm())
{
<div class="input-group">
#Html.TextBox("SearchString", null, new { #class = "form-control ccl-form", #style = "z-index: 10", #placeholder = "Enter Username"})
<div class="input-group-btn">
<button class="btn ccl-btn ccl-btn-red ccl-btn-search" type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
}
</div>
<div class="col-lg-offset-3 col-lg-6">
#foreach (var item in Model)
{
<div class="details-block">
#Html.DisplayFor(modelItem => item.UserName)
<button type="button" class="btn ccl-btn ccl-btn-green ccl-btn-search pull-right">Select User</button>
</div>
}
</div>
</div>
What I want to be able to do is hide the following div
<div class="col-lg-offset-3 col-lg-6">
#foreach (var item in Model)
{
<div class="details-block">
#Html.DisplayFor(modelItem => item.UserName)
<button type="button" class="btn ccl-btn ccl-btn-green ccl-btn-search pull-right">Select User</button>
</div>
}
</div>
Then show that Div when the submit button is clicked
My Controller looks like the following
public class PasswordController : Controller
{
private CCLPasswordManagementDBEntities db = new CCLPasswordManagementDBEntities();
public ActionResult Search(string searchString)
{
var users = from x in db.users select x;
if (!String.IsNullOrEmpty(searchString))
{
users = users.Where(x => x.UserName.ToUpper().Contains(searchString.ToUpper()));
}
return View(users);
}
}
At the moment the div is constantly shown and updates when the submit button is pressed but I want to hide that div until someone presses the submit button then it can show.
Thanks in advance for the help.
Change your code in the controller to this:
public ActionResult Search(string searchString)
{
var users = from x in db.users select x;
ViewBag.ShowList = false;
if (!String.IsNullOrEmpty(searchString))
{
ViewBag.ShowList = true;
users = users.Where(x => x.UserName.ToUpper().Contains(searchString.ToUpper()));
}
return View(users);
}
And change your view to this:
#model IEnumerable<WebApplication3.Models.user>
#{
ViewBag.Title = "Password Management";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section title {<h1>#ViewBag.Title</h1>}
<div id="page-block" class="page-block-three row">
<div style="margin-top: 30px;" class="col-lg-offset-2 col-lg-8">
#using (Html.BeginForm())
{
<div class="input-group">
#Html.TextBox("SearchString", null, new { #class = "form-control ccl-form", #style = "z-index: 10", #placeholder = "Enter Username"})
<div class="input-group-btn">
<button class="btn ccl-btn ccl-btn-red ccl-btn-search" type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
}
</div>
#if(ViewBag.ShowList){
<div class="col-lg-offset-3 col-lg-6">
#foreach (var item in Model)
{
<div class="details-block">
#Html.DisplayFor(modelItem => item.UserName)
<button type="button" class="btn ccl-btn ccl-btn-green ccl-btn-search pull-right">Select User</button>
</div>
}
</div>
}
</div>
You can try having a flag (ViewBag.isShown = false;)
When the page refreshes, it will show your div.
Code should be like below:
if (ViewBag.isShown == true)
{
..your for each block..
}
I'm using MVC 4 Ajax.BeginForm to update but it updates only the first element <div>
the View:
#model List<CSP1225.Models.Item>
#{
ViewBag.Title = "RecentItems";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/CSS/jobs.css" rel="stylesheet" />
#{ var convert = ViewBag.convert;
}
<div>
#foreach (var item in Model)
{
<div class="job-item">
<div class="inner">
<div class="span8 job-span">
<!--start of job list container div-->
<div id="ja-joblist">
<ol id="ja-searchjoblist">
<li class="job-item">#{ var PriceLE = #item.Price * convert;}
#using (#Ajax.BeginForm("_AddToCart", "Home", item, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "cart" }, null))
{
<!-- job item right section-->
<div class="inner">
<div class="ja-job-meta clearfix">
<span class="ja-job-category">#item.ItemName</span>
<span class="ja-job-category">#item.Price $</span>
<span class="ja-job-category">#PriceLE LE</span>
<div id="cart"></div>
<button type="submit">Add to Cart</button>
</div>
</div>
} </li>
<!-- end of job item right section-->
<!-- end of job item -->
</ol>
</div>
</div>
</div>
</div>
}
#Html.ActionLink("Go Back", "Index", "Home", new { #class = "makeneworder" })
</div>
and Controller:
public ActionResult _AddToCart(Item model)
{
ItemModel it = new ItemModel();
it.itemName = model.ItemName;
it.itemUrl = model.ItemURL;
it.quantity = 1;
it.unitprice = model.Price;
it.weight = (int)model.Weight;
it.ItemCategory =(int)model.CategoryID;
CartList.Add(it);
ViewBag.convert = (decimal)_db.Currencies.Where(x => x.Name == "Dollar").FirstOrDefault().Value;
ViewBag.list = CartList;
return PartialView();
}
Partial view :
<p>Added to Cart</p>
but the view returns multiple elements (as long as the list contains elements) when i click Add to Cart it updates the first element.. i understand that because u can not give another <div> the same id but how can i fix it?
you can create a dynamic ID like
#{ var divID = 1; }
then use it like
UpdateTargetId = "cart" + divID }
and
<div id="cart#divID" ></div>
How can i use pagination for showing data dynamically in div in asp .net using ajax or jquery?
To be honest, it's hard to help you - you should be more specific, but maybe you are looking for sth like this:
jQuery pagination plugin
and
demo here
You haven't really asked a real question, but maybe this will help: https://github.com/TroyGoode/PagedList
You can create pagination on your div using bootstrap and jquery.
Controller
public ActionResult Index()
{
// Tab Data
ThumbnailViewModel model = new ThumbnailViewModel();
model.ThumbnailModelList = new List<ThumbnailModel>();
// Test Details Data
List<ThumbnailDetails> _detaisllist = new List<ThumbnailDetails>();
int count = 10;
for (int i = 1; i <= count; i++)
{
ThumbnailDetails obj = new ThumbnailDetails();
obj.Details1 = "Details- Main" + i;
obj.Details2 = "Details- Main-Sub" + i;
_detaisllist.Add(obj);
}
// batch your List data for tab view i want batch by 2 you can set your value
var listOfBatches = _detaisllist.Batch(2);
int tabNo = 1;
foreach (var batchItem in listOfBatches)
{
// Generating tab
ThumbnailModel obj = new ThumbnailModel();
obj.ThumbnailLabel = "Lebel" + tabNo;
obj.ThumbnailTabId = "tab" + tabNo;
obj.ThumbnailTabNo = tabNo;
obj.Thumbnail_Aria_Controls = "tab" + tabNo;
obj.Thumbnail_Href = "#tab" + tabNo;
// batch details
obj.ThumbnailDetailsList = new List<ThumbnailDetails>();
foreach (var item in batchItem)
{
ThumbnailDetails detailsObj = new ThumbnailDetails();
detailsObj = item;
obj.ThumbnailDetailsList.Add(detailsObj);
}
model.ThumbnailModelList.Add(obj);
tabNo++;
}
// Getting first tab data
var first = model.ThumbnailModelList.FirstOrDefault();
// Getting first tab data
var last = model.ThumbnailModelList.LastOrDefault();
foreach (var item in model.ThumbnailModelList)
{
if (item.ThumbnailTabNo == first.ThumbnailTabNo)
{
item.Thumbnail_ItemPosition = "first";
}
if (item.ThumbnailTabNo == last.ThumbnailTabNo)
{
item.Thumbnail_ItemPosition = "last";
}
}
return View(model);
}
View:
#model ThumbnailPagination.Models.ThumbnailViewModel
#{
ViewBag.Title = "Home Page";
}
<div class="container">
<div class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3">
<div class="row">
<nav aria-label="...">
<ul class="pager" role="tablist">
<li class="previous" onclick="goTo(1);"><span aria-hidden="true">←</span> Previous</li>
#{
foreach (var item in Model.ThumbnailModelList)
{
if (item.Thumbnail_ItemPosition == "first")
{
<li class="active" id="#item.Thumbnail_ItemPosition">
<a aria-controls="#item.Thumbnail_Aria_Controls" data-toggle="tab" href="#item.Thumbnail_Href" role="tab">#item.ThumbnailTabNo</a>
</li>
}
else if (item.Thumbnail_ItemPosition == "last")
{
<li id="#item.Thumbnail_ItemPosition">
<a aria-controls="#item.Thumbnail_Aria_Controls" data-toggle="tab" href="#item.Thumbnail_Href" role="tab">#item.ThumbnailTabNo</a>
</li>
}
else
{
<li>
<a aria-controls="#item.Thumbnail_Aria_Controls" data-toggle="tab" href="#item.Thumbnail_Href" role="tab">#item.ThumbnailTabNo</a>
</li>
}
}
}
<li class="next" onclick="goTo(2);">Next <span aria-hidden="true">→</span></li>
</ul>
</nav>
</div>
<!-- Tab panes -->
<div class="tab-content">
#{
foreach (var item in Model.ThumbnailModelList)
{
if (item.Thumbnail_ItemPosition == "first")
{
<div class="tab-pane active" id="#item.ThumbnailTabId" role="tabpanel">
#{
foreach (var detailsitem in item.ThumbnailDetailsList)
{
<div class="col-sm-6">
<div class="thumbnail">
<img alt="..." src="http://placehold.it/240x150">
<div class="caption">
<h3>#detailsitem.Details1</h3>
<p>
#detailsitem.Details2
</p>
<p>
<a class="btn btn-primary" href="#" role="button">
Read more
...
</a>
</p>
</div>
</div>
</div>
}
}
</div>
}
else
{
<div class="tab-pane" id="#item.ThumbnailTabId" role="tabpanel">
#{
foreach (var detailsitem in item.ThumbnailDetailsList)
{
<div class="col-sm-6">
<div class="thumbnail">
<img alt="..." src="http://placehold.it/240x150">
<div class="caption">
<h3>#detailsitem.Details1</h3>
<p>
#detailsitem.Details2
</p>
<p>
<a class="btn btn-primary" href="#" role="button">
Read more
...
</a>
</p>
</div>
</div>
</div>
}
}
</div>
}
}
}
</div>
</div>
</div>
<style>
.pager .active a {
background-color: #337AB7;
color: #FFF;
border: 0px;
}
</style>
<script>
function goTo(number) {
$('ul.pager li:eq(' + number + ') a').tab('show');
upgradePreNext(number);
}
function upgradePreNext(number) {
if (number > 1) {
$('ul.pager li:eq(0)').attr("onclick", "goTo(" + (number - 1) + ")");
$('ul.pager li:eq(0)').attr("class", "previous");
} else {
$('ul.pager li:eq(0)').attr("class", "disabled");
}
if (number < 5) {
$('ul.pager li:eq(6)').attr("onclick", "goTo(" + (number + 1) + ")");
$('ul.pager li:eq(6)').attr("class", "next");
} else {
$('ul.pager li:eq(6)').attr("class", "disabled");
}
}
$(document).ready(function () {
$('li a').on('click', function (e) {
goTo((e.target.innerHTML) - 0);
});
});
</script>
Out put will be:
You can also download the sample code.