My index views in MVC contain a row per row set of actions like so:
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.SomeProperty)
</td>
<td>
<a asp-action="Edit" asp-route-id="#item.ID" class="btn btn-warning" style="margin-top: -8px">
<span class="fa fa-pencil" alt="Edit" />
</a>
<a asp-action="Details" asp-route-id="#item.ID" class="btn btn-primary" style="margin-top: -8px">
<span class="fa fa-info-circle" alt="Details" />
</a>
<a asp-action="Delete" asp-route-id="#item.ID" class="btn btn-danger" style="margin-top: -8px">
<span class="fa fa--trash" alt="Delete" />
</a>
</td>
</td>
}
There are other index pages where the 3 buttons will get reused so that already suggests a partial view just to save redundant code, the other part is I have to have the alt tag in the spans for 508 compliance so I want a partial view to help with consistency.
Problem is, if I just copy and paste the 3 buttons into a partial view, then I get "The name 'item' does not exist in the current context" and if I try to bring over the foreach, then I get more then one set of buttons in each row. Any ideas?
What I believe is that your problem is related to the model which you didn't pass to the partial. There are some ways that you can pass your model to the partial view.
Think you have an Index view which has a model:
#model YourProjectNameSpace.Models.NameOfModel
......//Other HTML codes
when you want to call the partial view inside this view you should pass the model:
#Html.Partial("_MyPartial",Model)
Also inside of your partial view, you need to add the following line in the beginning:
#model YourProjectNameSpace.Models.NameOfModel
Related
I have a table of values with an href.
<tr th:each="note : ${test}">
<td th:text="${note.name}">></td>
<td th:text="${note.lastName}"></td>
<td th:text="${note.studentId}"></td>
<td>
<a th:href="#{'/seeStudent/' + ${note.studentId}}">Ver</a>
</td>
</tr>
This is my controller:
#GetMapping("/seeStudent/{id}")
public String getStudentById(#PathVariable Long id, Model model) {
model.addAttribute("student", repo.findById(id));
return "seeStudent";
}
This is my HTML:
<div>
<h1>Student information</h1>
<ul>
<div th:object="${student}">
<li>
<h4>
<span th:text="${name}"></span>
</h4>
<h4>
<span th:text="${lastName}"></span>
</h4>
</li>
</div>
</ul>
</div>
For some reason the display is comming up blank, it is as if it wasn't finding the student by Id. When I debug it does locate the student and return it. I believe I may be doing something wrong when trying to pull the object data and display it in my html. Any ideas?
If you're using th:object, your expression should be (with an asterisk) *{name} and *{lastName}. If you want to use the equivalent (dollar sign) ${...} expression, it would be ${student.name} and ${student.lastName}.
i'm iterating through map where key and value pair is there and i'm not getting how to apply pagination of those data where that map data is generated from the database directly.i'm iterating through map where key and value pair is there and i'm not getting how to apply pagination of those data where that map data is generated from the database directly.
<table>
<thead></thead>
<tbody>
<tr>
<td><marquee>
<h3>
A tag is a keyword or label that categorizes your question with
other, similar questions. Using the right tags makes it easier
for others to find and answer your question.
</h4>
</marquee>
<hr></td>
</tr>
<tr ng-repeat="(key,value) in tagForm.data track by $index">
<td align="left">
<div ng-init='tagForm.getTag(key)'
class=" w3-container w3-card w3-white w3-margin w3-round "
style="padding-left: 40px; padding-right: 40px;">
<br>
<p ng-repeat="data2 in tagForm.message track by $index">
<a ng-click="tagForm.getAnswer(key)">Q. {{value}}</a> <span
class="badge">{{data2}}</span> <br>
</p>
<ul ng-repeat="(key2,value2) in tagForm.ans track by $index">
<li><b ng-if="key==key2">Ans. {{value2}}</b></li>
</ul>
<div ng-init='tagForm.getUser(key)'>
<b>Posted
by:{{tagForm.user2[$index]}}</b>
</div>
<button class="btn btn-default" id="{{$index}}"
ng-click="count1=count1+1" ng-init="count1=5+($index*3)-5">
Upvote <span class="badge">{{count1}}</span>
</button>
<button class="btn btn-default" id="{{$index}}"
ng-click="count=count+1" ng-init="count=1+($index*2)">
Downvote<span class="badge">{{count}}</span>
</button>
<button class="btn btn-default" ng-click="gotoanswer()">Answer
this question</button>
<br> <br />
</div> <br>
</td>
<td height=100px><br /></td>
</tr>
</tbody>
</table>
use the following pagination in your html file
<uib-pagination ng-show="isPaginate == false "
total-items="totalItems" ng-model="currentPage"
boundary-links="true" items-per-page="numPerPage"
class="pagination-sm" ng-change="pageChanged()" max-size="5">
</uib-pagination>
and then initialize the variable as per requirement in angular controller
$scope.totalItems = 80;//length of records
$scope.currentPage = 1;
$scope.numPerPage = 10;
var startpos = 0;
for dynamically loading records (loading records batch wise instead of loading all at time) refer following function
$scope.pageChanged = function() {
// if($scope.currentPage!=1)
$scope.isCollapsed = false;
$scope.isRCollapsed = false;
$scope.page = ($scope.currentPage - 1) * $scope.numPerPage;
callApi($scope.page);//get next set of 10 records
console.log('Page changed to: ' + $scope.currentPage);
};
So I am having this issue on Angular 4.
I have this button in my html template markup:
<td><a class="btn btn-danger" (click)="delete()"><i class="fa fa-trash"></i></a></td>
I have the data assing to each td from a *ngFor, so I have the {{ data.id }} that I can use on this record, but how can I assign it to my delete method correctly, I tried using:
<td><a class="btn btn-danger" (click)="delete({{ data.id }})"><i class="fa fa-trash"></i></a></td>
<td><a class="btn btn-danger" (click)="delete(id)" [id]={{ data.id }}><i class="fa fa-trash"></i></a></td>
But none seem to work, so any advice or guidance would be greatly appreciated.
just pass data.id to delete function
<td><a class="btn btn-danger" (click)="delete(data.id)"><i class="fa fa-trash"></i></a></td>
and then in your delete function
delete(id : any){
console.log(id);
// perform your action
}
I have an observableArray self.CustomerOrders which I populate with
self.CustomerOrders.push(new CustomerOrder(self.getOrderId(), today.toLocaleDateString() , self.selectedCustomer2(), JSON.stringify(self.cart(),null,4)));
where
self.getOrderId() is a method to get an Id for the order,
today.toLocaleDateString() prints today's date,
self.selectedCustomer2 is the selected customer of the order and
self.cart is another observableArray which includes all ordered items.
Here is how I populate self.cart
self.cart.push(new orderedItem(product.id, product.name, product.price, product.quantity()));
and here is my foreach
<tbody data-bind="foreach: CustomerOrders">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: date"></td>
<td data-bind="text: customer"></td>
<td data-bind="text: details"></td>
<td data-bind="click: $parent.selectedOrder"><a class="btn btn-primary" data-toggle="modal" data-target="#display-order">View</a>
</td>
<td data-bind="click: $parent.selectedOrder"><a class="btn btn-primary" data-toggle="modal" data-target="#edit-order">Edit</a>
</td>
<td data-bind="click: $parent.selectedOrder"><a class="btn btn-primary" data-toggle="modal" data-target="#delete-order">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
I succeed in saving all those data to the CustomersOrders observable array and then I print them in my UI using foreach. My problem is that the self.cart items are printed as JSON and I do not want to display JSON to the user but HTML.
How to implement this ?
Any ideas ?
Ok, so don't JSON.stringify your cart. Then, assuming your Details binding is where the cart part is supposed to end up, and it's supposed to be an array, you can just nest foreach bindings like this:
<td>
<ul data-bind="foreach: details">
<li data-bind="text: someProperty"></li>
</ul>
</td>
where someProperty is whatever property of the cart you want to display.
Of course, you can choose whatever html elements suit your requirements.
My problem is that the self.cart items are printed as JSON
Well, that's not surprising.
self.CustomerOrders.push(
new CustomerOrder(
self.getOrderId(),
today.toLocaleDateString(),
self.selectedCustomer2(),
JSON.stringify(self.cart(),null,4) /* guess what that does */
)
);
Just do
self.CustomerOrders.push(
new CustomerOrder(
self.getOrderId(),
today.toLocaleDateString(),
self.selectedCustomer2(),
self.cart
)
);
and use regular knockout bindings in your view to display the cart.
So i have this html
<tr>
<%
ArrayList<Project> projects = (ArrayList<Project>)session.getAttribute("projects");
for(Project p: projects) {
%>
<td>
<a href="GoToProjectPage" name="projecttitle">
<%=p.getProjectTitle()%>
</a>
</td>
</tr>
however, i do not know how to get the "projecttitle" in the a href. I tried using the code below but it does not work. we are required to use MVC
request.getParameter("projecttitle")
Add the parameter to the href of the <a> element:
<a href="GoToProjectPage?projecttitle=<%=p.getProjectTitle()%>">
<%=p.getProjectTitle()%>
</a>