Question

所以我对html帮助器或Razor语法不是很熟悉。我确定有办法做我正在尝试做的那两个，但我不完全确定。通过Controller可以更容易地做到这一点，但我想在视图中试一试。这是一些代码：

<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部分之外，您所拥有的内容将会有效。第二个参数是布尔值，表示是否应该初始检查它。如果你想要＆＃34;显示图像＆＃34;要显示在旁边，您需要将文本放在视图中，最好用标签包裹整个shebang：

<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>

注意：基于传递＆＃34;照片＆＃34;的第一个参数。到Html.CheckBox，结果输入将具有＆＃34;照片＆＃34;的名称和ID属性。允许您通过该ID选择它。如果更改此值，则需要相应地更新JS。此外，该代码假定添加一个ID为＆＃34; Image＆＃34;到你的img标签。您可以随意使用任何内容，但请再次更新JS。

Answer 2

我想有两种方法可以解决这个问题（我假设您希望能够重复使用此功能，因此避免大量复制/粘贴代码的问题）：

1）创建一个局部视图，您可以在其中传递此视图所需的数据。

2）创建一个Html Helper，为您创建html。扩展现有的复选框助手或创建自己的复选框助手。

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

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

对于切换，我想你需要一些简单的javascript来做一些show hide，这可以通过使用现有的框架（如bootstrap或一些简单的jquery）完成，你需要做的就是拥有图像的引用标记到复选框，以便它知道在检查图像应该更改状态时。

如果您需要一些代码示例，以便更好地了解我想说的内容，请告诉我，我会看到我将其作为一个例子。

Html助手复选框“显示图像”

2 个答案: