asp.net-mvc-3 - flexslider 2 动态添加新图像以在轮播中滑动

Question

我有一张带有一些图片的幻灯片的页面。我现在需要的是在没有回发的情况下在轮播幻灯片上添加新图像。我的代码是这个

弹性滑块

  $(window).load(function() {
$('.flexslider').flexslider({
  animation: "slide",
  controlsContainer: ".flex-container",
  start: function(slider) {
    $('.total-slides').text(slider.count);
  },
  after: function(slider) {
    $('.current-slide').text(slider.currentSlide);
  }
});

ajax代码

  $.ajax({
    url: '@Url.Action("LoadCarrusel","picture",new { @id =  @Model.Propertyid })',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
        var flexslider = document.getElementById("flexslider");
       // process the data coming back
        $.each(data, function (index, item) {

            var link = "../../Content/Uploaded-img/" + item;
            var imag = document.createElement("img");
            imag.setAttribute("src", link);

            var newpicture = document.createElement("li");

            var newpictureItem = document.createTextNode(imag);
            newpicture.appendChild(imag);           
            flexslider.appendChild(newpicture);              

        });
    },

    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
    }

});

传递数据json的控制器是

 public ActionResult LoadCarrusel(long id)
    {
        var routes = from s in db.Picture
                     where s.IdProp == id
                     select s.Location;


        return Json(routes, JsonRequestBehavior.AllowGet);
    }