ASP.NET Core MVC : recursive menu - asp.net-core-mvc

I switched from ASP.NET MVC to ASP.NET Core MVC, but how can I run this code in ASP.NET Core MVC. I'm waiting for your help
#helper CreateMenu(IEnumerable<Menuler> anamenu)
{foreach (Menuler rootcat in anamenu.OrderBy(x => x.Sira))
{
if (rootcat.AltMenuler.Count() > 0)
{
<li>
<a class="" href="#(rootcat.Url)">
#(rootcat.MenuAdi)
</a>
<ul class="dropdown-menu">
#CreateSubMenuItems(rootcat)
</ul>
</li> }
else
{
<li>
<a class="" href="#(rootcat.Url)"> #(rootcat.MenuAdi) </a>
</li>
}
}
#helper CreateSubMenuItems(Menuler menu)
{foreach (Menuler altmenu in menu.AltMenuler.OrderBy(x => x.Sira))
{
if (altmenu.AltMenuler.Count() > 0)
{
<li>
<a href="#(altmenu.Url)">
#(altmenu.MenuAdi)
</a>
#if (altmenu.AltMenuler.Count() > 0)
{
<ul>
#CreateSubMenuItems(altmenu)
</ul>}
</li> }
else
{
<li>
<a href="#(altmenu.Url)">
#(altmenu.MenuAdi)
</a>
</li>}
}
#CreateMenu(anamenu)

The #helper syntax can help declare/create a reusable helper method in ASP.NET Web Pages (Razor) website, but please note that the #helper syntax is not included in ASP.NET Core.
To create a reusable snippets of HTML in ASP.NET Core website, you can try to use partial views/pages, custom taghelpers or view components.
For more information, please check following docs:
Partial views
Custom tag helper
View components

Related

Homepage won't show newly added records but other pages do

I'm using a Laravel 5.7 in an old web project last year 2019 but now I encountered a very weird bug.
This is a website that when you add a new game, it will show to the menu list and if it is featured it will show to the homepage content.
this is the table ['game_id', 'name', 'key', 'status', 'order', 'is_featured']
in the header view I put this code:
<ul class="nav-menu">
<li class="{{ ($page == "games" ? 'menu-active' : '') }} submenu dropdown"><a href="/games" >Games</a>
<ul class="dropdown-menu">
#foreach(GetPublishedGames() as $game)
<li class="nav-item">{{$game->name}}</li>
#endforeach
</ul>
</li>
...
calling this helper code GetPublishedGames()
function GetPublishedGames(){
$data = DB::table("game")->where("status", 1)->orderBy("order")->get();
return $data;
}
in the homepage controller I had this line
"feat_games" => Game::where("status", 1)->where("is_featured", 1)->orderBy("order")->limit(5)->get(),
that calls in the homepage view:
#if(count($feat_games))
#foreach($feat_games as $feat_game)
<div class="feat-game-item wow fadeInUp">
... some content ...
</div>
#endforeach
#endif
I have no idea why this happening, it works before in the local and development stage. I did tried to clear cache.
any idea?

Thymeleaf display element as active when using layout

I wanted to display navigation element as active (class nav-item active) when that element is clicked and the other elements with the non active class (nav-item). I am also using Thymeleaf layouts.
In the controller i have following code
#GetMapping("/login")
public String getLoginPage(Model model) {
model.addAttribute("activeLink", "Login");
return "login";
}
In the layout.html file (this file contains common header and footer for all pages), i have following code
<nav th:replace="navigation.html :: navibar(activeLink=${activeLink})"></nav>
In the navigation.html (this file only has navigation related code), i have code similar to
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" th:fragment="navibar(activeLink)">
<a class="navbar-brand" href="/title">Title</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li th:class="${#strings.equals(activeLink, 'Home')} ? 'nav-item active' : 'nav-item'"><a class="nav-link" href="/">Home<span class="sr-only">(current)</span></a></li>
<li th:class="${#strings.equals(activeLink, 'Register')} ? 'nav-item active' : 'nav-item'"><a class="nav-link" href="/register">Register</a></li>
<li th:class="${#strings.equals(activeLink, 'Login')} ? 'nav-item active' : 'nav-item'" sec:authorize="isAnonymous()"><a class="nav-link" th:href="#{/login}">Login <span class="sr-only">(current)</span></a></li>
<li class="nav-item active" sec:authorize="isAuthenticated()"><a class="nav-link" th:href="#{/logout}">Logout <span class="sr-only">(current)</span></a></li>
</ul>
</div>
In the template returned by the controller (login), I do not have any navigation links specific code.
The above code is working, but is there a better simpler way to active navigation items?
Also, if I use flash attributes
redirectAttributes.addFlashAttribute("activeLink", "Register");
in the controller, then the functionality doesn't work
To avoid adding the activeLink to the model you can pass the activeLink when you include the fragment.
Like:
<div th:replace="nagivation :: navibar('Login')"></div>
Btw. you can remove the .html after the layout name.

Generating correct url for page link

I have implemented pagation in my Spring boot application. There are no problems in the logic of it, however I am running into a weird issue with Thymeleaf.
Right now if I go to the following url
http://localhost:8080/Phoenix-listings
and if I hover my mouse over the link to page 2 is
http://localhost:8080/2
which is the wrong link, but if I manually go to the following url
http://localhost:8080/Phoenix-listings/1
then if I hover my mouse over page 2, then the link is
http://localhost:8080/Phoenix-listings/2
which is how it should be.
How can I make the correct link get generated even if I am in http://localhost:8080/Phoenix-listings?
Below is the section related to my pagation in Thymeleaf
<div class="row">
<div th:if="${ads.totalPages != 1}"
class="form-group col-md-11 pagination-centered">
<ul class="pagination">
<li th:class="${ads.number == 0} ? disabled"><a
class="pageLink" th:href="1">«</a></li>
<li th:class="${ads.number == 0} ? disabled"><a
class="pageLink" th:href="${ads.number}">←</a></li>
<li
th:class="${ads.number == (page - 1)} ? 'active pointer-disabled'"
th:each="page : ${#numbers.sequence(pager.startPage, pager.endPage)}">
<a class="pageLink" th:href="${page}" th:text="${page}"></a>
</li>
<li th:class="${ads.number + 1 == ads.totalPages} ? disabled">
<a class="pageLink" th:href="${ads.number + 2}">→</a>
</li>
<li th:class="${ads.number + 1 == ads.totalPages} ? disabled">
<a class="pageLink" th:href="${ads.totalPages}">»</a>
</li>
</ul>
</div>
</div>
In this case, you should be using thymeleaf's built in url syntax. It would look like this:
th:href="#{/{page}(page=${page})}"
Creating a link with #{/} means that thymeleaf automatically adds the context (Phoenix-listings in your case.) {page} is a placeholder. (page=${page}) replaces the placeholder with the variable.
You can also use string concatenation, but I wouldn't recommend it in most cases (because using the standard syntax means thymeleaf can correctly encode urls).
th:href="#{${'/' + page}}"

How to use inline template with multiple inputs in MVC Razor view

Inside my view I currently have
#{
Func<Website.Security.User[], object> renderUserList = #<text>
<div class="span4">
#*<h2>#title</h2>*#
<ul>
#foreach (var user in item)
{
<li>#user.UserName - Edit</li>
}
</ul>
</div>
</text>;
}
#renderUserList(Model.AdminUsers)
How can I rework this so that the renderUserList expression can take in a second input for the section title?
As I understand, you trying to create helper: ASP.NET MVC 3 and the #helper syntax within Razor
#helper renderUserList(Website.Security.User[] users, string title)
{
<div class="span4">
<h2>#title</h2>
<ul>
#foreach (var user in users)
{
<li>#user.UserName - Edit</li>
}
</ul>
</div>
}

How do I make a AJAX nested list, in AngularJS?

I've made a list who's content is loaded via AJAX, and it works as intended.
I'd now like to make each list entry load (via AJAX) and display a sublist, when clicked upon.
Is this possible in AngularJS? (I'm new to AngularJs and am more than a little confused over $scope.)
<div ng-controller="StockGroupCtrl">
<ul>
<li ng-repeat="group in groups">
<span>{{group.prod_grp}}</span>
<span>{{group.desc}}</span>
<!-- something like
<ul ng-controller="WhatShouldItBe?">
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>
-->
</li>
</li>
</div>
I've made the outer code work with:
function StockGroupCtrl($scope, $http) {
$scope.groups = [];
$scope.handleGroupsLoaded = function(data, status) {
$scope.groups = data;
}
$scope.fetch = function() {
$http.get('/api/stock/groups/').success($scope.handleGroupsLoaded);
}
$scope.fetch();
}
but I can't really see where to start with the inner lists.
How about this? You don't need another controller.
<ul>
<li ng-repeat="item in group.items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>

Resources