CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-3razor
Leron
Leron

Reputation: 9856

Remove image from view page after deleting with Ajax.ActionLink

I'm working on asp.net mvc3 application with razor view. The business logic I must implement is more complicated than my answer but as you can guess my knowledge on JS/jQuery is very poor so I take this step by step.

From the controller I get a list with all the pictures I have to show in my view and then display them like this :

@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;');"
            })
        }
    }

I don't want to reload my entire view so I just want ti remove the image from the view once it's deletion is confirmed. I don't know if I could just make it hidden or something else would be better, but hope it's not that difficult of a task I just don't have much knowledge on JS/jQuery.

P.S

Here is the rendered 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>

Upvotes: 0

Views: 1641

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

I'd rather use a standard link:

@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>
    }
}

that I would unobtrusively 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>

This allows us to capture the link that was clicked inside the success callback of the AJAX request, find the closest containing div and remove it from the DOM. Obviously to avoid mixing HTML and markup it a real world application the javascript snippet shown in my answer should be placed in a separate js file that you could simply reference from your view.

Upvotes: 1

Satpal
Satpal

Reputation: 133403

In 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

function DeleteImage() {
   $(this).prev().remove(); //get previous sibling http://api.jquery.com/prev/
}

Upvotes: 1

Related Questions