This is my code. It's just a basic cshtml page (not MVC) that I'm editing in a text editor. Visual Studio doesn't help much, it seems to suffer from the same issues as the compiler.
The code is printing a list of steps in a "plan" into a table, retrieved from a db query. There may be multiple plans, and each time there's a new one I want to display its name in a panel followed by its steps in a table. This means closing the current table and starting a new one.
The compiler doesn't seem to be able to handle the closing tags when they're "out of place". I've tried with and without Html.Raw() and the results are similar. Is there a technique that will work and allow this to compile?
#{
var db = Database.Open("CADDatabase");
var count=0;
var num="0";
var image="blank";
var APName="blank";
// Attached action plan for incident
var APIncidentQuery=#"select action_plan_name, action_plan_item_types.item_type_eng, pre_mobilisation_flag, instruction_text, isnull(action_plan_active.instruction_information,' ') as instruction_information, item_status_eng
from action_plan, action_plan_active, action_plan_item_types, action_plan_status
where action_plan_item_types.item_type=action_plan_active.item_type
and action_plan_active.item_status=action_plan_status.item_status
and action_plan.action_plan_id=action_plan_active.action_plan_id
and action_plan_active.eid=(select min(eid) from agency_event where num_1=#0) order by action_plan_active.action_plan_id, active_item_id";
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="theme.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Process Action Plan</title>
</head>
<body>
<!-- Panel header with search box -->
<div class="container-fluid ">
<div class="row no-gutters">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<form method="get" class="col-xs-3">
<div class="input-group">
<input class="form-control" type="text" placeholder="Event id" name="EventId" size="12">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Search</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Header row -->
<div class="row no-gutters">
#foreach(var row in db.Query(APIncidentQuery,Request.QueryString["EventId"])){
image="Images/ActionPlans/" + #row.item_type_eng + ".png";
// New plan
if (row.action_plan_name != APName) {
// Close off previous table if there is one
if (APName != "blank") {
Html.Raw("</tbody></table></div></div>");
}
<!-- Start new table -->
<div class="col-xs-12">
<div class="panel panel-warning">
<div class="panel-heading">
<div class="plan-header">
<img src="http://swi-hsiv-ps03/UKApps/Images/checklist-warning.png" height="32">
<h3 class="panel-title">Action plan items (#row.action_plan_name)</h3>
</div>
</div>
<!-- Table of results -->
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>#</th>
<th>Type</th>
<th>Pre-dispatch</th>
<th>Instruction</th>
<th>Additional Info</th>
</tr>
</thead>
<tbody>
<!-- store plan name for next iteration -->
#{
APName=row.action_plan_name;
}
<!-- Populate new table -->
}
<!-- List Action Plan items -->
<tr>
<td>#row.item_number</td>
<td><img src="#image" height="30" title="#row.item_type_eng"></td>
#if (row.pre_mobilisation_flag == "Y") {
<td><img src="images/ActionPlans/done-red.png" title="Y" height="30"></td>
} else {
<td><img src="images/ActionPlans/delete-grey.png" title="N" height="30"></td>
}
<td>#row.instruction_text</td>
#if (row.instruction_information.Length > 4 && row.instruction_information.Substring(0,5) == "http:") {
<td><a href=#row.instruction_information>Additional information</a></td>
} else {
<td>#row.instruction_information</td>
}
</tr>
}
#{
Html.Raw("</tbody></table></div></div>");
}
</div>
</div>
</body>
</html>
Fixed by rewriting as 2 queries, one to get the list of plans, the other to list the items within each. Then the tables are fully contained within the foreach loops.
Related
One of the web pages is showing products using databind:foreach
Here is the piece of code
<div class="product-list">
<ul data-bind="foreach: products">
<li>
<div class="product-summary">
<div class="photo">
<a data-bind="attr:{href: Link}">
<img data-bind="attr:{src: SummaryImageUrl, title: DisplayName}" alt="product image" />
</a>
</div>
<div class="product-info">
<h4 class="product-title" data-bind="attr:{title: DisplayName}">
<a data-bind="attr:{href: Link}, text: DisplayName"></a>
</h4>
<!-- ko if: Brand-->
<div data-bind="html: Brand" class="product-brand"></div>
<!-- /ko-->
<!-- ko ifnot: Brand-->
<div class="product-brand"> </div>
<!-- /ko -->
I want to show a message if there is no product.Hence, added a line as below:
<div data-bind="visible:products().length==0">
No product(s) found.
</div>
<div class="product-list">
<ul data-bind="foreach: products">
<li>
Now when page is loading, it shows No products found and then hides it and renders whole products
Could you please help?
The problem is when the data for the products is loaded compared to when it gets rendered on to the screen. I imagine what is happening is that there is a process to retrieve the products from the server, while that is happening the screen is rendered and bound to the view model, resulting in the No Products Found being displayed. then at some unspecified time later the products get loaded and the screen gets updated with the new data. I think what you probably need is a flag to indicate when a search is being performed, and when its finished. this will allow you to show and hide the rendering of the results when the results are known.
<div data-bind="visible: showResults">
<div data-bind="visible:products().length==0">
No product(s) found.
</div>
<div class="product-list">
<ul data-bind="foreach: products">
<li></li>
</ul>
</div>
</div>
I would created an observable flag to notify if data is loaded and then wrap your html in ko virtual binding as shown in following code snippet.
function viewModel() {
var self = this;
self.products = ko.observableArray([]);
self.isDataLoaded = ko.observable(false);
self.loadData = function(){
setTimeout(function(){
self.products.push({name:"A"});
self.products.push({name:"B"});
self.products.push({name:"C"});
self.products.push({name:"D"});
self.isDataLoaded(true);
}, 2000);
}
}
var vm = new viewModel();
vm.loadData();
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--ko if:isDataLoaded-->
<div class="product-list">
<ul data-bind="foreach: products">
<li data-bind="text:name"></li>
</ul>
</div>
<div data-bind="visible:products().length==0">
No product(s) found.
</div>
<!-- /ko -->
I'm trying to render the rows of a table where each row is my custom component <todo-list>, but the resulting rows get rendered outside of my table. Why is this?
Here's a screenshot of the DOM tree which shows what is happening:
My view:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
<div id="appTest">
<div>#{{error}}</div>
<table class="table-responsive">
<todo-list
v-for="todo in todos"
v-bind:todo-obj="todo"
v-bind:key="todo.id"
:todo-obj.sync="todo"
v-on:usun="deleteTod"
></todo-list>
</table>
<div v-if="isLogged" id="todoText">
<textarea v-model="todoText" cols="53" rows="5"></textarea>
<div id="addButton">
<button v-on:click="addTodo" class="btn btn-success" >Add to do</button>
</div>
</div>
<div v-else>
You have to be
Login
to add new todos
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And here is my component:
Vue.component('todoList', {
props: ['todoObj'],
template: '<tr>' +
'<td><div class="round"><input id="todoObj.id" type="checkbox" v-on:click="toggle" v-model="todoObj.done" /><label for="todoObj.id"></label></div></td>' +
'<td class="textTodo">{{todoObj.description}}</td>' +
'<td><button v-on:click="deleteTodo" class="btn-xs btn-danger">delete</button></td>' +
'</tr>',
Also my checkboxes are not working. They look fine, but they don't toggle when I click them, they only react when checking the first row from the table. Why?
Your table might not be rendering correctly due to DOM Template Parsing Caveats. Try this instead:
<table class="table-responsive">
<tr
v-for="todo in todos"
is="todo-list"
:todo-obj="todo"
:key="todo.id"
#usun="deleteTod"
></tr>
</table>
Also you had the todoObj bound twice (I removed the .sync one in the above code).
As for the checkbox issue, I'm not completely sure on what the problem is, especially since you have not provided the code for the component (a fiddle would be great). Why do you have #toggle and v-model? Couldn't you just use v-model? You also forgot to v-bind to the checkbox's id attribute: id="todoObj.id" (is that necessary anyway?).
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)
I am using Datatables.js for a table in my website. I haven't changed the original CSS from datatables, but only in Mozilla, the CSS is broken for a reason.
Here is my HTML code:
<div class="full-container">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2">
<br><br>
<center>
adsense code
</center>
</div>
<div class="col-sm-9 col-md-9 col-lg-9">
<table id="myTable" class="table table-bordered table-striped tablesorter">
table content
</table>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#myTable').dataTable();
} );
</script>
Here is how it supposed to be in Chrome and Internet Explorer
And here is how it is in Mozilla
I had the same problem. To resolve it, you must add a new class before your table with the sDom option :
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#myTable').dataTable({
"sDom": 'fi<"clear">tp'
});
} );
</script>
The syntax of sDom is available here. Adapt it according to your needs. Here we add a new div with the clear class before the table.
Then add this CSS code to fix the bug :
.clear {
clear: both;
}
I am try to when click on Form submit button it navigates to new page with same window dynamically but it is not loading the details but it navigates to that page.I am sending my code also please help me.
Html page
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
{{> header}}
{{> body}}
{{> footer}}
</div>
<div class="row-fluid">
{{render-Router}}
</div>
</body>
<template name="header">
<header>
<div class="header">
<img src="./logo.png" style="height:100px;width:200px;"/>
</div>
</header>
</template>
<template name="body">
<div class="bgbody">
<div align="center">
<form id="login-form" action="/admindetails">
<table>
<p class="admin">Admin Login</p>
<tr>
<td><p for="username">Admin Name</p></td>
<td><input type="text" id="username" name="username" placeholder="UserName"></td>
</tr>
<tr>
<td><p for="password">Password</p></td>
<td><input type="password" id="pwd" name="password" placeholder="password"></td>
</tr>
<td></td><td><input class="btn btn-success" type="submit" value="Log In"></td>
<td><input class="btn btn-capsule" type="button" value="New User"></td>
</table>
</form>
</div>
</div>
</template>
<template name="footer">
<div class="footer">
<div style="padding:20px;">
<div class="footerlinks"><p>AboutUs</p></div>
<div class="footerlinks">|</div>
<div class="footerlinks"><p>ContactUs</p></div>
<div class="copyright"><p>Copyright#Healt_Care</p></div>
</div>
</div>
</template>
Client code:
if (Meteor.isClient) {
Meteor.Router.add({
'/admindetails':'admindetails'
})
Template.body.events
({
'submit #login-form' : function (e,t)
{
/* template data, if any, is available in 'this'*/
if (typeof console !== 'undefined')
console.log("You pressed the button");
e.preventDefault();
/*retrieve the input field values*/
var email = t.find('#username').value
, password = t.find('#pwd').value;
console.log(email);
Meteor.loginWithPassword(email, password, function (err)
{
if (err)
{
console.log(err);
alert(err.reason);
Session.set("loginError", true);
}
else
{
console.log(" Login Success ");
Meteor.Router.to("/admindetails");
}
});
}
});
}
You manage the submit event yourself, so there's no need to set up the action parameter of the form. Setting that parameter causes browser to load target page on submit. Simply remove the parameter and things should work as intended.