如何根据图片点击打开局部视图?
How to open a partial view based on the image click?
我写信给你是因为我有点迷茫。
我想创建一个页面,其中有 3 张图片,每张图片都可以点击。
当我点击其中一张图片时,在同一页面上它应该显示局部视图。
如果我点击另一张图片,所有其他局部视图应该消失,并且只显示所需的局部视图。
我了解到,为了调用局部视图,命令行应该是:
@{
Html.RenderPartial("_Android");
}
<div class="container-fluid">
<h2>MDMSection</h2>
<p>The .thumbnail class can be used to display an image gallery.</p>
<p>The .caption class adds proper padding and a dark grey color to text inside thumbnails.</p>
<p>Click on the images to see all Q&A</p>
<div class="row">
<div class="col-md-4">
<img id="imgReloader" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
<div class="caption">
<p>Android</p>
</div>
</div>
<div class="col-md-4">
<img id="image2" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
<div class="caption">
<p>iOS</p>
</div>
</div>
<div class="col-md-4">
<img id="image3" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
<div class="caption">
<p>Windows Phone</p>
</div>
</div>
</div>
我的部分通过应该出现在这里......
将 "onClick" 添加到调用函数的 img 标签中
像这样:
<h2>MDMSection</h2>
<p>The .thumbnail class can be used to display an image gallery.</p>
<p>The .caption class adds proper padding and a dark grey color to text
inside thumbnails.</p>
<p>Click on the images to see all Q&A</p>
<div class="row">
<div class="col-md-4">
<img id="imgReloader" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('imgReloader')" />
<div class="caption">
<p>Android</p>
</div>
</div>
<div class="col-md-4">
<img id="image2" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('image2')" />
<div class="caption">
<p>iOS</p>
</div>
</div>
<div class="col-md-4">
<img id="image3" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('image3')" />
<div class="caption">
<p>Windows Phone</p>
</div>
</div>
您还需要在代码中添加 three 分部标记。
为每个可以动态创建的部门标签使用正确的 id
例如 "your Image's ID" + "DIV"
<div id="imgReloaderDiv" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 IMGDIV " style="display: none;"> </div>
<div id="image2Div" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 IMGDIV " style="display: none;"> </div>
<div id="image3Div" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 IMGDIV " style="display: none;"> </div>
"ShowPartial()"函数应该是这样的:
<script>
function ShowPartial(ImgID) {
$.ajax({
cache: false,
type: "Get",
contentType: 'application/json',
url: "@Url.Action("GetPartial", "your controller")",
// send your data
data: { firstData: "FirstValue", secondData: "SecondValue" },
success: function (data) {
$(".IMGDIV").slideUp();
$("#" + ImgID + "Div").html(data);
$("#" + ImgID + "Div").slideDown("slow");
},
error: function (xhr, ajaxOptions, thrownError, data) {
alert(xhr.responseText);
}
});
}
</script>
在你的控制器中:
public ActionResult GetPartial(string firstData, string secondData)
{
//write needed codes
return PartialView("_Android", model);
}
我写信给你是因为我有点迷茫。
我想创建一个页面,其中有 3 张图片,每张图片都可以点击。
当我点击其中一张图片时,在同一页面上它应该显示局部视图。
如果我点击另一张图片,所有其他局部视图应该消失,并且只显示所需的局部视图。
我了解到,为了调用局部视图,命令行应该是:
@{
Html.RenderPartial("_Android");
}
<div class="container-fluid">
<h2>MDMSection</h2>
<p>The .thumbnail class can be used to display an image gallery.</p>
<p>The .caption class adds proper padding and a dark grey color to text inside thumbnails.</p>
<p>Click on the images to see all Q&A</p>
<div class="row">
<div class="col-md-4">
<img id="imgReloader" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
<div class="caption">
<p>Android</p>
</div>
</div>
<div class="col-md-4">
<img id="image2" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
<div class="caption">
<p>iOS</p>
</div>
</div>
<div class="col-md-4">
<img id="image3" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
<div class="caption">
<p>Windows Phone</p>
</div>
</div>
</div>
我的部分通过应该出现在这里......
将 "onClick" 添加到调用函数的 img 标签中 像这样:
<h2>MDMSection</h2>
<p>The .thumbnail class can be used to display an image gallery.</p>
<p>The .caption class adds proper padding and a dark grey color to text
inside thumbnails.</p>
<p>Click on the images to see all Q&A</p>
<div class="row">
<div class="col-md-4">
<img id="imgReloader" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('imgReloader')" />
<div class="caption">
<p>Android</p>
</div>
</div>
<div class="col-md-4">
<img id="image2" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('image2')" />
<div class="caption">
<p>iOS</p>
</div>
</div>
<div class="col-md-4">
<img id="image3" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('image3')" />
<div class="caption">
<p>Windows Phone</p>
</div>
</div>
您还需要在代码中添加 three 分部标记。
为每个可以动态创建的部门标签使用正确的 id
例如 "your Image's ID" + "DIV"
<div id="imgReloaderDiv" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 IMGDIV " style="display: none;"> </div>
<div id="image2Div" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 IMGDIV " style="display: none;"> </div>
<div id="image3Div" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 IMGDIV " style="display: none;"> </div>
"ShowPartial()"函数应该是这样的:
<script>
function ShowPartial(ImgID) {
$.ajax({
cache: false,
type: "Get",
contentType: 'application/json',
url: "@Url.Action("GetPartial", "your controller")",
// send your data
data: { firstData: "FirstValue", secondData: "SecondValue" },
success: function (data) {
$(".IMGDIV").slideUp();
$("#" + ImgID + "Div").html(data);
$("#" + ImgID + "Div").slideDown("slow");
},
error: function (xhr, ajaxOptions, thrownError, data) {
alert(xhr.responseText);
}
});
}
</script>
在你的控制器中:
public ActionResult GetPartial(string firstData, string secondData)
{
//write needed codes
return PartialView("_Android", model);
}