I have with log-messages. And if I want to go to the detailpage. The Id returns always as the value "1".
What do I wrong?
The html-page (view).
#model List<LogBerichtModel>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
#using (Html.BeginForm("DetailInfo", "Home", FormMethod.Post))
{
<div class="container">
<div><h4>Logberichten</h4></div>
<div class="row logs" id="app">
<div class="mt-5 d-flex align-content-xl-stretch flex-column p-5">
<table class="table table-striped m-2">
<thead>
<tr class="bg-primary-custom">
<th>#Html.DisplayNameFor(Model => Model[0].Bericht)</th>
<th>#Html.DisplayNameFor(Model => Model[0].Datum)</th>
<th>#Html.DisplayNameFor(Model => Model[0].Systeem)</th>
<td>#Html.DisplayNameFor(Model => Model[0].Klasse)</td>
<td>#Html.DisplayNameFor(Model => Model[0].Methode)</td>
<td>#Html.DisplayNameFor(Model => Model[0].Systeemmelding):</td>
<td></td>
</tr>
</thead>
#for (var item = 0; item < Model.Count; item++)
{
<tbody>
<tr style='background-color:#(item%2 == 0 ? "#FEF2F4":"#FEE2CA" );'>
<td>#Html.DisplayFor(Model => Model[item].Bericht)</td>
<td>#Html.DisplayFor(Model => Model[item].Datum)</td>
<td>#Html.DisplayFor(Model => Model[item].Systeem)</td>
<td>#Html.DisplayFor(Model => Model[item].Klasse)</td>
<td>#Html.DisplayFor(Model => Model[item].Methode)</td>
<td>#Html.DisplayFor(Model => Model[item].Systeemmelding)</td>
<td>
<input id="id" name="id" type="hidden" value="#Model[item].Id" />
<input class="bg-primary-custom" type="submit" value="Submit" title="DetailInfo" />
</td>
</tr>
</tbody>
}
</table>
</div>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
}
</body>
In the controller (id is always 1)
[HttpPost]
public IActionResult DetailInfo(int id)
//public IActionResult DetailInfo(LogBerichtModel logbericht)
{
Your loop is in the form, and your submission action is for the submission of the entire form.
Your form contains all the ids, so when you submit, you submit a collection of ids.
I suggest you use #Html.ActionLink.
Change your View like following.
#model List<LogBerichtModel>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div><h4>Logberichten</h4></div>
<div class="row logs" id="app">
<div class="mt-5 d-flex align-content-xl-stretch flex-column p-5">
<table class="table table-striped m-2">
<thead>
<tr class="bg-primary-custom">
<th>#Html.DisplayNameFor(Model => Model[0].Bericht)</th>
<th>#Html.DisplayNameFor(Model => Model[0].Datum)</th>
<th>#Html.DisplayNameFor(Model => Model[0].Systeem)</th>
<td>#Html.DisplayNameFor(Model => Model[0].Klasse)</td>
<td>#Html.DisplayNameFor(Model => Model[0].Methode)</td>
<td>#Html.DisplayNameFor(Model => Model[0].Systeemmelding):</td>
<td></td>
</tr>
</thead>
#for (var item = 0; item < Model.Count; item++)
{
<tbody>
<tr style='background-color:#(item%2 == 0 ? "#FEF2F4":"#FEE2CA" );'>
<td>#Html.DisplayFor(Model => Model[item].Bericht)</td>
<td>#Html.DisplayFor(Model => Model[item].Datum)</td>
<td>#Html.DisplayFor(Model => Model[item].Systeem)</td>
<td>#Html.DisplayFor(Model => Model[item].Klasse)</td>
<td>#Html.DisplayFor(Model => Model[item].Methode)</td>
<td>#Html.DisplayFor(Model => Model[item].Systeemmelding)</td>
<td>
#Html.ActionLink("DetailInfo", "DetailInfo", "Home", new { id = #Model[item].Id }, null)
</td>
</tr>
</tbody>
}
</table>
</div>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</body>
And change your method to get.
[HttpGet]
public IActionResult DetailInfo(int id)
{
}
Test result:
Related
I am working on one page checkout system in asp.net core I am using a partial view for each the stages of course I no you can just use below, but I want to load the partial view on button click of checkout it will show stage 2 etc and hide stage 1. I no the question may have been ask before but I am using the new asp.net core and was wondering what is the best practise for it.
#Html.Partial("_checkoutStage1.cshtml");
#Html.Partial("_checkoutStage2.cshtml") ;
Which will render a partrial view but what I want to be able to do is click a button to show stage two.
I found a bit of javascript and tried it with this being in my main view
<script type="text/javascript">
$("#loadPartialView").click(function () {
$.get('#Url.Action("LoadStage2", "Basket")', {}, function (response) {
$("#Display").html(response);
});
});
</script>
My Button
<button id="search" class="btn btn-success">Checkout <span class="glyphicon glyphicon-play"></span>
</button>
My Controller which is in my basket controller. Another question I have can you move the partial views to another directory or is ~/views/basket/ _ underscore prefix the correct naming convention for partial views.
public ActionResult LoadStage2(string searchText)
{
return PartialView("~/Views/Basket/_checkoutStage2.cshtml");
}
Head of my layout page
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
</head>
Can someone help me out with this obv we dont want the page to refresh so I need to place it in a div on the button click.
My Index.cshtml based on basket layout
#model List<solitudedccore.models.basket.basketlines>
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_BasketLayout.cshtml";
}
<head>
<script type="text/javascript">
$("#checkout").click(function () {
$.get('#Url.Action("LoadStage2", "Basket")', {}, function (response) {
$("#Display").html(response);
});
});
</script>
</head>
#Html.Partial("_checkoutStage1.cshtml");
<div id="Display"></div>
Full basketlayout
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</environment>
<script>
</script>
</head>
<body>
#RenderBody()
</body>
</html>
Checkout stage 1 includes the button which I want to load stage 2 from it might be my misunderstanding of page cycle coming from 15 years of web forms.
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1">
<table class="table table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th class="text-center">Price</th>
<th class="text-center">Total</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-8 col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
<div class="media-body">
<h4 class="media-heading">Product name</h4>
<h5 class="media-heading"> by Brand name</h5>
<span>Status: </span><span class="text-success"><strong>In Stock</strong></span>
</div>
</div>
</td>
<td class="col-sm-1 col-md-1" style="text-align: center">
<input type="email" class="form-control" id="exampleInputEmail1" value="3">
</td>
<td class="col-sm-1 col-md-1 text-center"><strong>$4.87</strong></td>
<td class="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td>
<td class="col-sm-1 col-md-1">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
</td>
</tr>
<tr>
<td class="col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
<div class="media-body">
<h4 class="media-heading">Product name</h4>
<h5 class="media-heading"> by Brand name</h5>
<span>Status: </span><span class="text-warning"><strong>Leaves warehouse in 2 - 3 weeks</strong></span>
</div>
</div>
</td>
<td class="col-md-1" style="text-align: center">
<input type="email" class="form-control" id="exampleInputEmail1" value="2">
</td>
<td class="col-md-1 text-center"><strong>$4.99</strong></td>
<td class="col-md-1 text-center"><strong>$9.98</strong></td>
<td class="col-md-1">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h5>Subtotal</h5></td>
<td class="text-right"><h5><strong>$24.59</strong></h5></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h5>Estimated shipping</h5></td>
<td class="text-right"><h5><strong>$6.94</strong></h5></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h3>Total</h3></td>
<td class="text-right"><h3><strong>$31.53</strong></h3></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping
</button>
</td>
<td>
<button id="checkout" class="btn btn-success">Checkout <span class="glyphicon glyphicon-play"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="detailsDiv" class="detailsDiv"></div>
At first glance, if you want to show Stage 2 by clicking on the button, your click listener would need to be bound to the $('#search') button. In your code you are binding a click event to $('#loadPartialView'), which you don't show anywhere.
You also need to do a bit of debugging to see exactly where the issue is. You've posted some code, but you don't indicate what exactly is happening with the current code. Does the partial view get returned through the get successfully? Is the click listener firing?
You could put a breakpoint on the line
$("#Display").html(response);
and see if response has any contents. Presumably they should be HTML.
Regarding your second question about naming conventions of partial views. Typically if a partial view is used across controllers, I put it in /Shared. But if it is only used within one controller (seems like your case) putting the partial within the controller folder is fine. Yes, the _ is the proper convention for naming partials.
This code is supposed to output the users that I have created using Identity. It will output the native attributes to identity such as email, but for some reason it will not output the date that the password was last changed. I physically see the attribute in my database and was able to input it using the form no problem, but I cannot get it out using IEnumerable<Microsoft.AspNet.Identity.EntityFramework.IdentityUser>. How do I get around this?
#model IEnumerable<Microsoft.AspNet.Identity.EntityFramework.IdentityUser>
#using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
#{
ViewBag.Title = "Manage Users";
}
#using (Html.BeginForm("ManageUsers", "AdminTools", FormMethod.Get))
{
<div class="col-lg-12 col-md-12 section-padding section-top-padding white-background">
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>Email</th>
<th>Password Change Date</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#Html.DisplayFor(modelItem => item.Email)</td>
<td>#Html.DisplayFor(modelItem => item.passwordLastChanged)</td>
</tr>
}
</tbody>
</table>
<button type="button" class="buttonIcon dark" data-toggle="modal" data-target="#CreateUserModal"><span class="glyphicon glyphicon-plus-sign fa-lg"> </span>New User</button>
</div>
}
<div class="modal fade" id="CreateUserModal" role="dialog">
<div class="modal-dialog">
#Html.Action("Register", "Account")
</div>
</div>
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 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 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)