Load partial view in a modal pop-up window using jquery

Question

I have images that are loaded from database. When I click on an image, I want to show that image in a Modal Pop-up. My problem is that, I am not able to call the partial view from jquery. In fact, that action is not getting called from JQuery. Please help... I am a fresher. Below is my code:

_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>

Partial view

@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")');
            }
        });


    });
});

Controller

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);
}

score 1 · Answer 1 · answered Oct 01 '14 at 18:59

1

it may be a bit late but if you check out this blog, and download his code, you will see his use of jquery to create a modal pop up from a partial view.

answered Oct 01 '14 at 18:59

Fylix

2,551
6
45
72

Load partial view in a modal pop-up window using jquery

1 Answers1