使用jquery在模態彈出窗口中加載部分視圖

我有從數據庫加載的圖像。當我點擊一張圖片時，我想在一個Modal Pop-up中顯示該圖片。我的問題是，我無法從jquery調用部分視圖。事實上，這個動作並沒有從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); 
}

來源

2014-03-14 Praveen Xavier

它可能有點晚了，但如果你看看這個blog，並下載他的代碼，你會看到他的使用jQuery的創建模態從局部視圖彈出。

來源

2014-10-01 18:59:21 Fylix

使用jquery在模態彈出窗口中加載部分視圖

回答

相關問題