I'm a little new to both Bootstrap and ASP.Net.
I'm trying to use an very simple example from Bootstrap homesite
where I just throw this into about.cshtml file.
The Bootstrap is version 3.4.1 on the ASP.Net and I'm choosing the 3rd version of the Bootstrap example but I'm not getting any table and just 3 stacked text besides each other. Is it the wrong version or am I not able to see the mistake? What am I doing wrong?
#{
ViewBag.Title = "About";
}
<link href="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.js"></script>
<table id="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
<script>
var $table = $('#table')
$(function () {
var data = [
{
'id': 0,
'name': 'Item 0',
'price': '$0'
},
{
'id': 1,
'name': 'Item 1',
'price': '$1'
},
{
'id': 2,
'name': 'Item 2',
'price': '$2'
},
{
'id': 3,
'name': 'Item 3',
'price': '$3'
},
{
'id': 4,
'name': 'Item 4',
'price': '$4'
},
{
'id': 5,
'name': 'Item 5',
'price': '$5'
}
]
$table.bootstrapTable({ data: data })
})
</script>
My _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Your script tags need to be inside the Scripts section. Otherwise, you're trying to load them before the libraries they depend on.
#{
ViewBag.Title = "About";
}
<table id="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
#section Scripts {
<link href="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.js"></script>
<script>
var $table = $('#table')
$(function () {
var data = [
{
'id': 0,
'name': 'Item 0',
'price': '$0'
},
...
]
$table.bootstrapTable({ data: data })
})
</script>
}
If you check the developer console in your browser with your current page, you'll see errors telling you that jQuery has not been loaded.
Related
I have a table generated from ng-repeat. Each of the row has a checkbox. I want the rows which are checked to change their background color. I was trying it using ng-class but did not help, As soon as I select one checkbox, all the rows get their background changed.I understand what the mistake is, but dont know how to solve it.
This is my table
<table >
<tr>
<th>Select</th>
<th>Job List</th>
<th>Next Firing</th>
</tr>
<tr ng-repeat="x in jobs" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="myclass">
<td style="width: 247px; "><input type="checkbox" ng-model="x.checked" ng-click=countChecked($index)></td>
<td style="width: 247px; ">{{ x.Name }}</td>
<td style="width: 247px; ">{{ x.ID }}</td>
</tr>
</table>
This is my controller
$scope.countChecked = function(index){
var count = 0;
angular.forEach($scope.jobs, function(job){
if (job.checked) {
count++;
$scope.myclass='selected';
}
});
return count;
}
I need the "count" for a different purpose, which is working fine.
This is selected css
.selected{
background-color: #DEB887;
}
You can use the ngClass directive to give it a certain class when a job is selected like so:
<ANY ... ng-class="{ 'selected': x.checked }">
...
</ANY>
Just go through below snippet.
var app = angular.module('MyApp', []);
app.controller('MyController', function($scope, $filter) {
$scope.Customers = [{
CustomerId: 1,
Name: "Prashant Olekar",
Country: "United States",
},
{
CustomerId: 2,
Name: "Hemant K",
Country: "India",
},
{
CustomerId: 3,
Name: "Richard",
Country: "France",
},
{
CustomerId: 4,
Name: "Robert Schidner",
Country: "Russia",
}
];
$scope.checkedCount = function() {
return $scope.Customers.filter(function(orders) {
return orders.select;
}).length;
}
})
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.selected {
background-color: #E0F7FA;
}
</style>
</head>
<body style="margin: 30px;">
<div ng-app="MyApp" ng-controller="MyController">
<div class="container-fluid" style="margin-top: 40px;">
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<span style="font-size: 20px; margin-right: 50px;">Total Checked : {{checkedCount()}}</span>
</div>
</div>
<div class="col-md-12">
<table class="table table-condensed table-bordered text-center">
<thead style="background-color: #607D8B; color: white">
<tr>
<td></td>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody ng-repeat="c in Customers">
<tr ng-class="{ 'selected': c.select }">
<td>
<input id="mainCheck" type="checkbox" ng-change="chkselect_onchange(Customers,c)" ng-model="c.select" /></td>
<td>{{c.CustomerId}}</td>
<td>{{c.Name}}</td>
<td>{{c.Country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
i am watching videos of Scott Allen at pluralsight site, exactly I am talking about this module :
AJAX:
So i created exactly the same example as shown at video, but it is not working, I have no idea why and spent an hour looking for this, here is my code:
At BoundleConfig.cs file:
bundles.Add(new ScriptBundle("~/bundles/otf").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js",
"~/Scripts/jquery.validate*"
));
At Web.config file in appSettings section I added:
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
And here we go:
public ActionResult Review(string searchString)
{
var model = _repository.StartDs;
if (!String.IsNullOrEmpty(searchString))
{
model = model.Where(x => x.FirstName.Contains(searchString));
}
if (Request.IsAjaxRequest())
{
return PartialView("_Review", model);
}
return View(model);
}
Review.cshtml file :
#model IEnumerable<nauka.Models.StartData>
#using(Ajax.BeginForm(
new AjaxOptions
{
HttpMethod = "get",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "girlsList"
}))
{
<input type="search" name="searchString"/>
<input type="submit" value="Znajdź" />
}
#Html.Partial("_Review", Model)
_Review.cshtml file:
#model IEnumerable<nauka.Models.StartData>
<div id="girlsList">
<table style="width:100%">
<tr>
<th>ID</th>
<th>Imię</th>
<th>Nazwisko</th>
<th>Wzrost</th>
<th>Rozmiar</th>
<th>Akcje</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>#item.Id</td>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.Height</td>
<td>#item.TitsSize</td>
<td>#Html.ActionLink("Usuń", "Delete", new { id = item.Id })</td>
</tr>
}
</table>
</div>
I checked it, this fragment at my action method :
if (Request.IsAjaxRequest())
{
return PartialView("_Review", model);
}
never execute, which means that a request isn't recognized as an AjaxRequest, the question is why? I edited this line and pasted
return View("Index");
so it shloud redirect me to my Index site, but it didn't so i proved that AjaxRequest is not executed. I have no idea, what is missing here, I did exactly as at video shown.
Above my _Layout.cshtml file which is autmatically added to every view page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
<li>#Html.ActionLink("Dodaj", "Add", "Home")</li>
<li>#Html.ActionLink("Przegladaj", "Review", "Home")</li>
<li>#Html.ActionLink("Filtruj", "FilterTest", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/otf")
#RenderSection("scripts", required: false)
</body>
</html>
Ough... solved!!
I didn't add a
jquery.unobtrusive-ajax.min.js library to my solution through NuGet package installer.
But when I added this before to BoudleConfig ( path
"~/Scripts/jquery.unobtrusive-ajax.min.js",), why it didn't shout that this library isn't present at my project in Visual ??!
It made many complications..
I have a quite dynamic table where you can hide and show different columns (and also change the order on the columns).
I've tried a few directives and plugins but no one is working well (or as I expect...I am doing wrong) for me.
Can you guys help me to get the table header fixed?
plnkur
<!doctype html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/slate/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng:controller="MainCtrl">
<p>Visible Columns:</p>
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked">{{column.id}}
</div>
<br/>
<table border="1" class="table table-striped table-hover table-responsive table-bordered">
<thead style="font-weight: bold;">
<tr>
<th ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="row[column.id]"></td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.columnsTest = [{
id: 'Value1',
checked: true
}, {
id: 'Value2',
checked: true
}, {
id: 'Value3',
checked: true
}];
$scope.columnToggled = function(column) {
$('[data-col-id="' + column.id + '"]').each(function() {
var element = this;
if ($(element).hasClass('ng-hide')) {
$(element).removeClass('ng-hide');
} else {
$(element).addClass('ng-hide');
}
});
};
$scope.rows = [{
id: 1,
"Value1": 911,
"Value2": 20,
"Value3": 20
}, {
id: 2,
"Value1": 200,
"Value2": 20,
"Value3": 20
}]; //and so on..
});
</script>
</body>
</html>
I am displaying template to show it on monitor.
I have designed layout like this:
But I want to display like this (to save the space):
My code looks like this :
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.businessObject =
[
{
CompanyName: "AA",
StockWaringItemsCount: 0,
Items: [
{
ToolNumber: "200", ItemName: "Item 1 GREY", UOM: "PCs", MinStockLevel: 100, Stock: 5000
}
]
},
{
CompanyName: "BB",
StockWaringItemsCount: 1,
Items: [
{ ToolNumber: "111", ItemName: "Item 1", UOM: "", MinStockLevel: 200, Stock: 150 },
{ ToolNumber: "222", ItemName: "Item 2", UOM: "", MinStockLevel: 300, Stock: 400 },
{ ToolNumber: "333", ItemName: "Item 3", UOM: "", MinStockLevel: 400, Stock: 200 },
]
},
{
CompanyName: "AutoLive",
StockWaringItemsCount: 1000,
Items: [
{ ToolNumber: "111", ItemName: "Item 222", UOM: "", MinStockLevel: 500, Stock: 5000 },
{ ToolNumber: "222", ItemName: "Item 444", UOM: "", MinStockLevel: 600, Stock: 5000 },
{ ToolNumber: "333", ItemName: "Item 252", UOM: "", MinStockLevel: 700, Stock: 5000},
]
}
];
});
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body ng-controller="myCtrl">
<div class="container">
<div ng-repeat="company in businessObject" class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
{{company.CompanyShortID}}
<div class="pull-right">
<div ng-show="company.StockWarnigItemsCount>0">
<span class="badge" style="color: Red">{{company.StockWarnigItemsCount}}</span>
</div>
<span class="glyphicon glyphicon-ok-circle" ng-show="company.StockWarnigItemsCount===0">
</span>
</div>
<div class="clearfix">
</div>
</div>
<div class="panel-body">
<table class="table table-condensed" style="margin-bottom: 0px;">
<thead>
<tr>
<th>
Tool
</th>
<th style="width: 60%">
Item
</th>
<th style="text-align: center">
Min
</th>
<th style="text-align: center">
Stock
</th>
<th style="text-align: center">
Status
</th>
</tr>
</thead>
<tr ng-repeat="item in company.Items">
<td>
{{item.ToolNumber}}
</td>
<td>
{{item.ItemName}}
</td>
<td style="text-align: right">
{{item.MinStockLevel}}
</td>
<td style="text-align: right">
{{item.Stock}}
</td>
<td style="text-align: center">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
i am using angularjs with bootstrap.
Any help would be greatly appreciated.
Add float: left to the CSS of these elements.
However, it will still depend on the order of the elements if they will appear the way you showed it (you might have to change the order - in this case the order is top let, lower left, topright, lower right)
removed ng-repeat.
I have used masonry jquery. appended items dynamically(as mentioned in masonry document). Now it is working perfectly fine!..
I am new to angular. And I am creating a practice project. I am following This tutorial.
Everything is working fine except when I try to put data annotations in my View Model the $resource.save method no more works. Without data annotations, it works fine.
Here is my code:
Home.html:
<!DOCTYPE html>
<html ng-app="movieModule">
<head>
<meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1">
<title>Movie Sample</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/angular-resource.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
<script src="../Scripts/jquery-2.1.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/movie-module.js"></script>
<script src="../Scripts/Category/category-controller.js"></script>
<script type="text/javascript">
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
});
</script>
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="well">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation">Movies</li>
<li role="presentation">Categories</li>
<li role="presentation">Artists</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div ng-view="">
</div>
</div>
</div>
</body>
</html>
Categories.html:
<div>
<a href="create-category.html" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</a>
</div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Categories</div>
<!-- Table -->
<table class="table">
<tr>
<th>ID
</th>
<th>Name
</th>
<th>Description
</th>
</tr>
<tr data-ng-repeat="category in categories">
<td>{{ category.id }}
</td>
<td>{{ category.name }}
</td>
<td>{{ category.description }}
</td>
</tr>
</table>
</div>
create-category.html
<div class="row">
<div class="col-md-12">
<h3>Create Category
</h3>
</div>
</div>
<!--<div class="row">-->
<div class="col-md-12">
<div class="form-group">
<label for="id">Id:</label>
<input type="text" ng-model="category.Id" class="form-control">
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" ng-model="category.Name" class="form-control">
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" ng-model="category.Description" class="form-control">
</div>
<button type="submit" class="btn btn-primary" ng-click="save(category)">Create Category</button>
</div>
movieModule.js
var movieModule = angular.module('movieModule', ['ngRoute', 'ngResource']);
movieModule.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/templates/categories.html', { templateUrl: '/templates/categories.html', controller: 'categoryController' }).
when('/templates/create-category.html', { templateUrl: '/templates/create-category.html', controller: 'categoryController' });
$locationProvider.html5Mode(true);
});
category-controller.js
movieModule.controller('categoryController', function ($scope, $resource, $location) {
$scope.categories = $resource('/api/Category').query();
$scope.save = function (category) {
$scope.errors = [];
$resource('/api/Category').save(category).$promise.then(
function () { $location.url('templates/categories.html'); },
function (response) {
$scope.errors = response.data;
});
}
});
CategoryVM.cs
public class CategoryVM
{
[Required(ErrorMessage="Is is required.")]
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
}
The problem is [Required(ErrorMessage="Is is required.")]. Everything works fine without [Required(ErrorMessage="Is is required.")]but the moment I put [Required(ErrorMessage="Is is required.")] it starts giving error:
Here is the snapshot of the error:
Try not to put the [Required] attribute on the Id.
It should work if you put data annotations on your other properties.
[Required] to a value type (int) will cause a 500 error
(string is not a value type)