How to pass an ASP.NET model's parameter to the ng-click method?
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
<button class="btn btn-default" ng-click="addToBasket()"></button>
</td>
</tr>
}
I want to pass item.Id to the addToBasket method set by ng-click attribute.
Is there an easy way to do it?
<button class="btn btn-default" ng-click="addToBasket(#( item.Id ))"></button>
Razor's special # character is (generally) interpreted regardless of location or surrounding HTML syntax (which is a problem if you ever want to embed a static e-mail address in Razor...)
To escape the # (such as for putting an e-mail address) just put it twice:
<input type="email" value="foo##bar.com" />
Related
I wrote a query in which I get the semester class, display its values as a name and get its id. Accordingly, when I select the semester I need in the drop-down list, I am given the semester that I chose. But I also need to display its duration in another field, I can do this if I create a ForEach loop and use it to extract this value, but it displays absolutely all the available values, and not the one I need. Tell me how to do it right? For display I use Spring MVC. Now the page looks like this:
I am also attaching the jsp content:
<form:form action="allSemestrsSem" method="get" id="selectSemestr" modelAttribute="semestr">
<tr>
<td style="font-size: large;">Select semester</td>
<td style="padding-left: 50px">
<select name="selectSemestr">
<c:forEach items="${semestr}" var="semestr">
<option value="${semestr.id}">${semestr.name}</option>
</c:forEach>
</select>
</td>
<td style="padding-left: 20px">
<security:authorize access="hasRole('ADMIN')">
<input type="submit" id="button" value="select" /></td>
</security:authorize>
</tr>
<tr height="80px" style="font-size: large; font-weight: bold;">
<td colspan="3">Semester duration:
<c:forEach items="${semestr}" var="semestr"> ${semestr.duration} </c:forEach>
</td>
</tr>
</form:form>
And just in case my controller is:
#RequestMapping(value = "/allSemestrsSem", method = RequestMethod.GET)
public String allSemestrs(#RequestParam(name = "selectSemestr") String selectSemestr, Model model) {
List<Semestr> semestr = service.getSemestr();
model.addAttribute("semestr", semestr);
List<Discipline> allDisciplines = service.getDisciplineSemestrId(Integer.valueOf(selectSemestr));
model.addAttribute("allDisc", allDisciplines);
return "semestr";
}
My purpose is to display a table with the leftmost column containing course title at a college, and the rest of the row information regarding textbooks to that course.
This is what it looks like now:
current table
Here is an image of what I would like to happen:
Textbook information
Here is my code for what I have now.
{{#each getCourses}}
<tr>
<td>{{this}}</td>
{{#each getTextbooks this}}
<td>
{{title}}
<br>
</td>
<td>Editor</td>
<td><span class="label label-success">Active</span>
</td>
<td> <button type="button" class="btn btn-primary btn-sm">I have it</button> </td>
<td> <button type="button" class="btn btn-primary btn-sm">I want it</button> </td>
{{/each}}
</tr>
{{/each}}
Before this table, a user is able to select several courses from a dropdown, and then I store the courses in a session and get them and iterate. Each course has textbooks, so I iterate over the list of textbooks. However the problem I face is that I'm not sure how to incorporate rowspan or something like that to allow multiple rows of textbook information for each class.
This seems like it should be so basic but for the life of me I can't get it working.
In my MVC 5 web app, I would like to show the user a list of layouts using checkboxes so the user can select whichever layouts are required.
I'm using an editor template, that gets called as such:
<table class="table">
<tr>
<th>
#Html.DisplayName("Selected")
</th>
<th>
#Html.DisplayNameFor(x => x.Layout)
</th>
</tr>
#Html.EditorForModel()
</table>
Inside the template I use a helper for the checkbox.
<tr>
<td>
#Html.CheckBoxFor(x => x.IsSelected)
</td>
<td>
#Html.DisplayFor(x => x.Layout)
</td>
</tr>
This all works fine, I can capture what the user has selected in the Post
What I cannot do however is apply any CSS styles to the checkbox.
What I have read is it should be a matter of:
#Html.CheckBoxFor(x => x.IsSelected, new { #class = "css-checkbox" })
This however causes the checkbox to not be rendered.
I have tried a few things such as wrapping the checkbox in a
<div class="checkbox">
but even though the checkbox is rendered, I cannot select any of the items.
Now there is hopefully just something simple I am doing or not doing?
EDIT 1:
I seem to have come across the problem, but am not sure how to fix it.
If I use the following code, it works:
<input id="theid" name="theid" type="checkbox" class="css-checkbox" />
<label class="css-label" for="theid">Using input </label>
What I need to do is for the:
#Html.CheckBoxFor(x => x.IsSelected, new { #class = "css-checkbox" })
to be turned into the same as when I use input and label.
The page source looks as such:
<input checked="checked" class="css-checkbox" data-val="true" data-val-required="The IsSelected field is required." id="test5" name="IsSelected" type="checkbox" value="true" /><input name="IsSelected" type="hidden" value="false" />
<input id="theid" name="theid" type="checkbox" class="css-checkbox" />
<label class="css-label" for="theid">Using input </label>
The top comes from the helper and the bottom one is using the input tag directly.
I've understood the routing principle consisting in creating routes and call them from twig templates.
When calling, we can pass parameters to the route which will be included in the url.
I'm in the following case, I have an object called "Object" and each object can belong to other objects called "Category".
In my twig template, I display all my objects line by line (each row contains the object information and a checkbox to select it).
I have also a button "send", I'd like to click this button and edit all the selected objects.
However I don't think I can do this with a route because I don't know by advance how many elements will be selected (so I don't know the number of parameters to the route).
I'd like to know how you would do this.
Sorry for the tardive response, I have the following code in my twig tempalte :
<table class="table table-bordered table-condensed table-stripped">
<tr>
<td> Delete </td>
<td> Title </td>
<td> Date added </td>
<td> Description </td>
<td> </td>
</tr>
{% for link in links %}
<tr>
<td>
<a class="btn" href="{{ path('ProjectTestBundle_deleteLink', {'idLink': link.id}) }}"><i class="icon-trash"></i></a>
</td>
<td> <a>{{link.title}}</a> </td>
<td> {{link.dateAjout|date('Y-m-d H:i:s')}} </td>
<td> {{link.description}} </td>
<td>
<input id="{{link.id}}" type="checkbox"">
</td>
</tr>
{% endfor %}
</table>
<a class="btn">
<i class="icon-edit"></i>
Add selected links to a theme
</a>
What I'd like to is to put a href attribute there
<a href="" class="btn">
<i class="icon-edit"></i>
Add selected links to a theme
</a>
and call a path with all the links selected with the checkbox.
I have used MVC MVC 2.0 Client Side validation, but it does not work as expected. Now I am trying to find out, what I did wrong.
How does it work?
I have this rendered form:
<form method="post" action="/Sprint/Edit/68d4886b-a86a-4f0b-b713-39219febddf3">
<fieldset>
<legend>Sprint</legend>
<table>
<tbody><tr>
<td><label for="sprint_Title">Title</label></td>
<td><input type="text" value="Wichtige Private Erledigungen" name="sprint.Title" id="sprint_Title" class="input-box t-input"></td>
<td><span class="error"><span id="sprint_Title_validationMessage" class="field-validation-valid"></span></span></td>
</tr>
<tr>
<td><label for="sprint_Date">Date</label></td>
<td>
<div id="sprint_Date" class="date-picker t-input t-widget t-datepicker"><input value="12.05.2010" name="sprint.Date" id="sprint_Date-input" class="t-input" autocomplete="off"><a title="Open the calendar" tabindex="-1" href="#" class="t-link t-icon t-icon-calendar">select date</a></div>
</td>
<td><span class="error"><span id="sprint_Date_validationMessage" class="field-validation-valid"></span></span></td>
</tr>
<tr>
<td><label for="sprint_Description">Description</label></td>
<td><textarea rows="10" name="sprint.Description" id="sprint_Description" cols="80" class="t-input">dsfs1</textarea></td>
<td><span class="error"><span id="sprint_Description_validationMessage" class="field-validation-valid"></span></span></td>
</tr>
</tbody></table>
</fieldset>
<input type="submit" value="Submit" name="Submit" id="Submit" class="t-button t-state-default">
</form>
And this script is rendered:
<script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"sprint.Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"sprint_Title_validationMessage","ValidationRules":[{"ErrorMessage":"Title is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"sprint.Date","ReplaceValidationMessageContents":true,"ValidationMessageId":"sprint_Date_validationMessage","ValidationRules":[{"ErrorMessage":"Das Feld \"Date\" ist erforderlich.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"sprint.Description","ReplaceValidationMessageContents":true,"ValidationMessageId":"sprint_Description_validationMessage","ValidationRules":[]}],"FormId":null,"ReplaceValidationSummary":false});
//]]>
</script>
But to my surprise the breakpoint only stops at page load. I think it should be also if a field is tabbed? At least, after I press the post button.
Why does client side validation not work for me?
This just sets up the handlers, it won't actually hit this line when the form is submitted, nor when you tab between fields.
You will get validation errors upon losing focus and/or form submission, however if you have other javascript errors on the page it can cause this to fail.
Also, make sure you've reference the required javascript files in your header:
MicrosoftAjax.js
MicrosoftMvcValidation.js