Unbreakable Unbreakable - 6 months ago 32
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" })

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"} })

gives me error.


Cannot resolve symbol
the error comes at the place where I have added


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.