图片浏览器 Asp.net MVC 5

Question

我尝试在 Asp.net MVC 5 中创建 ImageBrowser。问题是当我尝试切换到另一张图片时。 这是我的代码： 在视图中：

@model Katalog.Models.Model
@{
    Model.enumerator = 0;
    int count = Model.ImageList.Count;
    int index = 1;
}
....
<table>
    <tbody>
        <tr>
            <td> @index/@count </td>
            ....
        </tr>
        <tr>     
            @using (Html.BeginForm("previous", "Home",FormMethod.Post))
            {
                <td>
                    <input type="hidden" name="number" value="1" />
                    <input value="<" type="submit" onclick="ImageLeft()" class="buttonLeftRight"/>
                </td>
            }          
            <td>@{Html.RenderPartial("~/Views/Shared/ImageViews.cshtml", Model);}</td>                                        
            <td>
                @using (Html.BeginForm("next", "Home", FormMethod.Post))
                { 
                    @Html.HiddenFor(a => a.ImageList)
                    @Html.HiddenFor(a => a.enumerator)
                    <input type="submit"  class="buttonLeftRight" onclick="ImageRight()"/>
                }
            </td> 
        </tr>
    </tbody>
</table>
....
<script>
    function ImageRight()
    { 
        @{ Model.enumerator++; }
    }
</script>

我的控制器

....
public ActionResult next(Katalog.Models.Model model)
{
    model = MyModel;
    return View("Searcher",model);
}
....

和我的部分视图：

@model Katalog.Models.Model
<img id="foto" class="imgFinded" src="@Model.ImageList[@Model.enumerator]"/>

当我单击“下一步”按钮时，我的 model.ImageList 为空。为什么？

Answer 1

两个 Javascript 函数中的代码 @{Model.enumerator++;} 和 @{Model.enumerator--;} 是服务器端代码，因此它只会在视图在服务器上呈现时和之前执行一次传递给客户端浏览器。所以通过按下提交按钮触发 onclick="ImageRight()" 不会改变服务器端的值。

您可以尝试将当前索引发布到控制器中的操作，并根据调用的操作增加或减少它。

@using (Html.BeginForm("Next", "Home", FormMethod.Post))
{ 
    @Html.HiddenFor(a=>a.CurrentIndex)
    <input type="submit"  class="buttonRightLeft"/>
}

@using (Html.BeginForm("Previous", "Home", FormMethod.Post))
{ 
    @Html.HiddenFor(a=>a.CurrentIndex)
    <input type="submit"  class="buttonLeftRight"/>
}


public ActionResult Next(int CurrentIndex)
{
    // Get the NEXT image and return as model
    model = MyModel;
    return View("Searcher",model);
}

public ActionResult Previous(int CurrentIndex)
{
    // Get the PREVIOUS image and return as model
    model = MyModel;
    return View("Searcher",model);
}

Answer 2

您的模型ImageList 属性是null 的原因是因为您生成了一个隐藏输入@Html.HiddenFor(a => a.ImageList)，它会生成

<input name="ImageList" value="System.Collections.Generic.List[]String" .. />

它不会在 POST 方法中绑定到您的集合（当某些东西未绑定时，请始终使用表单的 name 和 value 属性控制您的生成。

为了绑定到该列表，您需要使用循环为列表中的每个项目生成一个输入。

另一个问题是您的脚本什么都不做。您的模型是服务器端代码，您不能使用 javascript 增加模型属性的值 - 您需要向控制器发送请求以执行此操作。

由于您将图像集合发送到视图，因此无需向服务器发回请求 - 您只需更新 <img> 标记的 src 属性即可。

把模型改成

public class Model
{
    public int InitialIndex { get; set; }
    public int ImageCount { get { return ImageList.Count; } }
    public List<string> ImageList { get; set; }
}

然后视图可以只是（部分是不必要的）

<img id="foto" class="imgFinded" src="@Model.ImageList[@Model.InitialIndex ]"/>
<button type="button" id="previous">Previous</button>
<button type="button" id="next">Next</button>

和脚本

var imagelist = @Html.Raw(Json.Encode(Model.ImageList));
var index = @Html.Raw(Json.Encode(Model.InitialIndex));
var max = @Html.Raw(Json.Encode(Model.ImageCount));
var image = $('#foto');

// Set the initial state of the buttons
if (index === 0) {
    $('#previous').prop('disabled', true);
} else if (index === max) {
    $('#previous').prop('disabled', true);
}

$('#next').click(function() {
    $('#previous').prop('disabled', false);
    index++;
    image.attr('src', imagelist[index]);
    if (index === max) {
        $(this).prop('disabled', true);
    }
})
$('#previous').click(function() {
    $('#next').prop('disabled', false);
    index--;
    image.attr('src', imagelist[index]);
    if (index === 0) {
        $(this).prop('disabled', true);
    }
})