How can I write this in MVC 3 Razor correctly?
<li <%if(ViewContext.RouteData.Values["Controller"].ToString() == "Home"){%> class="active"<%} %>>Home</li>
Blessings
EDIT
this is my code and does not work :(
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">CYSAC 2.0</a>
<ul class="nav">
<li #(ViewContext.RouteData.Values["Controller"].ToString() == "Home" ? "class=\"active\"" : string.Empty)>Inicio</li>
<li #(ViewContext.RouteData.Values["Controller"].ToString() == "University" ? "class=\"active\"" : string.Empty)>University</li>
<li #(ViewContext.RouteData.Values["Controller"].ToString() == "Estudent" ? "class=\"active\"" : string.Empty)>Estudent</li>
</ul>
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
please help
I would write this as:
<li class="#ViewContext.RouteData.Values["Controller"].ToString() == "Home" ? "active" : """>
Home
</li>
This has a drawback of having an class="" if it's not the current controller, but in the newest version of Razor, it will recognize this and strip it out.
You can use the #(expression) - syntax:
<li class="#((ViewContext.RouteData.Values["Controller"].ToString() == "Home" ?
"active" : string.Empty)">
Home
</li>
Today I found myself in the same situation ( 5 months later ).
1) Define variable controllerName and set with controller name .ToLower()
2) Compare with Equals("home")
#{
var controllerName = ViewContext.RouteData.Values["Controller"].ToString().ToLower();
}
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">CYSAC 2.0</a>
<ul class="nav">
<li class="#(controllerName.Equals("home") ? "active" : "")">Inicio</li>
<li class="#(controllerName.Equals("university") ? "active" : "")">University</li>
<li class="#(controllerName.Equals("estudent") ? "active" : "")">Estudent</li>
</ul>
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
Works for me!
Related
I have a view with multiple tabs. Each having different forms. When I submit a form from one tab, it returns to same page but primary tab. How could I get to return to same tab from which I was working.
Controller
public function recieve(Request $request)
{
$item = Item::find($request->input('item'));
$item->recieved_at = now();
$item->recieved_status = "1";
$item -> save();
return redirect('/files/'.$item->file)->with('success','Item Recieved Confirmed');
}
view - tabs
<ul class="nav nav-tabs" id="fileTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
aria-controls="profile" aria-selected="true">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="job-tab" data-toggle="tab" href="#job" role="tab" aria-controls="job"
aria-selected="false">Job</a>
</li>
<li class="nav-item">
<a class="nav-link" id="items-tab" data-toggle="tab" href="#items" role="tab" aria-controls="items"
aria-selected="false">Items</a>
</li>
<li class="nav-item"><a class="nav-link" id="mechanic-tab" data-toggle="tab" href="#mechanic" role="tab"
aria-controls="mechanic" aria-selected="false">Labour Hours</a>
</li>
<li class="nav-item">
<a class="nav-link" id="accounts-tab" data-toggle="tab" href="#accounts" role="tab"
aria-controls="accounts" aria-selected="false">Accounts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="accounts-tab" data-toggle="tab" href="#preview" role="tab"
aria-controls="accounts" aria-selected="false">Print Preview</a>
</li>
</ul>
Form
#if($file->job_status == "Closed")#else
{!! Form::open(['action' => 'FilesController#item','method' => 'POST']) !!}
<div class="row pt-3 pb-1">
<div class="form-group col-xs-12 col-sm-12 col-md-2">
{{Form::text('part_number','',['class'=>'form-control','placeholder'=>'Part Number'])}}
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-6">
{{Form::text('description','',['class'=>'form-control','placeholder'=>'Part Name'])}}
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-2">
{{Form::text('qty','',['class'=>'form-control','placeholder'=>'Qty'])}}
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-2">
{{Form::select('recieved_by',$users,null,['class'=>'form-control'])}}
</div>
</div>
{{Form::hidden('file',$file->id)}}
{{Form::submit('Release Item',['class'=>'form-control btn-danger btn btn-sm'])}}
{!! Form::close() !!}
#endif
I tried using hashtag tab name in return redirect statement,
return redirect('/files/'.$item->file."#items-tab")->with('success','Item Recieved Confirmed');
it would simply highlight the name but would not select. How could I achieve it?
your tab navigation,
<ul class="nav nav-tabs" id="tabMenu" role="tablist">
<li><i class="fa fa-camera" aria-hidden="true"></i> Galleries</li>
</ul>
hidden input field for tab
<input type="hidden" name="tab" value="Galleries">
RedirectRoute
$tab = $request->get('tab');
return back()->withInput(['tab'=>$tab]);
Javascript,
<script>
//redirect to specific tab
$(document).ready(function () {
$('#tabMenu a[href="#{{ old('tab') }}"]').tab('show')
});
</script>
If you want to do it in laravel than all you can do is,
-Give an id to each tab and an write an active class.
-Put a hidden input with value of the parent tab id.
-So, laravel will receive the tab id in the request object.
-Now, you can do whatever and return the tab id with to the view.
-Give a if condition to each tab item and check if matches the id from laravel response.
The match the id set the active class to it.
example
<ul>
<li id='tab1 {{ session()->get('tabId') === 'tab1' ? 'active' : '' }}'></li>
<li id='tab2 {{ session()->get('tabId') === 'tab2' ? 'active' : '' }}'></li>
</ul>
// tab1 body
<form>
<input type="hidden" name="tabId" value="tab1">
...
</form>
// tab2 body
<form>
<input type="hidden" name="tabId" value="tab2">
...
</form>
// controller
public funciton(Request $request) {
//tabId
$tabId = $request->input('tabId')
....
....
return redirect()->back()->with('tabId' => $tabId);
}
You can do this:
Controller:
public function tab() {
$active_tab = "tab2";
return view('tabs.index', compact('active_tab'));
}
View:
<ul class="nav nav-tabs">
<li class="#if($active_tab=="tab1") active #endif"><a data-toggle="tab" href="#home">Home</a></li>
<li class="#if($active_tab=="tab2") active #endif"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li class="#if($active_tab=="tab3") active #endif"><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade #if($active_tab=="tab1") in active #endif">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade #if($active_tab=="tab2") in active #endif">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade #if($active_tab=="tab3") in active #endif">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
You can show a specific tab with this code:
function showTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
// Verify location.hash
if (window.location.hash !== ''){
showTab(window.location.hash);
}
But I would pass a query string in the return, just to make sure there will be no collision with other eventual hashes. Something like:
return redirect('/files/'.$item->file."?openTab=your-tab-id")->with('success','Item Recieved Confirmed');
Of course, you would change the "location.hash" verification to a query string verification. Example: https://davidwalsh.name/query-string-javascript
<!-- BEGIN HEADER MENU -->
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-fw dropdown-fw-disabled active open selected">
<i class="icon-home"></i> Home
<ul class="dropdown-menu dropdown-menu-fw">
<li>
<i class="icon-bar-chart"></i> View Photo
</li>
<li class="active">
<i class="icon-bulb"></i> About
</li>
<li>
<i class="icon-graph"></i> Contact
</li>
</ul>
</li>
<li class="dropdown dropdown-fw dropdown-fw-disabled">
<i class="icon-home"></i> Upload
<ul class="dropdown-menu dropdown-menu-fw">
<li>
<i class="icon-bar-chart"></i> Upload Photo
</li>
<li>
<i class="icon-bulb"></i> View Photo List
</li>
</ul>
</li>
</ul>
</div>
I am still new to this but basically, I have 5 pages (View Photo, About, Contact, Upload Photo, View Photo List). Currently, I want to show this HTML in all 5 pages so that it will be standardized. If I change the "picture/about" in one page to "photograph/about" for example, the 5 pages will need to reflect this change. This gets more complex as the number of pages increases.
Is there any way or technique in Laravel to solve this issue? Thanks.
Create a template file like Laravel provides app.blade.php in resources/template/ directory, use extends, sections etc for designing, please read Laravel Documentation for Templates
You can use partials for this.
If your issue is adding the active class to the correct link then you can just use request()->is() to check the current url:
<li class="{{ request()->is('picture/externalphotoviewer') ? 'active' : '' }}">
<a href="{{ url('picture/externalphotoviewer') }}">
<i class="icon-bar-chart"></i> View Photo </a>
</li>
<li class="{{ request()->is('picture/about') ? 'active' : '' }}">
<a href="{{ url('picture/about') }}">
<i class="icon-bulb"></i> About </a>
</li>
<li class="{{ request()->is('picture/contact') ? 'active' : '' }}">
<a href="{{ url('picture/contact') }}">
<i class="icon-graph"></i> Contact </a>
</li>
Simply create a blade file inside your resources/views directory and then use #include e.g.
reasources/views/partials/header.blade.php:
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-fw dropdown-fw-disabled active open selected">
<a href="javascript:;" class="text-uppercase">
<i class="icon-home"></i> Home </a>
<ul class="dropdown-menu dropdown-menu-fw">
<li class="{{ request()->is('picture/externalphotoviewer') ? 'active' : '' }}">
<a href="{{ url('picture/externalphotoviewer') }}">
<i class="icon-bar-chart"></i> View Photo </a>
</li>
<li class="{{ request()->is('picture/about') ? 'active' : '' }}">
<a href="{{ url('picture/about') }}">
<i class="icon-bulb"></i> About </a>
</li>
<li class="{{ request()->is('picture/contact') ? 'active' : '' }}">
<a href="{{ url('picture/contact') }}">
<i class="icon-graph"></i> Contact </a>
</li>
</ul>
</li>
<li class="dropdown dropdown-fw dropdown-fw-disabled">
<a href="javascript:;" class="text-uppercase">
<i class="icon-home"></i> Upload </a>
<ul class="dropdown-menu dropdown-menu-fw">
<li>
<a href="{{ url('photo/create') }}">
<i class="icon-bar-chart"></i> Upload Photo </a>
</li>
<li>
<a href="{{ url('photo') }}">
<i class="icon-bulb"></i> View Photo List </a>
</li>
</ul>
</li>
</ul>
</div>
Then replace the header code in your other blade files with:
#include('partials.header')
NB
If you change the location of the header you will need to update the #include's as well e.g.
e.g. resources/views/layouts/main/header.blade.php would be #include('layouts.main.header')
Hope this helps!
Im using laravel to develop a website. There is a side panel for navigating between the different pages of the website. Some pages are grouped together in an accordion (or dropdown). When I click on one of the options within the accordion it navigates to the page but the accordion closes immediately. How do I keep it open??
here is how the accordion is
<li class="treeview">
<a href="#">
<span>Group of pages</span>
<ul class="treeview-menu"
style="display: none;">
<li>
Page 1
</li>
<li>
Page 2
</li>
</ul>
</li>
Any help is appreciated.
ps. It might be worth it to add that I am using AdminLTE as a template.
Need to add Active class in li
<li class="treeview {{ ((Request::is('a-page')) || (Request::is('a-second-page')) ? 'active' : '') }}">
<a href="#">
<span>Group of pages</span>
<ul class="treeview-menu">
<li class="{{ ((Request::is('a-page')) ? 'active' : '') }}">
Page 1
</li>
<li class="{{ ((Request::is('a-second-page')) ? 'active' : '') }}">
Page 2
</li>
</ul>
</li>
OR
<li class="treeview {{ ((Route::currentRouteName() == 'a-route') || (Route::currentRouteName() == 'a-second-route') ? 'active' : '') }}">
<a href="#">
<span>Group of pages</span>
<ul class="treeview-menu">
<li class="{{ ((Route::currentRouteName() == 'a-route') ? 'active' : '') }}">
Page 1
</li>
<li class="{{ ((Route::currentRouteName() == 'a-second-route') ? 'active' : '') }}">
Page 2
</li>
</ul>
</li>
I have the following in my header:
<div id="wrapper" class="homepage itemlist com_k2 category">
<div id="rt-header">
<div class="rt-container">
<div class="rt-grid-3 rt-alpha">
<div class="rt-block"></div>
</div>
<div class="rt-grid-9 rt-omega">
<div class="rt-fusionmenu">
<div class="nopill">
<div class="rt-menubar">
<ul class="menutop level1 ">
<li class="parent root f-main-parent firstItem f-mainparent-item"> <a class="daddy item bullet" href="www.domain.com"> <span> الرئيسية </span> </a> </li>
<li class="active root"> <a class="orphan item bullet" href="load_kitchen_list"> <span> المطبخ </span> </a> </li>
<li class="root"> <a class="orphan item bullet" href=""> <span style="font-size:medium;"> الملف الشخصي </span> </a> </li>
<li class="root"> <a class="orphan item bullet" href="main/contactus"> <span> للإتصال بنا</span> </a> </li>
</ul>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
Now if you investigate the elements, you will find that there is an active flag in one of them. This makes sure that the currently seen page is highlighted in navigation bar. I want to know how can I change this based on view loaded? this is how I load views:
$this->load->view('layout/header');
$this->load->view('home');
$this->load->view('layout/footer');
So in this case the main navigation tab should be active.
Regards,
I completed something similar recently. Probably not the best way, but it works for me.
In your controller add this before your views
$data['contact'] = 'active';
Then pass the $data variable from the controller to the view
$this->load->view('header', $data);
And in your view add this to the list item
<li class="contact <?php if(isset($contact)) {echo $contact; }">
from the controller:
set names for your menus and put the loaded menu or page name in a variable as the following:
$data['active'] = 'menu1';
$this->load->view('layout/header',$data);
$this->load->view('home');
$this->load->view('layout/footer');
in the view:
<div id="wrapper" class="homepage itemlist com_k2 category">
<div id="rt-header">
<div class="rt-container">
<div class="rt-grid-3 rt-alpha">
<div class="rt-block"></div>
</div>
<div class="rt-grid-9 rt-omega">
<div class="rt-fusionmenu">
<div class="nopill">
<div class="rt-menubar">
<ul class="menutop level1 ">
<li class="<?php if(isset($active) && $active == 'menu1') echo 'active'; ?> parent root f-main-parent firstItem f-mainparent-item"> <a class="daddy item bullet" href="www.domain.com"> <span> الرئيسية </span> </a> </li>
<li class="<?php if(isset($active) && $active == 'menu2') echo 'active'; ?> root"> <a class="orphan item bullet" href="load_kitchen_list"> <span> المطبخ </span> </a> </li>
<li class="<?php if(isset($active) && $active == 'menu3') echo 'active'; ?> root"> <a class="orphan item bullet" href=""> <span style="font-size:medium;"> الملف الشخصي </span> </a> </li>
<li class="<?php if(isset($active) && $active == 'menu4') echo 'active'; ?> root"> <a class="orphan item bullet" href="main/contactus"> <span> للإتصال بنا</span> </a> </li>
</ul>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
Give each menu item a distinct class or id then do it via jQuery or js
<li class="kitchen root"> <a class="orphan item bullet" href="load_kitchen_list"> <span> المطبخ </span> </a> </li>
<li class="anotherclass root"> <a class="orphan item bullet" href=""> <span style="font-size:medium;"> الملف الشخصي </span> </a> </li>
<li class="contact root"> <a class="orphan item bullet" href="main/contactus"> <span> للإتصال بنا</span> </a> </li>
Then for example in the contact page you'd simply do this via jQuery:
$(document).ready(function(){
$(".contact").addClass("active");
});
<div class="article_details">
<h1>Product name is</h1>
<div class="left">
<ul class="article_list">
<li>
<strong>art. nr.:</strong>
VS7896
</li>
<li>
<b>Shipping time</b>
: 1-3 Days
</li>
</ul>
</div>
I used //DIV[#class='left']/UL[1]/LI[1] but the result is "art. nr.: VS7896".
Please help me with the correct XPath to select just "VS7896".
To select the text after <strong>, use
//strong/following-sibling::text()[1]