Question

我有从数据库加载的图像。当我点击图像时，我想在模态弹出窗口中显示该图像。我的问题是，我无法从jquery调用部分视图。事实上，这个动作不是从JQuery调用的。请帮忙...我是一个新鲜的。以下是我的代码：

_Layout.cshtml

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Layout</title>

    @Styles.Render("~/bundle/ProfileStyle")    
    @Scripts.Render("~/bundle/JQuery")
    @Scripts.Render("~/bundle/JQueryUI")
    @Scripts.Render("~/bundle/CustomJS")
</head>
<body>
    <div>
        @RenderBody()
    </div>
    <div id="dialog">
        @Html.Partial("_ProfileDetail")
    </div>
</body>
</html>

Index.cshtml

@model IEnumerable<Profile.Models.TestProfile>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<div class="tableOuterBlock">
    @foreach (var item in Model)
    {
        <div class="tableInnerBlock">
            <span>
                @*<a href="@Url.Action("Edit", "Profile", new {@item.upi_Id})">*@
                    <img id="imgOpenDialog" src="@Url.Content(@item.upi_ImgData)" alt="No Image" width="100" height="100" />
                @*</a>*@
            </span>            
        </div>
    }
</div>

部分视图

@model Profile.Models.TestProfile
<div>
    @if(Model != null)
    {
        <img id="imgOpenDialog" src="@Url.Content(@Model.upi_ImgData)" alt="No Image" width="80%" height="50%" />
    }
</div>

JQuery的

$(function () {
    $("[id*=imgOpenDialog]").click(function () {
        var imgDetail = $(this).prop("src");        
        $("#dialog").dialog({
            autoOpen: true,
            position: { my: "center" },
            modal: true,
            resizable: false,
            open: function () {
                //parameter to c# function
                data: { strImg = imgDetail }
                $(this).load('@Url.Action("ShowProfileDetail","Profile")');
            }
        });


    });
});

控制器

public PartialViewResult ShowProfileDetail(string strImg)
{
    strImg = strImg.Substring(strImg.IndexOf('/'));
    List<TestProfile> tpList = db.TestProfiles.Where(x => x.upi_ImgData ==strImg).ToList();
    TestProfile testProfile = db.TestProfiles.Find(tpList[0].upi_Id);
    return PartialView("_ProfileDetail", testProfile);
}

Answer 1

可能有点晚了但是如果你查看这个blog并下载他的代码，你会看到他使用jquery从局部视图创建一个模态弹出窗口。

使用jquery在模态弹出窗口中加载局部视图

1 个答案: