I'm using Freemarker with Spring MVC.
In this code, when I try to bind the local variable "Price" for the nested object in the delete form, it fails with no object available for binding. In JSTL I've solved this nested object problem before by adding the nested price to the request scope with <c:set />.
Is there an equivalent way to do this in Freemarker? or perhaps a recommended alternative approach?
<#list product.prices as price>
<tr>
<td>${price.priceList.name}</td>
<td>${price.priceList.currency}</td>
<td>${DateUtils.formatTime(price.startTime!)}</td>
<td>${DateUtils.formatTime(price.endTime!)}</td>
<td>${price.price}</td>
<td>${price.wasPrice}</td>
<td class="center"><span class="green"><#if price.active><i class="fa fa-check"></i></#if></span></td>
<td>
<a class="btn btn-xs btn-default" href="/admin/products/new/${product.id}/prices/edit/${price.id}"><i class="fa fa-edit"></i> <#spring.messageText "button.edit" "button.edit" /></a>
<form class="inline" action="/admin/products/new/${product.id}/prices/delete/${price.id}" method="post">
<#forms.csrf />
<#forms.hiddenInput path="price.id" />
<button class="btn btn-default btn-xs" type="submit">
<i class="fa fa-trash-o"></i> <#spring.messageText "button.delete" "button.delete" />
</button>
</form>
</td>
</tr>
</#list>
Related
(using .NET Core 3.1)
I have a handler which works, however I can't call it from a <button/>. From an <a/> it works (but this will try to refresh my page and it's not what I want).
//GETS TO HANDLER
<a class="btn btn-info" asp-page-handler="SearchProductionRecords">
<i class="fas fa-file-excel mr-2"></i> Export Excel
</a>
//NEVER GETS TO HANDLER
<span class="input-group-append">
<button type="submit" asp-page-handler="SearchProductionRecords" class="btn btn-info btn-sm"><i class="fas fa-search"></i> </button>
</span>
//HANDLER
public async Task<IActionResult> OnPostSearchProductionRecordsAsync()
{
...
}
A button submit is associated with a form submit. Therefore, put the button inside a form method=post and it should work.
Kind Regards,
Maheshvara
I'm working an application that uses Clarity's tab. Here's the code in my app.component file.
<clr-tabs>
<clr-tab>
<button clrTabLink>General1</button>
<ng-template [(clrIfActive)]="generalActive">
<clr-tab-content>
<form clrForm clrLayout="horizontal">
<clr-input-container>
<label class="required">Delta Update Timestamp</label>
<input clrInput type="text" size="30" [(ngModel)]="configDetailsdlta_updt_ts" [ngModelOptions]="{standalone: true}"/>
</clr-input-container>
<header-comp></header-comp>
</form>
<button type="button" class="btn btn-primary" (click)="validateConfigDetails()">Submit</button>
</clr-tab-content>
</ng-template>
</clr-tab>
.....
Within the first tab I've embedded another component named header-comp that is defined as
<clr-input-container>
<label class="required">Table Name</label>
<input clrInput type="text" [(ngModel)]="tbl_nm" size="50" [ngModelOptions]="{standalone: true}"/>
<clr-control-error>You must provide a table name</clr-control-error>
</clr-input-container>
The problem I'm having is when I enter a timestamp value, stored in the configDetails model on app.component, and a table name, stored in the tbl_nm model of header.component, and then switch to the second and then back to the first tab, the table name is lost. The timestamp value is still present.
Why is the entered table name value lost when switching tabs? I don't think this is an issue of parent-child communication because app.component can read the entered table name value entered when the Submit button is selected and provided I haven't switched tabs first.
When you use the ng-template and structural directive clrIfActive, it actually removes the rendered template from the DOM when you switch tabs. This is for performance and is desirable in many cases. If you don't want the tabs to be reset, remove the template and clrIfActive directive.
<clr-tabs>
<clr-tab>
<button clrTabLink>General1</button>
<clr-tab-content>
<form clrForm clrLayout="horizontal">
<clr-input-container>
<label class="required">Delta Update Timestamp</label>
<input clrInput type="text" size="30" [(ngModel)]="configDetailsdlta_updt_ts" [ngModelOptions]="{standalone: true}"/>
</clr-input-container>
<header-comp></header-comp>
</form>
<button type="button" class="btn btn-primary" (click)="validateConfigDetails()">Submit</button>
</clr-tab-content>
</clr-tab>
</clr-tabs>
In out AngularJs app, we changed the activeClass of buttons (as in toggle groups) to btn-default (from the default btn-primary), so all our CSS expects that.
I notice that ng-bootstrap also defaults to btn-primary but I don't see how (or if) that can be changed.
Is it possible for me to change the activeClass so my CSS is correct with the new components?
ng-bootstrap make use of bootstrap 4. Bootstrap 4 includes six predefined button styles, each serving its own semantic purpose. But it doesn't include a btn-default but with btn-secondary class you achieve the same styling.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary" [class.active]="model.left">
<input type="checkbox" [(ngModel)]="model.left"> Left (pre-checked)
</label>
<label class="btn btn-secondary" [class.active]="model.middle">
<input type="checkbox" [(ngModel)]="model.middle"> Middle
</label>
<label class="btn btn-secondary" [class.active]="model.right">
<input type="checkbox" [(ngModel)]="model.right"> Right
</label>
</div>
If you still prefer to use the btn-default then you can make a class with that name in your component style and use it.
First of all, which version of angular are you using?
there's quite difference between ng versions
ng-1 angularjs.org - docs
<button ng-class="{'class1 class2 class3' : true}">
it's a button
</button>
ng-2/4 angular.io - docs
<button [ngClass]="{'class1 class2 class3' : true}">
it's a button
</button>
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" />
I am trying to follow the advice from this question, on how to make an input field act like a link.
I have setup the form, and setup the URL.
Yet, when I click the input fields, nothing happens. It does not redirect me, and there is no console errors.
Any ideas on how to make this work?
Rendered source:
<form action="/ads/edit" style="display:inline;" method="get">
<input onclick="_gaq.push(['_trackEvent', 'Frontpage_Top_SaleBtn', 'click'])" type="button" class="button_green_big" value="Sælg virksomhed" />
</form>
<form action="/ads/editbuy" style="display:inline;" method="get">
<input onclick="_gaq.push(['_trackEvent', 'Frontpage_Top_BuyBtn', 'click'])" type="button" class="button_green_big" value="Køb virksomhed" style="margin-left: 10px;" />
</form>
My ASP.NET MVC code that renders this:
<form action="#Url.Action("Edit","Ads")" style="display:inline;" method="get">
<input onclick="_gaq.push(['_trackEvent', 'Frontpage_Top_SaleBtn', 'click'])" type="button" class="button_green_big" value="Sælg virksomhed" />
</form>
<form action="#Url.Action("EditBuy","Ads")" style="display:inline;" method="get">
<input onclick="_gaq.push(['_trackEvent', 'Frontpage_Top_BuyBtn', 'click'])" type="button" class="button_green_big" value="Køb virksomhed" style="margin-left: 10px;" />
</form>
as noted in one of the answers to the question on which you are referring
<form action="http://google.com">
<input type="submit" value="Go to Google">
</form>
Set your inputs type to 'submit' instead of 'button'