I need to create Menu for the master page. I've faced with following problem
<ul class="main_menu">
#foreach (var node in Model.Nodes)
{
int i = 1;
<li class="**HOW TO ADD HERE A CLASS like level+i.ToString()?????**">#Html.DisplayFor(m => node) |
#if (node.Children.Any()) {
<ul class="menuchild" style="display: none;">
<li>
#Html.DisplayFor(m => node.Children)
</li>
</ul>
}
</li>
}
</ul>
I need to create levels for the menu for Javascript , say level1 , level2 , level3 , how to combine strings inside Razor.
Thanks.
Enclose with #()
<li class="#("level" + i.ToString() )">
or
<li class="#string.Format("level{0}", i)">
Related
I have a search input box to take a string in the frontend with suchfensterAction. The result seems to be correct. But when I click to page 2 or higher I always get the suchfensterAction and never the higher paginated page.
(static function() {
\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
'Myext', 'Myext',
[...\Controller\MyextController::class => 'suchfenster, list,show, new, .....
To show the result in the frontend with pagination i have used following controller code:
...
public function suchfensterAction()
{
return $this->htmlResponse();
}
public function listAction(int $currentPage = 1): \Psr\Http\Message\ResponseInterface
{
$args=$this->request->getArguments();
$gefunden=$this->absolventenRepository->search($this->request->getArguments());
$itemsPerPage = 15;
$arrayPaginator = new \TYPO3\CMS\Extbase\Pagination\QueryResultPaginator($gefunden,
$currentPage, $itemsPerPage);
$pagination = new SimplePagination($arrayPaginator);
$this->view->assignMultiple(
[
'paginator' => $arrayPaginator,
'pagination' => $pagination,
'pages' => range(1, $pagination->getLastPageNumber()),
]
);
return $this->htmlResponse();
}
...
and the templates suchfenster.html
<f:form action ="list" >
<f:form.textfield autofocus ="1" name="query" value="{queryvalue}" placeholder = '{text}' />
<f:form.submit value="Suchen"/><br>
</f:form>
...
und list.html
...
<table>
<f:for each="{paginator.paginatedItems}" as="item" iteration="iterator">
<tr><f:render partial="Item.html" arguments="{item:item}" /></tr>
</f:for>
</table>
<f:render partial="Paginator.html" arguments="{pagination: pagination, pages: pages,
paginator: paginator}" />
...
My Paginator.html:
<ul class="pagination pagination-block">
<f:if condition="{pagination.previousPageNumber} &&
{pagination.previousPageNumber} >= {pagination.firstPageNumber}">
<f:then>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: 1})}" title="{f:translate(key:'pagination.first')}">
<i class="material-icons">first_page</i>
</a>
</li>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.previousPageNumber})}" title="{f:translate(key:'pagination.previous')}">
<i class="material-icons">chevron_left</i>
</a>
</li>
</f:then>
<f:else>
<li class="disabled"><i class="material-icons">first_page</i></li>
<li class="disabled"><i class="material-icons">chevron_left</i></li>
</f:else>
</f:if>
<f:for each="{pages}" as="page">
<li class="{f:if(condition: '{page} == {paginator.currentPageNumber}', then:'active', else:'waves-effect')}">
{page}
</li>
</f:for>
<f:if condition="{pagination.nextPageNumber} && {pagination.nextPageNumber} <= {pagination.lastPageNumber}">
<f:then>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.nextPageNumber})}" title="{f:translate(key:'pagination.next')}">
<i class="material-icons">chevron_right</i>
</a>
</li>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.lastPageNumber})}" title="{f:translate(key:'pagination.last')}">
<i class="material-icons">last_page</i>
</a>
</li>
</f:then>
<f:else>
<li class="disabled"><i class="material-icons">chevron_right</i></li>
<li class="disabled"><i class="material-icons">last_page</i></li>
</f:else>
</f:if>
</ul>
Where I have to control the argument 'currentPage'? bzw. where I have to increment 'currentPage'?
The code is doing the pagination correctly, however, I am unable to use the boostrap class that shows the active page
<div class="page-nation">
<ul class="pagination pagination-large">
<li>
#{
if (ViewBag.PageNumber> 1)
{
<a class="page-link" href="#Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber- 1 })">«</a>
}
else
{
<a class="page-link disabled">«</a>
}
}
</li>
#{
var currentPage= ViewBag.PageNumber;
for (var i = 1; i <= ViewBag.totalCount; i++)
{
<li #(currentPage== i ? "class= page-item active" : "")>
<a class="page-link" href="#Url.Action("Index", "Boats", new {search= ViewBag.searchData, pageNumber= i})">#i</a>
</li>
}
}
<li>
#if (ViewBag.PageNumber< ViewBag.totalCount)
{
<a class="page-link" href="#Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber+ 1 })">»</a>
}
else
{
<a class="page-link disabled">»</a>
}
</li>
</ul>
</div>
The part that should show the active item is this, but for some reason, this class is not working
<li #(currentPage== i ? "class= page-item active" : "")>
HTML output:
As can be seen in HTML, the class is called, but it doesn't pass anything to it...
<div class="page-nation">
<ul class="pagination pagination-large">
<li>
<a class="page-link" href="/Barcos?numeroPagina=1">«</a>
</li>
<li>
<a class="page-link" href="/Boats?pageNumber=1">1</a>
</li>
<li class="page-item" active="">
<a class="page-link" href="/Boats?pageNumber=2">2</a>
</li>
<li>
<a class="page-link disabled">»</a>
</li>
</ul>
</div>
You're not adding quotes to the class property value, adding quotes will make your HTML render properly:
<li #Html.Raw(currentPage== i ? "class=\"page-item active\"" : "")>
I have a table called "Tabel_Items" in database with these fields: id, parent, and child:
I want to generate html tags such as these:
<ul>
<li>parent1
<ul>
<li>child1</li>
<li>child2
<ul>
<li>child21</li>
<li>child22</li>
</ul>
</li>
</ul>
</li>
<li>parent2
<ul>
<li>child3</li>
</ul>
</li>
</ul>
I get my items with a LINQ query and pass them to view:
public ActionResult Index()
{
DataClasses1DataContext db = new DataClasses1DataContext();
var items = from i in db.Table_Items
select i;
return View(items);
}
How can I loop through the "items" in view and make a Tree list out of them?
I want a lambda expression to select those rows that have "parentId==null" at first. I test a code like this, but has an error:
#foreach (var i in Model)
{
#Html.DisplayFor(x => i.ItemName.Where(i.ParentId==null));
}
I solved my problem.Thank for me:
<ul>
#foreach (var x in Model.Where(f => f.ParentId == null))
{
<li>
#Html.DisplayFor(f => x.ItemName)
<ul>
#foreach (var y in Model.Where(c => c.ParentId == x.Id))
{
<li>
#Html.DisplayFor(c => y.ItemName)
<ul>
#foreach (var z in Model.Where(c => c.ParentId == y.Id))
{
<li>#Html.DisplayFor(c => z.ItemName)</li>
}
</ul>
</li>
}
</ul>
</li>
}
</ul>
I'm trying to bind data to Action Link within Knockoutjs foreach loop. This code works fine
<ul data-bind="foreach: ItemList">
<li>
<a data-bind="attr: { 'href': '#Url.Action("Items", "ItemController")' }" >
LinkText
</a>
</li>
</ul>
But I also need to bind a parameter and bind the LinkText with knockoutjs. I tried different code samples but nothing seems to work.
Final code should be something like,
<ul data-bind="foreach: ItemList">
<li>
<a data-bind="attr: { 'href': '#Url.Action("Items", "ItemController")', new { id = DataBindId)' }" >
DataBindName
</a>
</li>
</ul>
How can I make this work?
Try this...
<a data-bind="attr: { 'href': '#Url.Action("Items", "ItemController")?id=' + DataBindId }, text: DataBindName" >
</a>
Which should output something like...
<a data-bind="attr: { 'href': '/Item/Items?id=' + DataBindId }, text: DataBindName" >
</a>
I have tried to group a set of radio buttons inside loop by providing additional html attribute in html help as below -
<ol class="Opt">
#foreach (var opt in quest.Options)
{
<li class="Opt">
#Html.RadioButtonFor(o => opt.Title, opt.Title, new { #name = "uniqueRadio"})
#Html.Label(opt.Title)
</li>
}
</ol>
However name attribute ot generated input html tag gets over-written by opt.Title for obvious reasons. MVC-4 uses name attribute for strongly typed model-binding when posting data.
How do I make radio button grouped together ?
EDIT: I replaced RadioButtonFor with RadioButton, as suggested below. But this way I miss-out model binding feature.
<ol class="Question">
#for (int j = 0; j < Model.Options.Count; j++)
{
<li class="Opt">
#Html.RadioButton("uniqueRadio", Model.Options[j].IsSelected, false)
#Model.Options[j].Title
</li>
}
</ol>
Use simple RadioButton
<ol class="Opt">
#foreach (var opt in quest.Options)
{
<li class="Opt">
#Html.RadioButton("uniqueRadio", opt.Title)
#Html.Label(opt.Title)
</li>
}
</ol