1 
  @foreach (var item in Model)
  { 
        <img src='ShowShowcaseImage/@Html.Encode(item.ProductID)' id='@item.ProductID'  />
        <b>@Html.DisplayFor(m => item.ProductName)</b>
        <a href="#"  class="enlargeImg" id="@item.ProductID">Enlarge</a>
  }

<div id="EnlargeContent" class="content">
    <span class="button bClose"><span>X</span></span>

    <div style="margin: 10px;" id="imageContent">
    </div>

    <p align="center"></p>
</div>

// Popup javascript

$('.enlargeImg').bind('click', function (e) {
            $.post('/Home/EnlargeShowcaseImage/' + $(this).attr('id'), null, function (data) {
         document.getElementById("imageContent").innerHTML +=  data;
            });

            $('#EnlargeContent').bPopup();
 });
    });

// C＃メソッド

  public ActionResult EnlargeShowcaseImage(string id)
            {

                var imageData = //linq query for retrive bytes from database;
                StringBuilder builder = new StringBuilder();
                if (imageData != null)
                    builder.Append("<img src='" + imageData.ImageBytes + "' />");
                return Json(builder);

            }

拡大リンクをクリックすると拡大画像のポップアップを表示したい。画像はデータベースにバイト単位で保存されます。製品ごとに2つの画像がデータベースに保存されます。1つはサムネイルで、もう1つは拡大されています。サムネイル画像を表示していますが、拡大リンクをクリックすると拡大画像が表示されます。データベースから取得できません。

4

2 に答える 2

1

データベースから取得できません

それで、あなたの質問はデータベースから画像を取得することについてですよね？それは厳密にはASP.NETMVCとは何の関係もありませんか？

残念ながら、データベースへのアクセスにORMフレームワークを使用しているのか、プレーンなADO.NETを使用しているのかはわかりません。プレーンなADO.NETを使用していると仮定しましょう。

public byte[] GetImage(string id)
{
    using (var conn = new SqlConnection("YOUR CONNECTION STRING COMES HERE"))
    using (var cmd = conn.CreateCommand())
    {
        conn.Open();
        // TODO: replace the imageData and id columns and tableName with your actual
        // database table names
        cmd.CommandText = "SELECT imageData FROM tableName WHERE id = @id";
        cmd.Parameters.AddWithValue("@id", id);
        using (var reader = cmd.ExecuteReader())
        {
            if (!reader.Read())
            {
                // there was no corresponding record found in the database
                return null;
            }

            const int CHUNK_SIZE = 2 * 1024;
            byte[] buffer = new byte[CHUNK_SIZE];
            long bytesRead;
            long fieldOffset = 0;
            using (var stream = new MemoryStream())
            {
                while ((bytesRead = reader.GetBytes(reader.GetOrdinal("imageData"), fieldOffset, buffer, 0, buffer.Length)) > 0)
                {
                    stream.Write(buffer, 0, (int)bytesRead);
                    fieldOffset += bytesRead;
                }
                return stream.ToArray();
            }            
        }
    }
}

また、ORMを使用している場合は、次のように簡単にできます。

public byte[] GetImage(string id)
{
    using (var db = new SomeDataContext())
    {
        return db.Images.FirstOrDefault(x => x.Id == id).ImageData;
    }
}

次に、コントローラーアクション内で：

public ActionResult EnlargeShowcaseImage(string id)
{
    var imageData = GetImage(id);
    if (imageData != null)
    {
        // TODO: adjust the MIME Type of the images
        return File(imageData, "image/png");
    }

    return new HttpNotFoundResult();
}

<img>ボタンをクリックしたときにこのコントローラーアクションを指すタグを作成する必要があるのは、ビュー内です。

$('.enlargeImg').bind('click', function (e) {
    $('#imageContent').html(
        $('<img/>', {
            src: '/Home/EnlargeShowcaseImage/' + $(this).attr('id')
        })
    );
    $('#EnlargeContent').bPopup();
});

ただし、このようにJavaScriptでURLをコントローラーアクションにハードコーディングすることは、アプリケーションをデプロイするときに破損する可能性があるため、非常に悪い習慣です。ルートのパターンを変更する場合にも、問題が発生する可能性があります。このようなURLをハードコーディングしないでください。サーバーでこのURLを生成することをお勧めします。

たとえば、あなたがいくつかの.enlargeImage要素を購読していることがわかります。これがアンカーだとしましょう。正しく生成する方法は次のとおりです。

@Html.ActionLink("Enlarge", "EnlargeShowcaseImage", "Home", new { id = item.Id }, new { @class = "enlargeImage" })

次に、クリックハンドラーを調整します。

$('.enlargeImg').bind('click', function (e) {
    // Cancel the default action of the anchor
    e.preventDefault();

    $('#imageContent').html(
        $('<img/>', {
            src: this.href
        })
    );
    $('#EnlargeContent').bPopup();
});
于 2012-09-24T06:54:27.703 に答える
0

jQueryを試してください

これが1つの http://superdit.com/2011/06/11/hover-image-zoom-with-jquery/です

http://demo.superdit.com/jquery/zoom_hover/

于 2012-09-24T06:45:51.103 に答える