-1

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.

Unbreakable
  • 7,776
  • 24
  • 90
  • 171

1 Answers1

1

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.

Chris Pratt
  • 232,153
  • 36
  • 385
  • 444
  • 2
    Which is addressed in the [duplicate](http://stackoverflow.com/questions/2897733/hyphenated-html-attributes-with-asp-net-mvc), one of many questions dealing with this subject. Are you sure it warrants yet another version of an answer that exists many times on the site already? :) – CodeCaster Nov 11 '16 at 15:22
  • @Chris: Thank you so so much for the answer. CodeCaster: Thanks for guiding me on how to ask question correctly. – Unbreakable Nov 11 '16 at 15:28