"HTML 帮助程序"复选框"Display Image"

Question

所以我对html helper或Razor语法不是很熟悉。我确信有一种方法可以做到我正在尝试做的这两件事，但我不完全确定。通过控制器可能更容易，但我想在视图中尝试一下。下面是一些代码:

<img src="@Url.Content(Model.Photo)" alt="@Model.AlternateText" />

所以这完美地显示了我想要的图像。现在我想添加一个框，用户可以选中或取消选中，这基本上会使图像可见或不可见。是否有一种方法，以某种方式集成html复选框助手到我的img?我想大概是这样的……

@Html.CheckBox("Photos", "Show Image")
<img src="@Url.Content(Model.Photo)" alt="@Model.AlternateText" />

谢谢!

Answer 1

尽管您的Html.CheckBox语法是关闭的，但您所拥有的将工作到方程式的HTML部分。第二个参数是一个布尔值，表示是否应该首先检查它。如果你想让"Show Image"出现在它的旁边，你只需要把文本放在视图中，最好用一个标签把整个文本包裹起来:

<label>@Html.CheckBox("Photos", false) Show Image</label>

现在，就显示和隐藏图像而言，需要使用JavaScript。我给了你jQuery版本，因为它更简单，默认情况下带有MVC:

<script>
    $(document).ready(function () {
        $('#Photos').on('click', function () {
            if ($(this).is(':checked')) {
                $('#Image').show();
            } else {
                $('#Image').hide();
            }
        });
    });
</script>

注意:基于将第一个参数"Photos"传递给Html.CheckBox，结果输入将具有"Photos"的名称和id属性，允许您通过该id选择它。如果你改变了这个值，你需要相应地更新JS。此外，该代码假定在img标记中添加了一个id为"Image"的标签。你可以使用任何你想要的，但是同样，要相应地更新JS。

Answer 2

我猜有两种方法可以做到这一点(我假设你想要能够重用这个功能，因此问题是要避免大量的复制/粘贴代码):

1)创建一个局部视图，在该视图中传递所需的数据。

2)创建一个Html Helper来为你创建Html。要么扩展现有的复选框helper，要么创建自己的复选框helper。

现在一切都取决于你最熟悉哪一个。

部分视图可能是最容易开始的，然后如果你想的话，你也可以构建html帮助器。

对于切换，我想你将需要一些简单的javascript来做一些显示隐藏，这可以做得相当简单，要么使用现有的框架，如bootstrap或一些简单的jquery所有你需要做的是有一个参考的图像标签的复选框，以便它知道，当它被选中，图像应该改变状态。

如果你需要一些代码样本，让你更好地了解我想说什么，然后让我知道，我会看到我敲作为一个例子。