I am working on the asp.net mvc project. I am generating a name with this code -
#Html.LabelFor(x => x.ReturnAirTemperature, new { style = "position: absolute;top: 310px;left: 18px;z-index: 10000;font-weight:bold" })
I have this model for it -
[Display(Name = "T(return)")]
public decimal ReturnAirTemperature { get; set; }
How can I create a link on "T(return)" text ?
You can also do something like this
<a class="" href="#Url.Action("ActionName","ControllerName", new { id=item.MyID })">
<i class="glyphicon glyphicon-pencil"></i>
<span class="sr-only">#Html.LabelFor()</span>
</a>
I suggest you to use like this:
<label for="#nameof(Model.ReturnAirTemperature )">u must agree our terms and conditions</label>
Related
I have the following html content:
<span th:if="${game.isWon()}" class="label label-success">
YOU WIN! Game Score: ${game.getGameScore()}.</span>
I can't figure out how to interpolate game.getGameScore() and the raw string keeps getting rendered. I'm using thymeleaf with Spring Boot.
Any help would be much appreciated.
If you want to use attributes directly in text (and not in HTML attributes) you have to use inlining which has its own syntax. (Note that inlining is on by default in Thymeleaf 3, but you may have to use the attribute th:inline="text" on earlier versions). For example:
<span th:if="${game.won}" class="label label-success">
YOU WIN! Game Score: [[${game.gameScore}]].
</span>
The traditional way to do this, is just to add some extra tags:
<span th:if="${game.won}" class="label label-success">
YOU WIN! Game Score: <span th:text="${game.gameScore}" />.
</span>
Assuming you have a game bean, using fields won and gameScore with related getters:
public class Game {
private boolean won;
private int gameScore;
public boolean isWon() {
return won;
}
public void setWon(boolean won) {
this.won = won;
}
public int isGameScore() {
return gameScore;
}
public void setGameScore(int gameScore) {
this.gameScore = gameScore;
}
}
Then you can use this:
<span th:if="${game.won}"
th:text="'YOU WIN! Game Score: ' + ${game.gameScore} + '.'"
class="label label-success">
</span>
This generates the following HTML:
<span class="label label-success">YOU WIN! Game Score: 123.</span>
Recently, I came across an issue and was able to fix it by cleaning the solution. But now I have the same issue and cleaning the solution does not fix my bug.
In my project, I use modals to display forms. So, I created a modal component with an EditForm to generate a new entity in my database.
<div class="modal">
<div class="modal-body">
<div class="row">
<div class="col s12">
<h5>New Item</h5>
</div>
</div>
<div class="row">
<EditForm Model="MyEntity" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit">
<DataAnnotationsValidator />
<ValidationSummary></ValidationSummary>
<div class="input-field fixed col s12">
<InputText id="name" #bind-Value="MyEntity.Name" />
<label class="active" for="name">Name</label>
</div>
<div class="col s12">
<button class="right btn" type="submit">Create</button>
</div>
</EditForm>
</div>
</div>
<div class="modal-footer">
<button class="modal-close btn-flat">Close</button>
</div>
</div>
#code {
[Parameter]
public MyEntityClass MyEntity {get; set;}
[Parameter]
public EventCallback<Microsoft.AspNetCore.Components.Forms.EditContext> OnValidSubmit { get; set; }
[Parameter]
public EventCallback<Microsoft.AspNetCore.Components.Forms.EditContext> OnInvalidSubmit { get; set; }
}
At the index page I would like to use the component like this:
#page "/mypage"
<MyProject.Pages.Shared.MyModalComponent MyEntity="_newMyEntity" OnValidSubmit="HandleValidSubmit" InvalidSubmit="HandleOnInvalidSubmit" />
#*
Some more HTML Code ...
*#
#code{
private MyEntityClass _newMyEntity = new MyEntityClass();
void HandleValidSubmit()
{
// Write to Database ...
}
void HandleOnInvalidSubmit()
{
// Display Errormessage to User ...
}
}
Blazor doesn't render the component, it just renders as HTML markup with the variable names:
Now to the strange part: On a different page I built a table component to display complex data and there all works fine! Did I miss something?
I'm using .NET Core 3.1 Blazor Server Side with Visual Studio 2019 Enterprise Version 16.4.4
I found the reason for this weird behaviour: Visual Studio sometimes doesn't set the build action type to "Content" on creating a new blazor component. After changing and rebuilding all works fine.
I have a ngform which includes a separate component to upload files. When I try to input a file in this component, the browser throws this error:
I don't understand where this might come from, here is my parent html:
<form
novalidate
#logosForm="ngForm"
(ngSubmit)="brandingService.setLogos(logosForm.value)">
<div class="columns">
<div class="column">
<app-file-upload
title="Logo principal"
name="logo"
label="Logo.png">
</app-file-upload>
</div>
</div>
Here is my child nested html (app-file-upload):
<div class="upload">
<span class="upload__label" [translate]="title"></span>
<div class="file is-fullwidth">
<label class="file-label">
<input
class="file-input"
type="file"
accept=".png, .jpg, .ico"
[name]="name"
(change)='handleFileInput($event)'
[(ngModel)]="file">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
</span>
<span class="file-name">
{{label}}
</span>
</label>
</div>
<figure *ngIf="file" class="image previsualisation" [ngClass]="{'is-128x128': name == 'logo', 'is-48x48': name == 'favicon'}">
<img [src]="file">
</figure>
</div>
And here's the child's ts:
export class FileUploadComponent {
file: string | ArrayBuffer;
#Input()
title: string;
#Input()
name: string;
#Input()
label: string;
constructor() { }
handleFileInput(event: Event): void {
const userFile: File = (<HTMLInputElement> event.target).files[0];
if (userFile) {
this.label = userFile.name;
const reader: FileReader = new FileReader();
reader.onload = ((e: Event): void => {
const filereader: FileReader = <FileReader> e.target;
this.file = filereader.result;
});
reader.readAsDataURL((<HTMLInputElement> event.target).files[0]);
}
}
}
As I understand the error this might come from the fact that I try to bind on a file object (or string | ArrayBuffer) and so I try to change the value of this object and that is forbidden. I don't see how I could use the ngModel differently to get the child component to output the file uploaded by the user. If you have an idea, please help me, thanks !
While I don't immediately see an error in your code, file input fields in combination with NgModel show some very strange behaviours.
Ben Nadel recently wrote an article about how to properly access the file inputs value attribute using a ControlValueAccessor, perhaps you can adopt his method instead.
I suggest you to follow this link. use this way to upload a file by avoid duplicate files, maximum size.
/* Add application styles & imports to this file! */
#import url('https://unpkg.com/bootstrap#3.3.7/dist/css/bootstrap.min.css')
<div>
<label class="btn btn-primary">
Upload Documents <input type="file" #fileUpload (change)="fileChangeEvent($event)" onclick="this.value=null" multiple hidden style="display:none;">
</label>
</div>
<ul>
<li *ngFor="let fileName of selectedFileNames">{{fileName}} <button (click)="removeFile (fileName)" style="cursor: pointer;"><i class="fa fa-times"></i></button>
</li>
</ul>
//Typescript Code:
For Typescript code refer to
Working Demo
I've been looking for something that might help me to solve this without success. What I need is just to call a Spring Controller by pressing a Button element, and pass from it a RequestParam("statusId" in this specific case). Is there a way to do this without using JavaScript?
I have the next html:
<div class="tablero col-lg-4 col-md-4 col-sm-6">
<div class="inner-content">
<div class="rate">
<div class="number">
<span>${package}</span>
<span class="text">REFERRALS</span>
</div>
</div>
<div class="description">
<h3>
<i class="fa fa-shopping-bag"></i>
PACKAGE
</h3>
<label>Paquete</label>
<button class="btn-primary" onclick="location.href='listReferred.htm' id="package">GO TO LIST</button><!--The parameter should be send from this button-->
</div>
</div>
</div>
And the Spring MVC Controller:
#SuppressWarnings("unchecked")
#RequestMapping(value="/listReferred", method=RequestMethod.GET)
public String getListReferredPage(#RequestParam int statusId, Model model) {
RestTemplate restTemplate = new RestTemplate();
String url = URL_REFERREDTYPE_JSON+statusId;
List<SearchProspectTO> searchProspectToList = restTemplate.getForObject(url, List.class, statusId);
model.addAttribute("searchProspectToList", searchProspectToList);
return "portalInternoReferidos";
}
Surround at least the button element with a form, like this:
<form action="listReferred" method="get">
<button...
</form>
Add a name and value attribute to the button:
<button name="yourButton" value="[provide status id here]">GO TO LIST</button>
Alter #RequestParam int statusId to #RequestParam(value="yourButton") int statusId.
This will work except for older IE browsers - below Version 10 I think. These versions will return 'GO TO LIST' instead of the value.
As workaround you could use a hidden input, that has to be placed inside the form section as well.
I am writing ASPNET MVC and I would like to use Html.ActionLink
I want however that the final HTML will look like this
from:
<li>#Html.ActionLink("Home", "Index", "Home")</li>
to:
<li>
<a href="layout-variants.html">
<i class="linecons-desktop"></i>
<span class="title">Home</span>
</a>
</li>
How can I transform
You should make use of Url.Action()
<li>
<a href="#Url.Action("Index","Home")">
<i class="linecons-desktop"></i>
<span class="title">Home</span>
</a>
</li>
Url.Action("Index","Home") is the way around it.
See the demo
public static string ActionLink(this HtmlHelper html, string url)
{
return "<i class=\"linecons-desktop\"></i><span class=\"title\">Home</span>"
}
Call from view: #Html.ActionLink("layout-variants.html"), you can change parameter for your project.