Question

NET和MVC，我正在尝试开始一个初学者项目，而且我有点卡住了。

我有数据模型，其中包含多个图片路径，我想知道如何更改我想要在按钮点击的视图中显示的图片。示例：显示图片1，单击HTML按钮，然后更改为显示图片2。

这是我到目前为止所得到的？我该如何更改picID变量？有人可以解释一下吗？

    <tr>
       <td><button type="button">Click this to change the picID variable</button></td>
       <td>@Html.DisplayFor(model => model.Picture.ElementAt(picID).picturePath)</td>
    </tr>

Answer 1

您要做的是让按钮调用一个更改picID并返回视图的操作方法。像/ controller / changepic / 1之类的东西。 Changepic会将picID更新为2，然后返回相同的视图和模型。

这里棘手的部分是按钮通常用于提交表单。所以你要么必须添加一个事件处理程序来手动设置动作链接，要么使用一个像按钮样式的锚元素（@ Html.ActionLink）。您可以使用bootstrap来执行此类样式。

我做了很多假设，但希望这会有所帮助。

Answer 2

有很多方法。看看这个：

<img id="theImage" src="" />
<ul>
    @foreach (var i in Model.Picture)
    { 
        <li><a href="#" data-image="@i.picturePath" class="change-image">@i.picturePath</a></li>
    }
</ul>
<script type="text/javascript">
    $(function () {
        //Click event for the image links
        $('.change-image').click(function (e) {
            e.preventDefault();
            e.stopPropagation();

            $('#theImage').attr('src', $(this).data('image'));
        });

        //Display the first link
        $('#theImage').attr('src', $('ul li:first-child a.change-image').data('image'));
    });
</script>

请注意，我使用的是jQuery。

如果有帮助，请告诉我。

Answer 3

我有类似的情况，我想根据组合值更改图像，所以我使用JQuery

在cshtml中我放了一个包含我的图像：

<img class="imgf"> ...
<img class="imgp"> ...
<img class="imgb"> ...

Combo Change上的Jquery代码：

var model = $("#ComboValue").val();
var pathgimgf = "/Images/" + model + "/imgf.png";
var pathimga = "/Images/" + model + "/imga.png";
var pathimgb = "/Images/" + model + "/imgb.png";


$(".imgf").attr("src", pathgimgf);
$(".imgp").attr("src", pathimga);
$(".imgb").attr("src", pathimgb);

我希望这可以帮到你。

单击HTML按钮上的MVC 5 Razor变量更改

3 个答案: