使用AJAX切换部分视图

Question

In my MVC-project I have this code for rendering a partial-view:

Method:

public ActionResult ShowArtCollection()
        {
            var model = new ViewModel();
            model.ArtWorks = db.ArtWorks.ToList();

            return PartialView("_artcollection", model);
        }

AJAX:

$("#btnArt").click(function () {

        $.ajax({
            url: '/Home/ShowArtCollection',
            dataType: 'html',
            success: function (data) {
                $('#artworks').html(data);
            }
        });
    });

I would like my #btnArt to be able to toggle the partial view. I mean that when the _artcollection is rendered by the click of the button, the next click should "unrender" the view. Any tips on how to achieve this?

Answer 1

you can put a flag and check if rendered next time unrednder on click:

var rendered = false;
$("#btnArt").click(function () {

    if (!rendered) {

        $.ajax({
            url: '/Home/ShowArtCollection',
            dataType: 'html',
            success: function (data) {
                $('#artworks').html(data);
                rendered = true;
            }
        });
    } else {
        $('#artworks').html("");
        rendered = false;
    }

});

this will do the trick for you.