Unbreakable Unbreakable - 28 days ago 9
ASP.NET (C#) Question

How to set data-display in razor

I have a basic password strength indicator.

<input type="password" id="myElement1" size="40" class="left" data-display="myDisplayElement1" />
<div class="left" id="myDisplayElement1"></div>


I have the
JS Script
which takes care of all the logic. And the
data-display div
shows the message whether the password is weak or strong. But I want to convert the above code into Razor. Below is what I have till now.

<div class="form-group">
@Html.LabelFor(model => model.NewPassword, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.NewPassword, new { htmlAttributes = new { @class = "form-control", id = "myElement1" } })
<div class="left" id="myDisplayElement1"></div>
@Html.ValidationMessageFor(model => model.NewPassword, "", new { @class = "text-danger" })
</div>
</div>


Question: Everything is working fine but I am not able to put data-display attribute in razor. Where do I need to place it. But as the data-display is not set, I am not able to display the user its password strength as the div.

I want to be able to do something like below

@Html.EditorFor(model => model.NewPassword, new { htmlAttributes = new { @class = "form-control", id = "myElement1" , data-display = "myDisplayElement1"} })


But
data-display
gives me error.

Error

Cannot resolve symbol
data
the error comes at the place where I have added
data-display
.

Answer

Hyphenation is not valid within an anonymous object. However, knowing that it would be necessary at times to add attributes with hyphenation, the Razor helpers will auto replace underscores with hyphens in attribute names. As a result, you can accomplish what you need by using data_display rather than data-display.