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>
Related
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
}
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 am parsing JSON data and displaying the data to a table using angular JS.
There are many table rows that I populated from JSON file using ng-repeat.
Status.winner could be of values 0 or 1.
If the value for the winner for the table row is 0, I would like to highlight Playerdata[0].playername for that table row to yellow color.
Else If the winner for the table row is 1, then I would like to highlight Playerdata[1].playername for that table row to yellow color.
How do I do that for each row with different values of winner, which can be 0 or 1?
<body ng-app="form-input" ng-controller="ctrl">
<table class="table table-bordered table-condensed ">
<caption>Recent Game Statistic</caption>
<tbody>
<tr class="success" ng-repeat="status in recentGame">
<td ng-bind="status.Winner"> </td>
<td ng-bind="status.Playerdata[0].Playername"> </td>
<td ng-bind="status.Playerdata[1].Playername"> </td>
</tr>
var app2 = angular.module('form-input', []);
app2.controller('ctrl', function($scope,$http) {
var url = "http://...JSON";
$http.get(url).success( function(data) {
$scope.recentGame = data.RecentGames;
});
})
Use ngClass:
<tr class="success" ng-repeat="status in recentGame">
<td ng-bind="status.Winner"></td>
<td ng-bind="status.Playerdata[0].Playername" ng-class="{winner: status.Winner == 0}"></td>
<td ng-bind="status.Playerdata[1].Playername" ng-class="{winner: status.Winner == 1}"></td>
</tr>
Then in CSS define .winner class styles the way you need. For example:
.winner {
background-color: yellow;
}
I am trying to render a table, using EditorFor, and a partialview, I think.
I have a model with a List<> property defined like this:
public List<TransactionSplitLine> TransactionSplitLines { get; set; }
The idea is that a user selects a few drop downs and enters a value into an edit box, and clicks a button. The model goes back to the controller, and the controller adds the entered values to the List<>
[HttpPost]
public ActionResult AccountTransaction(AccountTransactionView model)
{
var reply = CreateModel(model);
if (model.CategoryIds != null)
{
foreach (var c in model.CategoryIds)
{
reply.TransactionSplitLines.Add(new TransactionSplitLine { Amount = "100", Category = "Test Category", SubCategory = "Test More", CategoryId = int.Parse(c) });
}
}
reply.TransactionSplitLines.Add(new TransactionSplitLine { Amount = "100", Category = "Test Category", SubCategory = "Test More", CategoryId = 1 });
return View("AccountTransaction", reply);
}
Ignore the CreateModel. It simply sets up some data. Also, I am hardcoding data. This will eventually come from some form values.
The model is then returned to the same screen, allowing the user to ender more data. Any items in the List<> are read and a Table is rendered. I also have to store the current listen item values in hidden fields, so that they can be submitted back, along with the new data entered, so that the list can grow each time the user adds data.
The view is defined like this:
<table width="600">
<thead>
<tr class="headerRow">
<td>
Category
</td>
<td>
Sub Category
</td>
<td>
Amount
</td>
</tr>
</thead>
<tbody>
<%=Html.EditorFor(m=>m.TransactionSplitLines) %>
</tbody>
</table>
This is my first attempt with EditorFor...
My View is in a folder 'Views/BankAccount/AccountTransaction.aspx
I have created a ascx in Views/Shared/TransactionSplitLines.ascx
The code for the ascx is like this:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<BudgieMoneySite.Models.TransactionSplitLine>" %>
<tr>
<td>
<%=Model.Category %>
<%=Html.HiddenFor(x => x.CategoryId)%>
</td>
<td>
<%=Model.SubCategory %>
<%=Html.HiddenFor(x => x.SubCategoryId)%>
</td>
<td>
<%=Model.Amount %>
<%=Html.HiddenFor(x => x.AmountValue)%>
</td>
</tr>
This is data
The 'This is data' is just test stuff, which is never rendered.
When I run this, all that happens is that my output is rendered as:
<table width="600">
<thead>
<tr class="headerRow">
<td>
Category
</td>
<td>
Sub Category
</td>
<td>
Amount
</td>
</tr>
</thead>
<tbody>
Test Category
</tbody>
</table>
It seems like the ascx isn't being used? I'd expect to see the 'This is data' text. But, nothing. Hopefully you can see an obvious fault?
Your editor template should be either:
~/Views/Shared/EditorTemplates/TransactionSplitLine.ascx
or:
~/Views/BankAccount/EditorTemplates/TransactionSplitLine.ascx
The name of the ascx is always the type name of the collection item (TransactionSplitLine and not TransactionSplitLines) and it should be situated at ~/Views/Shared/EditorTemplates or ~Views/ControllerName/EditorTemplates.
Or if you want to use a custom editor template name:
<%= Html.EditorFor(m=>m.TransactionSplitLines, "~/Views/foo.ascx") %>
Or use UIHintAttribute on your model.