Hi I have the following code in razor:
#{
foreach (var item in this.Model)
{
if (item.Items == null)
{
#: <li #{if (item.Active) { <text> class="active" </text> } }>
if (item.SpanClass == null)
{
#: </i><span> #item.Text </span>
}else
{
#: </i><span> #item.Text <span class="#item.SpanClass">#item.SpanValue</span></span>
}
}
#: </li>
}
}
It looks like this:
But I go to:
Then the code format is destroyed:
Any clue?
I would do something like that
#{
foreach (var item in this.Model)
{
var activeClass = item.Active ? "active" : "";
if (item.Items == null)
{
<li class="#activeClass">
#if (item.SpanClass == null)
{
<i class="#item.Icon"></i><span> #item.Text </span>
}
else
{
<i class="#item.Icon"></i><span> #item.Text <span class="#item.SpanClass">#item.SpanValue</span></span>
}
</li>
}
}
}
Related
I want the number of customers in that country to be written in the numbers "00" next to the countries. can you help?
With the html helper, I can classify suppliers on the basis of countries. but I could not write the number of suppliers in that country on the same line.
controller:
public ActionResult SupplierList(int supID = 0, string country="")
{
ViewBag.supCountries= _db.Suppliers.Select(a => a.Country).Distinct().ToList();
List<Suppliers> supplierList;
if (country== "" && supID == 0)
{
supplierList = _db.Suppliers.ToList();
}
else if (country!= "" && supID == 0)
{
supplierList = _db.Suppliers.Where(a => a.Country == country).ToList();
}
else
{
supplierList= _db.Suppliers.Where(a => a.SupplierID == supID).ToList();
}
return View(supplierList);
}
view:
<div class="col-md-2">
<ul class="list-group">
#foreach (string item in ViewBag.supCountries)
{
<li class="list-group-item">
#Html.ActionLink(item, "SupplierList", new { country= item })
<span style="float:right; color:lightgrey">
00
</span>
</li>
}
</ul>
<div>
#Html.ActionLink("New Supplier", "Create", null, new { #class = "btn btn-success" })
</div>
</div>
You passed the supplier list in as a model, so you should be able to replace 00 with something like
<span style="float:right; color:lightgrey">
#Model.Count(x => x.Country == item).ToString("N0")
</span>
I have an MVC menu that is being populated from the database. I have code for it to reach the 4th menu child. I am wondering if there is a better way to write this code in my cshtml so that it detects menu children automatically and i dont have to hard code the menu to a certain level. Thanks for your help.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
#foreach (var menuLevel1 in navbarmenu)
{
<li class="dropdown">
<a href="~/CATS/Default.aspx">
#menuLevel1.MenuName<span class="caret"></span>
</a>
#{var navbarsubmenu = myMenu.Where(x => x.ParentID == menuLevel1.MenuID && x.IsDeleted == false && x.IsEnabled == true).ToList().OrderBy(x => x.MenuName);}
#if (navbarsubmenu.IsAny())
{
<ul class="dropdown-menu">
#foreach (var menuLevel2 in navbarsubmenu)
{
<li class="dropdown-submenu">
#if (menuLevel2.MenuLink != null && menuLevel2.MenuLink != "")
{
<a href="#Url.Content(menuLevel2.MenuLink)">
#menuLevel2.MenuName
</a>
}
else
{
<a href="~/CATS/Default.aspx">
#menuLevel2.MenuName
</a>
}
#{var navbarsubmenu2 = myMenu.Where(x => x.ParentID == menuLevel2.MenuID && x.IsDeleted == false && x.IsEnabled == true).ToList().OrderBy(x => x.MenuName);}
#if (navbarsubmenu2.IsAny())
{
<ul class="dropdown-menu">
#foreach (var menuLevel3 in navbarsubmenu2)
{
<li class="dropdown-submenu">
#if (menuLevel3.MenuLink != null && menuLevel3.MenuLink != "")
{
<a href="#Url.Content(menuLevel3.MenuLink)">
#menuLevel3.MenuName
</a>
}
else
{
<a href="~/CATS/Default.aspx">
#menuLevel3.MenuName
</a>
}
#{var navbarsubmenu3 = myMenu.Where(x => x.ParentID == menuLevel3.MenuID && x.IsDeleted == false && x.IsEnabled == true).ToList().OrderBy(x => x.MenuName);}
#if (navbarsubmenu3.IsAny())
{
<ul class="dropdown-menu">
#foreach (var menuLevel4 in navbarsubmenu3)
{
<li class="dropdown-submenu">
#if (menuLevel4.MenuLink != null && menuLevel4.MenuLink != "")
{
<a href="#Url.Content(menuLevel4.MenuLink)">
#menuLevel4.MenuName
</a>
}
else
{
<a href="~/CATS/Default.aspx">
#menuLevel4.MenuName
</a>
}
</li>
}
</ul>
}
</li>
}
</ul>
}
</li>
}
</ul>
}
</li>
}
</ul>
Recursive Method as recommended by StephenMuecke
public static class MenuChildExtensions
{
public static MvcHtmlString MenuChild(this HtmlHelper helper, Menu menu)
{
return MvcHtmlString.Create(MenuChildren(menu));
}
private static string MenuChildren(Menu menu)
{
StringBuilder html = new StringBuilder();
TagBuilder div = new TagBuilder("div");
div.InnerHtml = menu.Name;
html.Append(div.ToString());
if (menu.MenuItems != null)
{
foreach (Menu menuchildMenu in menu.MenuItems)
{
html.Append(MenuChildren(menuchildMenu));
}
}
TagBuilder item = new TagBuilder("li");
item.InnerHtml = html.ToString();
TagBuilder container = new TagBuilder("ul");
container.InnerHtml = item.ToString();
return container.ToString();
}
}
}
I am having issues with an Action link within the #helper.
See below this line
<a href="#Url.Action("Index","Category", new { id = item.Id })">
It simply does not raise event. What am i doing wrong here?
#helper ShowTree(IEnumerable<FrontEnd.Controllers.SharedController.Category> categories)
{
<ul id="#(Added == false ? "categories" : "")" class="parent-1">
#foreach (FrontEnd.Controllers.SharedController.Category item in categories)
{
Added = true;
<li class="child-1 has-sublist">
<a href="#Url.Action("Index","Category", new { id = item.Id })">
#item.CategoryName
#if (item.Children.Count > 0)
{ <span>
[#item.Children.Count]
</span>
}
</a>
#if (item.Children.Any())
{
#ShowTree(item.Children)
}
</li>
}
</ul>
}
Have you tried something like the following??
#Html.ActionLink(item.CategoryName, "Index", "Listing", new { id = item.Id }, null, null)
https://msdn.microsoft.com/en-us/library/dd460522(v=vs.118).aspx
Ok. Just found the cure.
Javascript was blocking the request to the controller..
$('#categories > li a').click(function(e){
if($(this).parent().hasClass('has-sublist')) {
e.preventDefault();
}....
.................
Currently this is my code to pull a list of items from database an show under a Menu item:
<div class="top">
<ul>
<li class='itemCaption f17o'> </li>
#foreach (var category in Model.CatList)
{
<li>
<a href="/c/#category.Id/#category.Name" class='white'>#category.Name</a>
</li>
}
</ul>
</div>
I tried the same using the code below also, but even though the logic seems right the variable named value creates problems... since i am very new to MVC its also a headache for me...
#foreach (var category in Model.CatList.Select((Value, i => new { i, Value }))
{
if (category.i % 8 == 0)
{
#("</ul></li><li><ul>")
}
<li>
<a href="/c/#category.Value.Id/#category.Value.Name" class='white'>#category.Value.Name</a>
</li>
}
.. Can someone plese help me to rewrite the code in For-loop instead of for-each..
I didn't use your mode but I hope you can adapt the example below
#foreach (var x in Enumerable.Range(0, 200))
{
if (x % 8 == 0)
{
#:<ul>
#:<li>#x</li>
}
else if (x % 8 == 7)
{
#:<li>#x</li>
#:</ul>
}
else {
#:<li>#x</li>
}
}
If this isn't what you were trying to accomplish let me know and I will edit
EDIT
With your model should be
#foreach (var category in Model.CatList.Select((Value, i) => new { i, Value }))
{
if (category.i % 8 == 0)
{
#:<ul>
#:<li><a href="/c/#Value.Id/#Value.Name" class='white'>#Value.Name</a></li>
}
else if (category.i % 8 == 7)
{
#:<li><a href="/c/#Value.Id/#Value.Name" class='white'>#Value.Name</a></li>
#:</ul>
}
else {
#:<li><a href="/c/#Value.Id/#Value.Name" class='white'>#Value.Name</a></li>
}
}
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.