I am new in ASP.NET MVC. There are 2 tables in my database named "tbl_Project" and "tbl_Note". Each project can have one or more notes, so I keep/save the "ProjectID" variable in the "tbl_Note".
What I want to do: On the page where the project list is located, I want to show the total number of notes for each project. I tried a few things but I've fail.
This is my projects list page:
#if(Model.Any())
{
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
<th>Total Note</th>
<th>Project Name</th>
<th>Contract Start Date</th>
<th>Contract End Date</th>
</tr>
</thead>
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
<!-- Total number of notes will come here -->
</td>
<td>
<p>#item.ProjectName</p>
</td>
<td>
#item.ContractStartDate.Value.ToString("dd.MM.yyyy");
</td>
<td>
#item.ContractEndDate.Value.ToString("dd.MM.yyyy");
</td>
</tr>
</tbody>
}
</table>
}
else
{
<p>Project is not available!</p>
}
I've try something like this but it's not working:
#if(item.tbl_Note != null)
{
if(item.tbl_Note.ProjectID == Model.ProjectID)
{
#Model.Sum(b => b.tbl_Note.ProjectID.Count)
}
}
This line gives an error: item.tbl_Note.ProjectID and the error is: 'ICollection' does not contain a definition for 'ProjectID and no extension method 'ProjectID' accepting a first argument of type 'ICollection' could be found.
How can I calculate the total number of notes? And if there is any other code block you want to insert, please tell me.
According to the error, item.tbl_Note is of type ICollection<T> and you are looking for a ProjectID property in it.
Change it to:
#if(item.tbl_Note != null)
{
#item.tbl_Note.Count
}
Related
The person I'm designing this app for requested that she be able to make a email list of people with birthdays within the next 7 days. One of the fields in the collection is Bdate in the format 'YYYY-MM-DD'. I decided to make a registerHelper with a simple algorithm that determines if the birthdate is one that fit the request:
Template.registerHelper('calculateBirthday', function(bdate) {
var birthDate = new Date(bdate);
var current = new Date();
var diff = current - birthDate; // Difference in milliseconds
var sevenDayDiff = Math.ceil(diff/31557600000) - (diff/31557600000);
if (sevenDayDiff <= 0.01995183087435)
return date;
else
return false;
});
The template would have a table that lists the birthdates that are the ones to get for the email list:
<table class="bordered">
<thead>
<tr>
<th>Name</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
{{#each QueryBirthday}}
<tr>
<tr>{{FullName}}</tr>
<td>{{calculateBirthday Bdate}}</td>
</tr>
{{/each}}
</tbody>
</table>
The problem with this is that it prints all the names with mostly blank birthdates. The algorithm works fine, but how to tell Meteor to only include those names and birthdates that 'should' be on the list?
The quickest way to hide unwanted items is
<table class="bordered">
<thead>
<tr>
<th>Name</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
{{#each QueryBirthday}}
{{#if calculateBirthday Bdate}}
<tr>
<td>{{FullName}}</td>
<td>{{calculateBirthday Bdate}}</td>
</tr>
{{/if}}
{{/each}}
</tbody>
</table>
I don't know how your application works, but like other people who commented on your question, I would filter and send only the required results from server to client.
Is it possible in AngularJS to change the style of row when the available stocks is equals to 10? or is there any way to do this?.. how to do that?
Here's my code..
<table id='table12'>
<thead id='top'>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
<th>Stock In</th>
<th>Available Stocks</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr id="clickrow" ng-repeat="inventory in data | filter:searchFilter">
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.product_id}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.product_name}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.price}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.stock_in}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.available_stocks}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.description}}</td>
</tr>
</tbody>
</table>
You can do it with ng-class by passing an object with a test against inventory.price value:
<tr id="clickrow" ng-repeat="inventory in data | filter:searchFilter" ng-class="{'red' : inventory.price <= 10}">
...
</tr>
you can change style of row with anulgarJS via html markup and via js code:
markup -
1.1. ng-style: <div data-ng-style="{background: price > 50 ? 'red' : 'green'}"></div>
1.2. ng-class: <div data-ng-class="{'some-class-name': price > 50, 'other-class-name': price <= 50}></div>
js code -
2.1. directive link function:
link: function (scope, element, attrs, ctrl){
element.find('tr').css(...); // like as jquery...
}
2.2. controller:
angular.module('myModule').controller('myCtrl', function($element, $scope){ $element.find('tr').css(...); // like as jquery} })
<tr ng-repeat="task in todos"
ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
'active': task.status == 'Started', 'danger': task.status == 'Pending' } "></tr>
You can use above syntax to highlight table rows
I have a table which I have applied sorting to but to complete this task I would like the classes to change to show carets going up or down based on the sorting.
As you can see I have used the standard SortableMixin within Ember to get the sorting functionality but I'm having trouble changing the class of the individual element which has been clicked.
App.CampaignsController = Ember.ArrayController.extend({
sortProperties: ["id"],
sortAscending: true,
actions: {
sortBy: function(property){
if (this.get("sortProperties")[0] === property){
this.toggleProperty("sortAscending");
} else {
this.set("sortProperties", [property]);
this.set("sortAscending", true)
}
}
}
});
The table I'm I've applied the actions to is below:
<table class="table table-striped table-hover">
<thead>
<tr>
<th {{action "sortBy" "name"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Name</th>
<th {{action "sortBy" "campaign_code"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Code</th>
</tr>
</thead>
<tbody>
<td>{{name}}</td>
<td>{{campaign_code}}</td>
</tbody>
</table>
I'm using the sortAscending boolean to dictate what CSS class will appear. My problem is if I click the first heading, the classes on the second heading also change.
How do I get the CSS to change only on the heading that I have clicked?
Your <th> now has state (whether it's sorted, and whether it's ascending or descending), so you should wrap it up in a component. Something like this
<table>
<thead>
<tr>
{{#sortable-th property='name' action='sortBy'}}
Campaign Name
{{/#sortable-th}}
</tr>
</thead>
</table>
The component's template
// templates/components/sortable-th.js
<th>
<i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>
{{yield}}
</th>
and code
// components/sortable-th.js
export default Ember.Component.extend({
sortAscending: true,
click: function() {
this.toggleProperty('sortAscending');
this.sendAction('action', this.get('property'), this.get('sortAscending'));
}
}
That's just a rough outline, try the implementation yourself. But that's how I would start thinking about it.
i am trying to develop a web application using razor view engine. It is an vacation request management system where users log onto the web site and submit vacation requests through a web form. All requests are stored in a database table called "LeaveRequests". At the moment i am trying to alter a page so when a user is logged in all the vacation requests they made are displayed on the web page in a table view. the code shown below works fine to display 1 request made by a user but i need to alter it to display all requests made by the user. i have tried using a foreach statement but keep getting errors whatever i try , can anyone point my in the right direction and tell me how i need to alter my code to achieve what i want ?
var db = Database.Open("Annual Leave System");
var dbCommand2 = "SELECT * FROM LeaveRequests WHERE email = #0";
var row2 = db.QuerySingle(dbCommand2, theEmail);
if(row2 != null) {
description = row2.description;
theLeaveType = row2.leaveType;
startDate = row2.startDate;
endDate = row2.endDate;
shortStartDate = startDate.ToString("dd-MMMM-yyyy");
shortEndDate = endDate.ToString("dd-MMMM-yyyy");
inttotalDays = row2.totalDays;
requestStatus = row2.requestStatus;
}
<fieldset>
<legend>Employee Leave Request Details</legend>
<table border="1" width="100%">
<tr bgcolor="grey">
<th>Description</th>
<th>Leave Type</th>
<th>Start Date</th>
<th>End Date</th>
<th>Total days leave requested</th>
<th>Request Status</th>
</tr>
<tr>
<th>#description</th>
<th>#theLeaveType</th>
<th>#shortStartDate</th>
<th>#shortEndDate</th>
<th>#inttotalDays</th>
<th>#requestStatus</th>
</tr>
</table>
</fieldset>
The QuerySingle method will only return one row. You need to use the Query method to get all rows.
var rows = db.Query(dbCommand2, theEmail);
Then in the HTML part of the file:
<fieldset>
<legend>Employee Leave Request Details</legend>
<table border="1" width="100%">
<tr bgcolor="grey">
<th>Description</th>
<th>Leave Type</th>
<th>Start Date</th>
<th>End Date</th>
<th>Total days leave requested</th>
<th>Request Status</th>
</tr>
#foreach(var row in rows){
<tr>
<td>#row.description</td>
<td>#row.leaveType</td>
<td>#row.startDate.ToString("dd-MMMM-yyyy")</td>
<td>#row.endDate.ToString("dd-MMMM-yyyy")</td>
<td>#row.totalDays</td>
<td>#row.requestStatus;</td>
</tr>
}
</table>
More information here:
http://www.mikesdotnetting.com/Article/214/How-To-Check-If-A-Query-Returns-Data-In-ASP.NET-Web-Pages
http://www.asp.net/web-pages/tutorials/data/5-working-with-data
I am using foreach loop insoide my view to display few radiobutton rows..
sample radiobutton
<tr>
<td width="30%">
Integrity
</td>
<td width="17%">#Html.RadioButtonFor(x => x.main.ElementAt(i).nested.integrity, 1, new { id = "main_" + i + "__nested_integrity) Poor
</td>
<td width="18%">#Html.RadioButtonFor(x => x.main.ElementAt(i).nested.integrity, 2, new { id = "main_" + i + "__nested_integrity" }) Satisfactory
</td>
<td width="18%">#Html.RadioButtonFor(x => x.main.ElementAt(i).nested.integrity, 3, new { id = "main_" + i + "__nested_integrity" }) Outstanding
</td>
<td width="16%">#Html.RadioButtonFor(x => x.main.ElementAt(i).nested.integrity, 4, new { id = "main_" + i + "__nested_integrity" }) Off
</td>
</tr>
Because i was getting problem while Model binding therefore i created manual id to suit my requirement(different incremented id ).
But again problems comes with name attribute i think.
for first and every loop i am getting same name attribute(not incremented) i.e if i select radiobuttton from first loop then it deselect taht row from other loop.
Like
Loop1 id= "main_0__nested_integrity"
Loop2 id= "main_0__nested_integrity"
Loop1 name= "nested.integrity"
Loop2 name= "nested.integrity"
as you can see name attribute for all loops are same, with different id.
Now my Question is...Is it posssible to override name attribute of RadioButtonFor like id??
Now my Question is...Is it posssible to override name attribute of RadioButtonFor like id??
No, that's not possible. The name attribute will be calculated from the lambda expression you passed as first argument.
Personally I would use editor templates and not bother with any loops at all
#model MainViewModel
<table>
<thead>
...
</thead>
<tbody>
#Html.EditorFor(x => x.main)
</tbody>
</table>
and in the corresponding editor template:
#model ChildViewModel
<tr>
<td width="30%">
Integrity
</td>
<td width="17%">
#Html.RadioButtonFor(x => x.nested.integrity, 1) Poor
</td>
<td width="18%">
#Html.RadioButtonFor(x => x.nested.integrity, 2) Satisfactory
</td>
<td width="18%">
#Html.RadioButtonFor(x => x.nested.integrity, 3) Outstanding
</td>
<td width="16%">
#Html.RadioButtonFor(x => x.nested.integrity, 4) Off
</td>
</tr>