I want to get the info into an li element from SQL Server database in MVC 5 with ADO.NET entity data model.
This is my generated model.edmx
public partial class Entities : DbContext
{
public Entities()
: base("name=Entities")
{
}
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
throw new UnintentionalCodeFirstException();
}
public virtual DbSet<C__MigrationHistory> C__MigrationHistory { get; set; }
public virtual DbSet<PackageType> PackageTypes { get; set; }
}
I have a table named PackageTypes that has 3 columns Id, Name, and PackagesInDeal.
<li class="pricing-title">
#Html.DisplayFor(model => #Model.Name) #*Free*#
</li>
In this li element I need to get the Name values from the table.
I'm not very familiar on how can I add two functionalities to a controller
public ActionResult Create( int? id ) {
ViewBag.UserId = new SelectList( db.AspNetUsers, "Id", "Email" );
ViewBag.PackageTypeId = new SelectList( db.PackageTypes, "Id", "Name" );
ViewBag.SelectedPackage = id;
return View();
}
This is the code contained by the controller, that displays 1,2, 3 or 4 deals depending on the id parameter.
The view has the following code:
#if ( ( ViewBag.SelectedPackage ?? 0 ) <= 1 ) {
<div class="col-lg-3 wow zoomIn" style="padding: 0;">
<ul class="pricing-plan list-unstyled selected" style="margin: 20px;">
#Html.DisplayFor(model => #Model.Name) #Free#
<li class="pricing-desc">
Basic package
<br />
</li>
<li class="pricing-price">
<span>00</span> / month
</li>
<li> <i class="fa fa-trophy"></i> aa </li>
<li> <i class="fa fa-globe"></i> bb </li>
<li> <i class="fa fa-suitcase"></i> cc</li>
<li class="selected"> <i class="fa fa-bell"></i>dd </li>
<li> <i class="fa fa-database"></i> ee </li>
<li> <i class="fa fa-envelope"></i> ff </li>
<li>
<div style="text-align: right; height: 110px;">
</div>
</li>
<li style="padding-top: 30px;">
<a class="btn btn-primary btn-xs" href="#Url.Action( "Create", "Deals", new { deal=Request.QueryString["deal"] } )" rel="1">Buy</a>
</li>
</ul>
</div>
}
#if ( ( ViewBag.SelectedPackage ?? 0 ) <= 2 ) {
<div class="col-lg-3 wow zoomIn" style="padding: 0;">
<ul class="pricing-plan list-unstyled selected" style="margin: 20px;">
<li class="pricing-title">
Free + Domain
</li>
<li class="pricing-desc">
Basic package
</li>
<li class="pricing-price">
<span>10 </span> / month
</li>
<li> <i class="fa fa-trophy"></i> aa</li>
<li> <i class="fa fa-globe"></i> bb </li>
<li> <i class="fa fa-suitcase"></i> cc</li>
<li class="selected"> <i class="fa fa-bell"></i> dd</li>
<li> <i class="fa fa-database"></i> ee </li>
<li> <i class="fa fa-envelope"></i> ff </li>
<li>
#Html.Partial( "FreeDomain" )
</li>
<li style="padding-top: 30px;">
<a class="btn btn-primary btn-xs" href="#Url.Action( "Create", "Deals", new { deal=Request.QueryString["deal"] } )" rel="1">buy</a>
</li>
</ul>
</div>
}
So how can I retrieve the "Free" , "Free + Domain" and rest of the information in the li from the sql server database tables??
You can always use MVC scaffolding to generate controller / views for a given data model entity.
http://www.asp.net/visual-studio/overview/2013/aspnet-scaffolding-overview
So after long research on the web I finally obtained what I've wanted. So the controller looks like this
public ActionResult Create(int? id)
{
List<PackageType> packageTypes = db.PackageTypes.ToList();
ViewBag.PackageTypesName = packageTypes;
ViewBag.SelectedPackage = id;
return View();
}
And the view
#if ((ViewBag.SelectedPackage ?? 0) <= 1)
{
<div class="col-lg-3 wow zoomIn" style="padding: 0;">
<ul class="pricing-plan list-unstyled selected" style="margin: 20px;">
<li class="pricing-title">
**#ViewBag.PackageTypesName[0].Name**
</li>
<li class="pricing-desc">
Basic package
<br />
</li>
<li class="pricing-price">
<span>00</span> / month
</li>
<li> <i class="fa fa-trophy"></i> aa </li>
<li> <i class="fa fa-globe"></i> bb </li>
<li> <i class="fa fa-suitcase"></i> cc</li>
<li class="selected"> <i class="fa fa-bell"></i>dd </li>
<li> <i class="fa fa-database"></i> ee </li>
<li> <i class="fa fa-envelope"></i> ff </li>
<li>
<div style="text-align: right; height: 110px;">
</div>
</li>
<li style="padding-top: 30px;">
<a class="btn btn-primary btn-xs" href="#Url.Action("Create", "Deals", new { deal = Request.QueryString["deal"] })" rel="1">Buy</a>
</li>
</ul>
</div>
}
Related
<div class="wrapper" id="body" ng-app="masterview" ng-controller="masterctrl" data-ng-init="getmenus()">
<header id="header">
<div class="header-width row">
<div class="col-xl-9">
<div class="logo float-xs-left">
<a href="#">
<img src="~/img/logo_accord.png" alt="Ace Report" />
</a>
</div>
</div>
<div class="col-xl-3 header-right">
<div class="header-inner-right">
<div class="float-default chat">
<div class="right-icon">
<a href="#">
<i class="fa fa-envelope-o"></i>
</a>
</div>
</div>
<div class="float-default chat">
<div class="right-icon">
<a href="#">
<i class="fa fa-comments-o"></i>
</a>
</div>
</div>
<div class="user-dropdown">
<div class="btn-group">
<a href="index.html#" class="user-header dropdown-toggle" data-toggle="dropdown"
data-animation="slideOutUp" aria-haspopup="true"
aria-expanded="false">
<img src="~/assets/images/user.jpg" alt="Profile image" />
</a>
<div class="dropdown-menu user drop-profile dropdown-card dropdown-card-profile animated flipInY">
#*
<header class="card-header d-flex">
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-user"></i>
</a>
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-cog"></i>
</a>
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-power-off"></i>
</a>
</header>*#
<ul class="list-unstyled card-body">
#*
<li>
<a href="index.html#">
<span>
<span class="align-middle">Manage Accounts</span>
</span>
</a>
</li>*#
<li>
<a href="index.html#">
<span>
<span class="align-middle">Change Password</span>
</span>
</a>
</li>
#*
<li>
<a href="index.html#">
<span>
<span class="align-middle">Check Inbox</span>
</span>
</a>
</li>*#
<li>
<a href="#Url.Action("Logout", "Admin")">
<span>
<span class="align-middle">Sign Out</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--top menu bar-->
<div id="header-icon" class="" >
<div class="header-width">
<div class="col-xl-12">
<div class="menucontainer">
<div class="overlapblackbg"></div>
<a id="navtoggle" class="animated-arrow">
<span></span>
</a>
<nav id="nav" class="topmenu" role="navigation">
<div class="sidebar-search">
<div class="logo float-xs-left">
</div>
<a href="javascript:void(0)">
<i class="search-close icon_search"></i>
</a>
</div>
<!--left menu-->
<ul id="dvMenuInner" class="nav navbar-nav">
<li ng-repeat="parent in menu" class="dropdown">
<a href="/{{parent.url}}/{{parent.actionname}}" ng-show="!parent.children">
<span class="fa fa-tachometer header-icon" aria-hidden="true"></span>{{parent.menuname}}
</a>
<a href="/{{parent.url}}/{{parent.actionname}}" ng-show="parent.children" class="dropdown-toggle" data-toggle="dropdown">
<span class="fa fa-tachometer header-icon" aria-hidden="true"></span>{{parent.menuname}}
</a>
<ul class="dropdown-menu" ng-show="parent.children">
<li ng-repeat="child in parent.children" ng-show="!child.childrencc">
{{child.menuname}}
</li>
<li class="dropdown-submenu" ng-repeat="child in parent.children" ng-show="child.childrencc">
{{child.menuname}}
{{child.menuname}}
<ul class="dropdown-menu" ng-show="child.childrencc">
<li ng-repeat="children in child.childrencc">
{{children.menuname}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER -->
<!-- START CONTENT -->
<section id="main" class="container-fluid">
<!-- START RIGHT CONTENT -->
#*
<div class="row">
<!-- START RIGHT CONTENT -->
<section id="content-wrapper" class="form-elements">
<!-- START PAGE TITLE -->
<div class="site-content-title">
<h2 class="float-xs-left content-title-main">Client Dashboard</h2>
<!-- START BREADCRUMB -->
<ol class="breadcrumb float-xs-right">
<li class="breadcrumb-item">
<span class="fa fa-home" aria-hidden="true"></span>
Home
</li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
<!-- END BREADCRUMB -->
</div>
<!-- END PAGE TITLE -->
</section>
</div>*#
#*
<div class="contain-inner"></div>*#
<ng-view> #RenderBody()</ng-view>
</section>
#*
</div>
I want menus to be loaded at the start of the application and I have multiple pages in MVC, so the problem is getting the error stated that controller not registered. so can you tell me how can I handle ng-app and ng-controller in master page and pages?
I am loading menus as follows:
app.controller('masterctrl', function ($scope, $http, $window) {
$scope.getmenus = function () {
var holding_url = encodeURI(APIURL + "getmenus");
$http.get(holding_url)
.then(function (response) {
$scope.names = response.data.t1;
$scope.menu = [];
$scope.childrenmenu = [];
$scope.count = 0;
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid == 0) {
$scope.menu.push(value);
}
});
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid != 0) {
angular.forEach($scope.menu, function (value2, key2) {
if (value.parentid == value2.menuid) {
if (value2.children == undefined) {
value2.children = [];
value2.showChildren = false;
}
value2.children.push(value);
$scope.childrenmenu.push(value);
}
});
}
});
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid != 0) {
angular.forEach($scope.childrenmenu, function (value3, key3) {
if (value.parentid == value3.menuid) {
if (value3.childrencc == undefined) {
value3.childrencc = [];
value3.showChildren = false;
}
value3.childrencc.push(value);
}
});
}
});
Please see image due to that error data in table is also not loading properly, because master page and pages controller can not work together.
you need to bootstrap them using angular.bootstrap()
first give id to the child div lets say App2
<div class="ibox float-e-margins" ng-app="childview" id="App2">
</div>
angular.bootstrap(document.getElementById("App2"), ['childview']);
this will allow Angular to run subsequent views to run on the dom
Why not this ?
<div class="wrapper" id="body" ng-app="masterview" >
<div ng-controller="masterctrl" data-ng-init="getmenus()">
<!-- rest of your code --->
</div>
</div>
I have the following menu:
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav navbar-right">
<li ng-show="isAuthorized(['4TierWeb-Basic User'])">
<a id="home" class="{{selectedMenuTab === 'home' ? 'activeMenu' : ''}}" uib-tooltip="Home" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen5" ng-click="sortTooltipIsOpen5 = !sortTooltipIsOpen5 && isNavCollapsed = !isNavCollapsed" tooltip-enable="!dropdown.isopen5" role="button" aria-haspopup="true" aria-expanded="false" ui-sref="DashboardTemplate.Dashboard">
<span class="material-icons headerIcon home"></span>
</a>
</li>
<li uib-dropdown is-open="dropdown.isopen">
<a id="applicationdropdown" class="{{selectedMenuTab === 'applications' ? 'activeMenu' : ''}}" uib-tooltip="Applications" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen" ng-click="sortTooltipIsOpen = !sortTooltipIsOpen" tooltip-enable="!dropdown.isopen" role="button" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle>
<span class="material-icons headerIcon laptop"></span>
</a>
<ul uib-dropdown-menu aria-labelledby="applicationdropdown">
<li ng-repeat="item in applicationsMenu">
<a ng-show="item.enabled" ui-sref-active="activeMenu" ui-sref="{{item.route}}">
<span class="material-icons {{item.icon}}" ng-click="isNavCollapsed = !isNavCollapsed" style="margin-right: 2px;"></span>{{item.heading}}
</a>
</li>
</ul>
</li>
<li uib-dropdown is-open="dropdown.isopen3">
<a id="billingsdropdown" class="{{selectedMenuTab === 'billings' ? 'activeMenu' : ''}}" uib-tooltip="Billings" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen3" ng-click="sortTooltipIsOpen3 = !sortTooltipIsOpen3" tooltip-enable="!dropdown.isopen3" role="button" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle>
<span class="material-icons headerIcon monetization_on"></span>
</a>
<ul uib-dropdown-menu aria-labelledby="billingsdropdown">
<li ng-repeat="item in billingsMenu">
<a ng-show="item.enabled" ui-sref-active="activeMenu" ui-sref="{{item.route}}">
<span class="material-icons {{item.icon}}" ng-click="isNavCollapsed = !isNavCollapsed" style="margin-right: 2px;">
</span>{{item.heading}}
</a>
</li>
</ul>
</li>
<li uib-dropdown is-open="dropdown.isopen4">
<a id="settingsdropdown" class="{{selectedMenuTab === 'settings' ? 'activeMenu' : ''}}" uib-tooltip="Settings" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen4" ng-click="sortTooltipIsOpen4 = !sortTooltipIsOpen4" tooltip-enable="!dropdown.isopen4" role="button" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle>
<span class="material-icons headerIcon settings"></span>
</a>
<ul uib-dropdown-menu aria-labelledby="settingsdropdown">
<li ng-repeat="item in settingsMenu">
<a ng-show="item.enabled" ui-sref-active="activeMenu" ui-sref="{{item.route}}">
<span class="material-icons {{item.icon}}" ng-click="isNavCollapsed = !isNavCollapsed" style="margin-right: 2px;"></span>{{item.heading}}
</a>
</li>
</ul>
</li>
</ul>
</div>
At present, when you click a link it closes the dropdown, but not the entire hamburger, how can I close the menu all the way when somebody clicks a link?
I've tried setting the isNavCollapsed several different ways with no effect.
Partial underlying controller code:
$scope.isNavCollapsed = true;
$scope.settingsMenu = [
{
heading: 'Companies',
route: 'AdminTemplate.AdminTab.Company',
icon: 'business'
},
{
heading: 'User Admin',
route: 'AdminTemplate.AdminTab.UserAdministration',
icon: 'assignment_ind'
},
{
heading: 'User Profile',
route: 'AdminTemplate.AdminTab.UserProfile',
icon: 'account_circle'
}
];
Basically I'm feeding
I want to create a menu like this but without using ng-repeat:
<ul class="sidebar-navi">
<li ng-repeat="item in items" ng-click="showChilds(item)">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>{{item.name}}
<ul>
<li ng-show="item.active">
<span>First</span>
</li>
<li ng-show="item.active">
<span>Second</span>
</li>
</ul>
</li>
</ul>
the problem is that I didn't find a way to pass parameter to this function showChilds (the current li) I tried to work with id but it didn't work:
<ul class="sidebar-navi">
<li id="first" ng-click="showChilds(first)">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1
<ul>
<li ng-show="first.active">
<span>First</span>
</li>
<li ng-show="first.active">
<span>Second</span>
</li>
</ul>
</li>
<li id="second" ng-click="showChilds(second)">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2
<ul>
<li ng-show="second.active">
<span>First</span>
</li>
<li ng-show="second.active">
<span>Second</span>
</li>
</ul>
</li>
</ul>
and my controller will contain only this function
$scope.showChilds = function (item) {
item.active = !item.active
}
I don't want to use $scope.items anymore
I have updated your HTML. If you are not using ng-repeat then you can use ng-init to initialize one variable and toggle that variable on ng-click to show/hide sub menus. Your updated sample is here
<ul class="sidebar-navi">
<li id="first" ng-click="first = !first" ng-init="first = false">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1
<ul>
<li ng-show="first">
<span>First</span>
</li>
<li ng-show="first">
<span>Second</span>
</li>
</ul>
</li>
<li id="second" ng-click="second = !second" ng-init="second = false">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2
<ul>
<li ng-show="second">
<span>First</span>
</li>
<li ng-show="second">
<span>Second</span>
</li>
</ul>
</li>
</ul>
This might be a simple question to some of you.
<div class="component"
ng-class="{'small': small, 'medium': medium, 'large': large, 'xlarge': xlarge}"
ng-if="component.title == 'Heading'"
ng-init="editing = false; small = false; medium = false; large = false; xlarge = false">
<input class="heading" ng-blur="editing = false" ng-hide="!editing" type="text" placeholder="Heading" ng-model="component.element" />
<h2 ng-click="editing = true" ng-hide="editing">{{component.element}}</h2>
<div ng-hide="!editing" class="textEditor">
<ul>
<li>
<a href="" ng-click="small = true">
<span class="icon-size small"></span>
</a>
</li>
<li>
<a href="" ng-click="medium = true">
<span class="icon-size medium"></span>
</a>
</li>
<li>
<a href="" ng-click="large = true">
<span class="icon-size large"></span>
</a>
</li>
<li>
<a href="" ng-click="xlarge = true">
<span class="icon-size xlarge"></span>
</a>
</li>
</ul>
</div>
</div>
I need to add class to .component based on clicked a tag from Unordered list. I need to add class small to .component if first item is clicked, then if another item is clicked I need to remove small class and add respective class from that A tag.
Currently it adds them classes but not removing the ones that were added previously.
Basically I need to create a sort of toggle between them 4 classes
Try:
ng-class="small ? 'small' : medium ? 'medium' : large: 'large : xlarge ? 'xlarge' : ''"
I'd say use separate variable for it customClass
ng-class="customClass"
Then markup
<ul>
<li>
<a href="" ng-click="customClass = 'small'">
<span class="icon-size small"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'medium'">
<span class="icon-size medium"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'large'">
<span class="icon-size large"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'xlarge'">
<span class="icon-size xlarge"></span>
</a>
</li>
</ul>
Can anyone help me figure out why my menu is not displaying on my mobile device.
The collapsible menu is displaying fine in the browser but on a mobile (or narrow browser window), no links are displayed when you click the 3 bars that should display the links.
I am using jhipster so my code is split between multiple files.
All menus are working fine bar the menu options that should appear on a mobile device.
Any help is greatly appreciated
My header.html is as follows
<header class="clearfix">
<i class="fa fa-bars"></i>
<!-- Logo -->
<div class="logo">
<a href="#/">
<span translate="global.title">Cloud Ranger</span>
</a>
</div>
<div class="menu-button" toggle-off-canvas data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="top-nav">
<ul class="nav-right pull-right list-unstyled">
<li class="dropdown langs text-normal" ng-controller="LanguageController">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span translate="global.menu.language">Language</span>
</a>
<ul class="dropdown-menu with-arrow pull-right list-langs" role="menu">
<li data-ng-show="lang !== 'English' ">
English</li>
</ul>
</li>
</ul>
</div>
</header>
My navbar.html is as follows
<div id="nav-wrapper" >
<div ng-switch="isAuthenticated()">
<ul id="nav" role="navigation" ng-controller="NavbarController"
data-collapse-nav data-highlight-active data-slim-scroll>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/login"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.login">Login</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/register"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.register">Register</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="home"> <i class="fa fa-home"> <span
class="icon-bg bg-danger"></span></i> <span class="hidden-tablet"
translate="global.menu.home">Dashboard</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="credential"><i class="fa fa-cloud"><span
class="icon-bg bg-orange"></span></i><span class="hidden-tablet"
translate="global.menu.entities.credential">Credential</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="schedule"><i class="fa fa-calendar"><span
class="icon-bg bg-warning"></span></i><span class="hidden-tablet"
translate="global.menu.entities.schedules">Schedules</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="userTask"><i class="fa fa-tasks"><span
class="icon-bg bg-info"></span></i><span class="hidden-tablet"
translate="global.menu.entities.userTask">Tasks</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="taskExecutionLog"><i class="fa fa-bar-chart-o"><span
class="icon-bg bg-primary"></span></i><span class="hidden-tablet"
translate="global.menu.admin.logs">Logs</span></a></li>
<li>
<a href="#/password"><i class="fa fa-user"><span class="icon-bg bg-danger"></span></i><span
translate="global.menu.account.settings">Account></span></a>
<ul>
<li ui-sref-active="active"><a ui-sref="password"><i class="fa fa-caret-right"></i><span translate="global.menu.account.password">Password</span></a></li>
<li ui-sref-active="active"><a ui-sref="settings"><i class="fa fa-caret-right"></i><span translate="global.menu.account.settings">Settings</span></a></li>
<li ui-sref-active="active"><i class="fa fa-caret-right"></i><span translate="global.menu.account.logout">Logout</span></li>
</ul>
</li>
</ul>
</div>
</div>
Hello Demo have you looked through your CSS file and checked that the collapsible menu is not been disabled for smaller screens through the means of the #media queries, for instance #media (min-width: xxpx) can be used to define different style rules for different media types/devices. Hope this helps.