我正在尝试构建一个登录页面,但是当我尝试添加一些 C# 代码将眼睛图标从关闭更改为打开时。这是为了显示密码。问题是我认为我的 C# 代码没有被调用。
@page "/"
<form>
<div class="head-container">
<label class="head-label" >Login</label>
<div class="username-container">
<label class="username-label" >Username</label>
<input type="text" class="username-input" />
</div>
<div class="password-container">
<label class="password-label" >Password</label>
<div class="passwordInp-container" >
<input type="password" class="password-input" id="password-input" />
<!-- This is the Image im trying to change -->
<img src="@imageURL" class="password-eye" @onclick="ShowPassword" id="eye"/>
</div>
</div>
<input type="submit" value="Submit" class="submit-button" />
<p class="newUserPassword"><a href="" class="aTag">Register</a></p>
</div>
</form>
@code {
public string imageURL = "/media/eye-closed.ico";
public void ShowPassword()
{
Console.WriteLine("ShowPassword method called");
if (imageURL == "/media/eye-closed.ico")
{
imageURL = "/media/eye-open.ico";
}
else
{
imageURL = "/media/eye-closed.ico";
}
}
}
感谢您提前提供的任何帮助!
我尝试在函数中包含 Console.WriteLine(),但即使这样也不会显示。但是 imageURL 变量被设置为所需的路径,因此代码正在运行,而不是函数。
我刚刚测试了这个,你发布的代码对我有用。
你确定eye-close.ico和eye-open.ico不是同一个图片吗?
执行以下操作怎么样:
@code {
public string imageURL = "/media/eye-closed.ico";
public void ShowPassword()
{
if (imageURL == "/media/eye-closed.ico")
{
imageURL = "";
}
else
{
imageURL = "/media/eye-closed.ico";
}
}
}
这是否会使图像在点击时消失?
(本来可以将此作为评论发布,但显然需要更多代表才能做到这一点)