我正在尝试将值绑定到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>
之外我可以看到值绑定