彈出窗口不會在MVC中彈出

我試圖讓一個彈出窗口出現在MVC頁面的鏈接中，但彈出窗口不彈出。部分視圖只是替換瀏覽器中的當前頁面。爲什麼不只是離開我的當前頁面並給我一個彈出窗口？我的部分觀點只有幾個字的文字。彈出窗口不會在MVC中彈出

@Ajax.ActionLink(
    "Open popup", 
    "GetNotes", 
    new { id = "5" }, 
    new AjaxOptions 
     { 
      HttpMethod = "GET", 
      UpdateTargetId = "result", 
      InsertionMode = InsertionMode.Replace, 
      OnSuccess = "openPopup" 
     }) 

<br /> 

<div id="result" style="display:none;"></div> 

<script type="text/javascript"> 
    $("#result").dialog({ 
     autoOpen: false, 
     title: 'Title', 
     width: 500, 
     height: 'auto', 
     modal: true 
    }); 

    function openPopup() { 
     $("#result").dialog("open"); 
    } 

</script>

UPDATE：

下面是完整的源（從「查看源文件」），目前我正在努力。當我點擊鏈接時，沒有任何反應。這是怎麼回事？我錯過了一個js文件或者什麼？

順便說一句，這個網址傳回我的局部視圖（純文本目前只是一對夫婦的話）：

http://localhost:40353/Quote/GetNotes/5

下面的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> 
     <script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 
     <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script> 
     <script src="/Scripts/people.js" type="text/javascript"></script> 
     <script src="/Scripts/kendo.web.min.js" type="text/javascript"></script> 
     <script src="/Scripts/console.js" type="text/javascript"></script> 
     <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script> 
     <script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> 

     <link href="/Styles/Site.css" rel="stylesheet" type="text/css" /> 
     <link href="/Styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> 
     <link href="/Styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> 
     <link href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" /> 
    </head> 

    <body> 
<div id="result" style="display:none;"></div> 

<a href="#" id="OpenPopup"> open popup </a> 

     <script type="text/javascript"> 
       $("#result").dialog({ 
        autoOpen: false, 
        title: 'Title', 
        width: 500, 
        height: 'auto', 
        modal: true 
       }); 

       $("#OpenPopup").click(function() { 
        $("#result").dialog("open"); 
        $("#result").load("Quote/GetNotes/5"); 
       }); 
     </script> 

    </body> 
</html>

來源

2012-05-18 birdus

原因的局部視圖替換您在瀏覽器中的視圖是@ Ajax.ActionLink在瀏覽器中呈現爲已形成的標記。所以當你點擊鏈接時，你的確是。

我推測你想要做的是打開彈出窗口並將局部內容放入彈出窗口中？

有幾種方法可以實現這一點。

您的ActionLink更改爲常開彈出

<a href="#" id="OpenPopup"> open popup </a>

並添加此功能

$("#OpenPopup").click(function() { 
     $("#result").dialog("open"); 
     // This is a neat wrapper that does a get request to the url specified and loads the html into the target div 
     $("#result").load("/GetNotes/5"); 
    });

來源

2012-05-18 18:01:27 Eilimint

試過這個，但是當我點擊鏈接時什麼也沒有發生。 jquery-1.5.1.min.js包含在調用頁面中。 – birdus

我爲你創建了一個例子：http://jsfiddle.net/noel_js/6PPN7/5/ – Eilimint

我認爲你缺少參照「jquery.unobtrusive-ajax.min.js」腳本文件在佈局（主）頁面的<head>部分。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

來源

2012-05-18 18:03:39

好的電話，Kapil。現在我正在取得進展。刪除style =「display：none;」後從div中添加您向我展示的參考，GET正在發生，div顯示它，但它僅顯示鏈接下方的局部視圖，而不是彈出窗口。 – birdus

檢查你的控制器，是行動方法GetNotes（）返回部分視圖？ –

檢查以及在_layout底部：

</div> 
    </div> 
    </footer> 

    @Scripts.Render("~/bundles/jquery") 
    @RenderSection("scripts", required: false) 
</body>

刪除

@Scripts.Render("~/bundles/jquery")

和模態彈出運行。

來源

2014-05-08 10:46:20 ValMangul

彈出窗口不會在MVC中彈出

回答

相關問題