在asp.net mvc

时间:2016-11-25 03:31:43

标签: c# ajax asp.net-mvc flexslider

我正在尝试将值绑定到partialview模式弹出窗口以将数据显示为flexslider图库。

我有_Layout页面,在该布局中我包含_partialview布局,使用此部分视图 _layout 我正在显示模态弹出窗口。

在主 _layout 页面中输入该部分视图,如下所示

<div class="modal fade" tabindex="-1" role="dialog" id="image_slider">
        @Html.Partial("~/Views/Shared/_ImageGalleryPartialView.cshtml", new ProjectName.ViewModels.ImageViewModel())
</div>

这是用于在控制器方法

上调用函数的ajax调用
        // Ajax Call

        $.ajax({
            url: 'ImageGallery',
            contentType: 'application/html; charset=utf-8',
            data: { some_parameter_values },
            type: 'GET',
            dataType: 'html'
        })
          .success(function (result) {
              $('#image_slider').html(result);                            
              $("#image_slider").modal("show");
          })
         .error(function (xhr, status) {
             alert(status);
         })

这是我用来提供这个模型弹出窗口的控制器方法,如果这个工作正常,我应该得到带有案例ID的图像列表

[HttpGet]
public PartialViewResult ImageGallery(some_parameter_values)
{
    try
    {    
        ImageViewModel listofimage = new ImageViewModel();
        ...
    }           

        return PartialView("_ImageGalleryPartialView", listofimage);   

    }
    catch (Exception)
    {
        throw;
    }

}

ImageViewModel.cs

public class ImageViewModel
{
    public ImageViewModel() 
    {
       ImageValues = new List<Images>();         
    }

    public IList<Images> ImageValues { get; set; }
}

public class Images
{
    public string ImageName { get; set; }
    public string ImageValue { get; set; }
}

我有一个partilview模式弹出窗口如下

_ImageGalleryPartialView.cshtml

@model ProjectName.ViewModels.ImageViewModel

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header"> </div>

        <div class="modal-body" style="width: 530px;">

            <div id="slider_view" style="display: block;">
                <div class="flexslider">
                    <ul class="slides">
                    @for (int item = 0; item < Model.ImageValues.Count; item++)
                     {
                     <li data-thumb="~/Upload_Images/@Model.ImageValues[item].ImageValue">
                     <img src="~/Upload_Images/@Model.ImageValues[item].ImageValue" data-imagedata="@Model.CCDImageValues[item].ImageName" />
                     <p class="flex-caption">@Model.ImageValues[item].ImageName</p>
                    </li>
                     }
                   </ul> 
        </div>
      </div>
            <div id="grid_view" style="display: none;">
        <div class="row">
                 @for (int griditem = 0; griditem < Model.ImageValues.Count; griditem += 3)
                 {
                  <div class="col-lg-12 pad-6">
                     @for (int loopvalue = 0; ((loopvalue < 3) & (loopvalue < Model.ImageValues.Count)); loopvalue++, griditem++)
                     {
                        <div class="col-lg-4 pad-0">
                           <img src="~/Upload_Images/@Model.ImageValues[griditem].ImageValue" width="170px" />
                           <span class="span-mark">@Model.ImageValues[griditem].ImageName</span>
                       </div>
                    }
                 </div>
                }

        </div>
    </div>
     </div>
    </div>
</div>

但是这个输出没有正确绑定,如何在ajax调用成功事件中将ajax绑定到这个模型

.success(function (result) {
                  $('#image_slider').html(result);                            
                  $("#image_slider").modal("show");
              })

当我在

中插入内容时
<div class="modal-body" style="width: 530px;">
@for (int item = 0; item < Model.ImageValues.Count; item++) 
{ 
  @Model.ImageValues[item].ImageName
}
</div>

但在<div id="grid_view" style="display: none;"></div><div id="slider_view" style="display: block;"></div>之外我可以看到值绑定

0 个答案:

没有答案