Question

通过一些研究，我发现如何通过单击存储在单独文件夹中的缩略图来显示完整图像。如果您只指向一个文件夹但我有多个图像文件夹需要打开，因为存储了大量图像，代码工作正常。我所做的是为此创建一个ASP：TreeView。以前，当我用不同的方式编码时，我只能输入enter：

string textVal = TreeView2.SelectedValue;             
(Server.MapPath("~/images/Thumbs/" + textVal));

现在看来并不适合我。我认为对于JQuery我只能使用.replace但是对于C＃我尝试了一些东西，但它们似乎都没有用。（请注意，如果你要批评，请节省你的时间，不要。我们大多数人都来这里寻求帮助和学习，不要被压制和沮丧，谢谢：]）

protected void Page_Load(object sender, EventArgs e)
{
        string textVal = TreeView2.SelectedValue;
        Repeater1.Visible = true;

        List<MyImages> myImages = new List<MyImages>();
        DirectoryInfo DI = new DirectoryInfo(Server.MapPath("~/images/Thumbs/Fall/2006/"));
        foreach (var file in DI.GetFiles())
        {
            myImages.Add(new MyImages { FileName = file.Name });
        }
        Repeater1.DataSource = myImages;
        Repeater1.DataBind();

}

public class MyImages
{
    public string FileName { get; set; }
}

<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#ImageGallery img').click(function () {
            var fullImg = '/images/Fall/2006/' + $(this).attr('alt');
            $('#fullImg').attr('src', fullImg);
        });
    });

    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <img src='/images/Thumbs/Fall/2006/<%#Eval("FileName") %>' alt='<%#Eval("FileName") %>' width="100px" style="cursor: pointer" /
        </ItemTemplate>
    </asp:Repeater>

Answer 1

我认为很多人都不会看到这个帖子，但我会告诉我在弄乱了很长时间之后我是怎么想出来的。

    protected void Page_Load(object sender, EventArgs e)
{
        string textVal = TreeView2.SelectedValue;

        Repeater1.Visible = true;

        List<MyImages> myImages = new List<MyImages>();
        DirectoryInfo DI = new DirectoryInfo(Server.MapPath("~/images/Thumbs/" + textVal));           

        foreach (var file in DI.GetFiles())
        {
            myImages.Add(new MyImages { FileName = textVal + "/" + file.Name });
        }

        Repeater1.DataSource = myImages;
        Repeater1.DataBind();        
}

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#ImageGallery img').click(function () {
            var fullImage= $(this).attr('alt');
            //var fullImage= $(this).attr('alt');
            $('#fullImage').attr('src', fullImage);
        });
    });

                                <asp:Repeater ID="Repeater1" runat="server">
                                    <ItemTemplate>                                           
                                        <img src='images/thumbs/<%#Eval("FileName") %>' alt='images/<%#Eval("FileName") %>'/>
                                    </ItemTemplate>
                                </asp:Repeater>

使用数据绑定加载数据绑定图像和拇指onClick

1 个答案: