HTML按钮单击时的MVC 5 Razor变量更改答案

【问题标题】：MVC 5 Razor Variable Change on HTML Button clickHTML按钮单击时的MVC 5 Razor变量更改
【发布时间】：2014-09-02 13:11:11
【问题描述】：

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>

【问题讨论】：

标签： c# html asp.net-mvc razor

【解决方案1】：

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

这里的棘手部分是按钮通常用于提交表单。因此，您要么必须添加事件处理程序来手动设置操作链接，要么使用样式像按钮的锚元素 (@Html.ActionLink)。你可以使用bootstrap 来做那种样式。

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

【讨论】：

【解决方案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。

如果这有帮助，请告诉我。

【讨论】：

我认为我们的想法不同。 model.Picture 是多张图片的列表/数组。所以说 model.Picture.ElementAt(0).picturePath 会让我得到数组中的第一张图片。我只是不确定如何将 raazor 或 javascript 中的 picID 值更改为我仍然可以从模型中拉回的位置。在上面的示例代码中，我只是保持简单并暂时显示纯文本路径。
@CatfishAlpha45 为了能够更改视图上的当前图像，您必须将所有图像路径（您的数组）获取到 JS 对象或 HTML 结构。在我的示例中，我为每个路径创建一个链接，并在单击相应链接时更改显示的图像。你试过我的代码吗？

【解决方案3】：

我也有类似的情况，想根据combo值换一张图片，所以我用的是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);

希望对你有帮助。

【讨论】：