User475983607 posted
I want to be able to change a 'secret' line of text to switch between the default "************" and "mysecret" on hover or click.
At the moment my code is just:
@foreach (var item in Model.Games)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.MySecret) //switch
</td>
From reading around it looks like JQuery is normally used to do this with asp.net core 2.2. What is the best way of doing this given that the text I want to switch to is in a loop?
There are several ways to solve this design question. Here's one idea.
Model
public class TestVm
{
public List<Game> Games { get; set; }
}
public class Game
{
public string MySecret { get; set; }
}
View
@model MvcApi22.Models.TestVm
@{
ViewData["Title"] = "Index";
}
<h1>Index</h1>
<table>
@foreach (var item in Model.Games)
{
<tr>
<td>
<span data-value="@item.MySecret" data-mask="********" class="secret"></span>
</td>
</tr>
}
</table>
@section Scripts{
<script>
$('.secret').each(function (index, value) {
$(value).text($(value).data('mask'));
});
$('.secret').mouseover(function () {
$(this).text($(this).data('value'))
});
$('.secret').mouseout(function () {
$(this).text($(this).data('mask'))
});
</script>
}
Controller
public ActionResult Index()
{
TestVm vm = new TestVm()
{
Games = new List<Game>()
{
new Game{ MySecret = "1234"},
new Game{ MySecret = "ABCD"},
new Game{ MySecret = "Hello World"}
}
};
return View(vm);
}
