0

私はかみそりビューでasp.net mvc3アプリケーションに取り組んでいます。私が実装しなければならないビジネス ロジックは、私の答えよりも複雑ですが、JS/jQuery に関する私の知識は非常に乏しいので、これを段階的に進めていきます。

コントローラーから、ビューに表示する必要があるすべての写真のリストを取得し、次のように表示します。

@foreach (var image in ViewBag.DocumentPicture)
    {
        if (image != null)
        { 
            <img src="file:\\5.3.2.7\upload\@image.Name" alt="docImg" style="width: 190px; height: auto"/>
            @Ajax.ActionLink("Delete", "DeletePicture", new { documentImageID = image.Id },
            new AjaxOptions
            {
                Confirm = "Are you sure?",
                //OnComplete = "$('#blah').attr('src', '#').attr('style', 'display:none;'); $('#Image1').attr('src', '#').attr('style', 'display:none;'); $('#DelPic').attr('style', 'display:none;');"
            })
        }
    }

ビュー全体をリロードしたくないので、削除が確認されたらビューから画像を削除したいだけです。私はそれを作ることができるのか、それとももっと良いものになるのかわかりませんhiddenが、JS/jQueryに関する知識があまりないので、それほど難しい作業ではないことを願っています.

PS

レンダリングされた HTML は次のとおりです。

<div id="document-image-gallery">
<img src="file:\\5.3.2.7\upload\10005\docPicTest1.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=26">Delete</a>            
<img src="file:\\5.3.2.7\upload\10005\docPicTest2.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=27">Delete</a>            
<img src="file:\\5.3.2.7\upload\10005\docPicTest3.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=28">Delete</a>            
<img src="file:\\5.3.2.7\upload\10005\docPicTest4.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=29">Delete</a>            
<img src="file:\\5.3.2.7\upload\10005\docPicTest5.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=30">Delete</a>
</div>
4

2 に答える 2

1

標準のリンクを使用したい：

@foreach (var image in ViewBag.DocumentPicture)
{
    if (image != null)
    {
        <div>
            <img src="file:///5.3.2.7/upload/@image.Name" alt="docImg" style="width: 190px; height: auto" />
            @Html.ActionLink("Delete", "DeletePicture", new { documentImageID = image.Id }, new { @class = "delete" })
        </div>
    }
}

目立たないようにAJAXifyすること：

<script type="text/javascript">
    $(document).on('click', '.delete', function() {
        if (confirm('Are you sure?')) {
            $.ajax({
                url: this.href,
                type: 'POST',
                context: this,
                success: function(result) {
                    $(this).closest('div').remove();
                }
            });
        }
        return false;
    })
</script>

これにより、AJAX リクエストの成功コールバック内でクリックされたリンクをキャプチャし、最も近い div を見つけて DOM から削除することができます。明らかに、HTML を混在させずに実際のアプリケーションにマークアップするために、私の回答に示されている JavaScript スニペットは、ビューから簡単に参照できる別の js ファイルに配置する必要があります。

于 2013-06-03T09:07:41.960 に答える
1

CSHTMLで

@foreach (var image in ViewBag.DocumentPicture)
{
    if (image != null)
    { 
        <img src="file:\\5.3.2.7\upload\@image.Name" alt="docImg" style="width: 190px; height: auto"/>
        @Ajax.ActionLink("Delete", "DeletePicture", new { documentImageID = image.Id },
        new AjaxOptions
        {
            Confirm = "Are you sure?",
            OnComplete = "DeleteImage"
        })
    }
}

JavaScript関数

function DeleteImage() {
   $(this).prev().remove(); //get previous sibling http://api.jquery.com/prev/
}
于 2013-06-03T09:07:11.983 に答える