I am trying to split lable into two lines. But if put in the #Html.LabelFor it is not working is there any alternative options?
controller
meetingAbstract.AbstractTitleInEnglishLabel = meetingQuestionses[0].question_text
+ "/" + meetingQuestionses[0].question_text_en;
view
#Html.LabelFor(model => model.AbstractTitleInEnglishLabel,
Model.AbstractTitleInEnglishLabel, new { #class = "control-label mandatory" })
Create a regular label
<label for="#Html.IdFor(m => m.AbstractTitleInEnglishLabel)"
class="control-label mandatory">
Text above
Text below
</label>
I would create a custom HtmlHelper.
Inherit IHtmlString and use TagBuilder to create one.
Then you can use it with #Html.CustomLabelFor(...).
so that the html will render you will need to use html.raw. try changing it to this
<label class="control-label mandatory">#Html.Raw(model => model.AbstractTitleInEnglishLabel)</label>
Where do you want to put break within label? After 1st, 2nd, 3rd, n-th word?
IMHO, it's better to increase the height of label and let HTML render it on it's own.
In your css set:
.control-label{
height: 60px; /* or change accordingly */
}
#Html.Raw(HttpUtility.HtmlDecode(#Html.LabelFor(model => model.AbstractTitleInEnglishLabel,
Model.AbstractTitleInEnglishLabel, new { #class = "control-label mandatory" }).ToString()))
Related
Hopefully this is an easy one...
I am having an issue with Bootstrap 5 floating labels not working when I create HTML elements using Razor syntax.
If I use plain HTML they work as expected. Using razor the labels are appearing in the state you'd expect if the text box has focus (top left of input)
<div class="form-floating mb-3">
#Html.EditorFor(model => model.Recipient, new { htmlAttributes = new { #class = "form-control", #onchange = "javascript: Changed( this, 'recipient-name' );" } })
#Html.ValidationMessageFor(model => model.Recipient, "", new { #class = "text-danger" })
#Html.LabelFor(model => model.Recipient)
</div>
Here is an image of the above on load -
Code output in UI
Has anyone had this issue, know a way to get around it or spot what I am doing wrong? (I need the input tag to be populated from the model as the form can be used to create a new request or update and existing request)
Thanks
Do you want something like below?
<div class="form-floating">
<input asp-for="Recipient" class="form-control" />
<label asp-for="Recipient"></label>
<span asp-validation-for="Recipient" class="text-danger"></span>
</div>
Thanks but I figured out what I was doing wrong. The issue was simple...
ISSUE - There was no placeholder tag which this animation relies on.
RESOLUTION - Add #placeholder = "Recipient Name"
To provide a bit more info the text input looks different when in focus/not focused. This was the issue.
It should have looked like this when not focused - Not Focused
But it was looking like this - Focused
The code that fixed the issue is
<div class="form-floating mb-3">
#Html.EditorFor(model => model.Recipient, new { htmlAttributes = new { #class = "form-control", #onchange = "javascript: Changed( this, 'recipient-name' );", #placeholder = "Recipient Name" } })
#Html.ValidationMessageFor(model => model.Recipient, "", new { #class = "text-danger" })
#Html.LabelFor(model => model.Recipient)
</div>
Hi Im new to MVC5 and I just want to ask how can I add the attribute for my Editor so i can add phone mask in it
Heres the code
#Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { #class = "form-control" } })
and heres the attribute that i want to add
data-mask="(999) 999-9999"
I tried it in a simple input and it works
<input type="text" class="form-control" data-mask="(999) 999-9999" placeholder="Phone">
Thanks in advance
new { htmlAttributes = new { #class = "form-control", data_mask = "(999) 999-9999" } }
(underscore will be converted to hyphen by razor engine)
great answer by user3559349
I'm going to bind data to a label using MVC4,But it's not success..Data come to model.
Here is my code.
<div class="newclass">
#Html.LabelFor(m => m.NewsTeam.NewsMgr, new { style = "width:100%", #class = "newcssval" })
</div>
Try like this:
#Html.LabelFor(m => Model.NewsTeam.NewsMgr)
or use DisplayFor
#Html.DisplayFor(m => m.NewsTeam.NewsMgr)
Hope it helps
This will only give you the name of the field (or it's display value from the class). I suspect what you need is the following.
#Html.TextBoxFor(m => m.NewsTeam.NewsMgr,
new { #class = "newcssval", #readonly = true })
This will give you a read-only text box wuth the content of your model data.
Hope that helps.
If your intent is to simply show the value of the property, use the Display or DisplayFor helper:
#Html.DisplayFor(m => m.NewsTeam.NewsMgr)
Or, forget the helper entirely:
#Model.NewsTeam.NewsMgr
If the property contains HTML, you'll need to use the Raw helper:
#Html.Raw(Model.NewsTeam.NewsMgr)
Use this,
#Model.NewsTeam.NewsMgr
It will just show the value of property as label
Or Use,
#Html.DisplayFor(m => m.NewsTeam.NewsMgr)
I have a collection of objects that I'm trying to display, however the span generated by the ValidationMessageFor does not include all the validation attributes:
<span class="field-validation-error">This field is required</span>
instead of:
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="Questions[0].SingleAnswer"></span>
This is how I'm generating the html:
<fieldset id="dr_profileUpdates">
#Html.EditorFor(model => model.Questions)
</fieldset>
And here is my editor template:
#Html.ValidationMessageFor(model => model.SingleAnswer)
#Html.TextBoxFor(model => model.SingleAnswer, new { #class = "textBoxDefault" })
The validation works, however the span does not dissapear after filling out the textbox and focusing out of it - I would assume this is because the span does not get generated correctly
Any help is appreciated.
EDIT: Actually it appears that after posting back to the server and returning the partial view (assuming the ModelState is invalid), those attributes do not get generated again - it only seems to affect the ValidationMessage. Any ideas?
Thanks,
Try add on top of your razor file
#{
Html.EnableUnobtrusiveJavaScript();
}
I have a jsp page with three text boxes and a ADD button beside it. Now I have to set the tabindex for the dynamically added elements. How can I do it?
[As you may have figured out by now, posting code allows someone else to give a more definite answer. Without an example to work from, I can only imagine what your code and environment is...from ASP.NET MVC3 + jQuery]
[I used the information from this stackoverflow post and modified a lit bit.]
I use jQuery to modify the tabindex value. I have multiple forms that are dynamically added by jQuery. The forms use div and style="display: table" to organize the text fields into columns.
[The relevant CSS styles]
.tb-table
{
display: table;
}
.tb-row
{
display: table-row;
}
.tb-cell
{
display: table-cell;
}
[A chunk of my ASP.NET MVC3 Razor cshtml that produces html for the browser--should be readable]
<div class="tb-table">
<div id="namerow1" class="tb-row">
<div class="tb-label tb-cell" id="l_firstname1">
#Html.LabelFor(model => model.firstname1)
</div>
<div class="tb-field tb-cell" id="firstname1">
#Html.TextBoxFor(model => model.firstname1, new { tabindex = "1" })
#Html.ValidationMessageFor(model => model.firstname1)
</div>
<div class="tb-label tb-cell" id="l_firstname2">
#Html.LabelFor(model => model.firstname2)
</div>
<div class="tb-field tb-cell" id="firstname2">
#Html.TextBoxFor(model => model.firstname2, new { tabindex = "2" })
#Html.ValidationMessageFor(model => model.firstname2)
</div>
</div>
<div id="namerow2" class="tb-row">
<div class="tb-label tb-cell">
#Html.LabelFor(model => model.lastname1)
</div>
<div class="tb-field tb-cell">
#Html.TextBoxFor(model => model.lastname1, new { tabindex = "1" })
#Html.ValidationMessageFor(model => model.lastname1)
</div>
<div class="tb-label tb-cell">
#Html.LabelFor(model => model.lastname2)
</div>
<div class="tb-field tb-cell">
#Html.TextBoxFor(model => model.lastname2, new { tabindex = "2" })
#Html.ValidationMessageFor(model => model.lastname2)
</div>
</div>
</div>
I use tabindex for all values in a column; not just a unique order. For the browsers I tested in, when there are multiple text fields with the same tabindex, the text field encountered first in the html code will be selected first by tab-navigation.
Therefore, for each form that I have, I use a tab value from 0-9 to group them. Once I have the tab order for an individual form working the way I want, I use the following jQuery to INCREMENT the tabindex value by 10 (or 20, or 30, or 40) for each form that I dynamically add. the first decimal, 0-9, organizes the tabs within that form, and incrementing the factors of 10 keeps the subsequent form tabs following along.
$('.createtab-form [tabindex]').each(function () {$(this).attr('tabindex', parseInt($(this).attr('tabindex'))+10)})
This is my first attempt at this myself--I'm sure someone else will have a better method. Let me know what you think.