javascript/jquery模態彈出對話框MVC 4 /渲染局部視圖

我一直在使用DevExpress PopupControl。它們看起來不錯而漂亮，但它們不會在iOS/Android設備上顯示滾動條。所以我想提出一個替代方案。我的直接用途僅僅是顯示部分視圖，只讀和關閉按鈕。javascript/jquery模態彈出對話框MVC 4 /渲染局部視圖

我不熟悉jquery，所以我很難拼湊出關於這個主題的所有不同的帖子。

我的index.cshtml是一個包含許多不同局部視圖的門戶。部分視圖之一是客戶列表。客戶名稱是指向客戶詳細信息的鏈接。這是我需要彈出對話框的地方。

與客戶名單（注意鏈接調用javascript函數傳遞我想查看ID局部視圖：

<table style="text-align: left;"> 
    @if ((Model != null) && (Model.Items != null)) 
    { 
     foreach (WebMVC.Models.VisitDetails p in Model.Items) 
     {      
      sTime = p.StartTime.ToString("MM/dd") + " " + p.StartTime.ToShortTimeString().PadLeft(8,'_') + " - " + p.EndTime.ToShortTimeString().PadLeft(8,'_'); 

      <tr> 
       <td style="width: auto"> 
        @Html.DevExpress().HyperLink(
         settings => 
         { 
          settings.Name = "indexHyperLinkClient" + p.VisitID.ToString(); 
          settings.Properties.Text = @p.NameNumZone; 
          settings.Properties.ClientSideEvents.Click = 
           string.Format("function(s, e) {{ MethodClient('{0}'); }}", p.Account); 
         } 
        ).GetHtml() 
       </td> 
      </tr> 
     } 
    } 
</table>

在index.cshtml當前的JavaScript處理彈出：

<script type="text/javascript"> 
    var _clientId; 
    function MethodClient(clientid) { 
     _clientId = clientid; 
     popClient.PerformCallback(); 
     popClient.Show(); 
    } 

    function OnBeginCallbackClient(s, e) { 
     e.customArgs["clientid"] = _clientId; 
    } 
<script type="text/javascript">

popClient是我想要替換的當前對話框，我希望對話框是一個特定的高度，而不管內容大小如何。

partia要被顯示在對話框中升視圖：

@model WebMVC.Models.ClientDetail 

@{ 
    DateTime now = DateTime.Today; 
    int age = now.Year - Model.Birthdate.Year; 
    if (Model.Birthdate > now.AddYears(-age)) 
    { 
     age--; 
    } 

    string sBirthdate = Model.Birthdate.ToShortDateString() + " (Age: " + age + ")"; 
} 

<div id="contentDiv"> 
    <span class="display-label">@Html.DisplayNameFor(model => model.NameNumZone):</span> 
    <span class="display-field">@Html.DisplayFor(model => model.NameNumZone)</span> 
    <br /> 

    <span class="display-label">@Html.DisplayNameFor(model => model.Sex):</span> 
    <span class="display-field">@Html.DisplayFor(model => model.Sex)</span> 
    <br /> 

    <span class="display-label">@Html.DisplayNameFor(model => model.Birthdate):</span> 
    <span class="display-field">@Html.DisplayFor(model => @sBirthdate)</span> 
    <br /> 

    <span class="display-label">@Html.DisplayNameFor(model => model.Address):</span> 
    <span class="display-field">@Html.DisplayFor(model => model.Address)</span> 
    <br /> 
</div>

控制器：

public ActionResult Details() 
{ 
    string id = ""; 
    if (!string.IsNullOrEmpty(Request.Params["clientid"])) 
     id = Request.Params["clientid"]; 

    int clientid = 0; 
    if (id != "") 
     clientid = Convert.ToInt32(id); 

    ClientDetail cl; 
    if (clientid != 0) 
     ClientDetail cl = GetClientDetails(clientid); 
    else 
     ClientDetail cl = new ClientDetail(); 

    return PartialView("ClientPopupPartial", cl); 
}

我可以有一個彈出並呈現不同的局部視圖（也許通過加入硬編碼PARAM如區域= 1，面積= 2到方法客戶端調用）？或者應該爲每個細節區域（客戶，訪問，路線...）提供一個彈出窗口。

來源

2013-05-16 ginalster

在擔心多個jQuery模態之前，您是否成功地完成了第一個工作？你已經佈置的兩種情況都是可能的，但單獨的模式將是更容易的情況。重用模式可能需要jQuery ajax調用來加載彈出div。 – Jasen

@Jasen不，我不知道從哪裏開始。我可以重寫當前的JavaScript函數「MethodClient」以支持新的彈出窗口，還是必須使用控制器？我提出了「多種查詢模式」，以便從一開始就能正確設計。 – ginalster

例子有靜態對話框（無AJAX）

定義div在局部視圖你的對話內容：

@model ClientDetail 

<h2>Client Detail</h2> 
@Html.DisplayFor(m => m.NameNumZone) 
@Html.DisplayFor(m => m.Birthdate) 
...

對話觸發和局部視圖：

<a href="#" class="dialog-trigger" data-clientId="@p.Account">@p.NameNumZone</a> 
<div id="client-detail-modal"> 
    @Html.Partial("ClientDetail", Model.Item) 
</div>

Javascript：

$(document).ready(function() { 
    // setup the dialog 
    $("#client-detail-modal").dialog({ 
     modal: true, 
     autoOpen: false, 
     height: 100, 
     width: 200 
    }); 

    // bind the click event 
    $(".dialog-trigger").on("click", function(event) { 
     event.preventDefault(); 
     $("#client-detail-modal").dialog("open"); // show dialog 
    }); 
});

現在，如果您在頁面上有多個客戶端，則每個客戶端都需要一個對話框。在幾個客戶之後，它變得很難看。相反，動態填充對話內容。

動態對話框的內容（AJAX）

對話框容器爲您的部分是空的開始：

<div id="client-detail-modal"><!-- Client Partial, empty for now --></div>

通過AJAX獲取部分：

$(".dialog-trigger").on("click", function(event) { 
    event.preventDefault(); 
    var clientId = $(this).data("clientId"); 
    $.ajax({ 
     url: "Client/Details/" + clientId, 
     type: "GET", 
    }) 
    .done(function(result) { 
     $("#client-detail-modal").html(result).dialog("open"); 
    }); 
});

動態內容（無AJAX）

填充對話框的另一種方法是填充觸發器元素的data屬性，然後使用javascript替換內容。

<a href="#" class="dialog-trigger" 
    data-clientId="@p.Account" 
    data-birthdate="@p.Birthdate">@p.NameNumZone</a> 

$(".dialog-trigger").on("click", function(event) { 
    var clientId = $(this).data("clientId"); 
    var birthdate = $(this).data("birthdate"); 
    // now replace content with new values 
    $("span.birthdate").text(birthdate); 
});

來源

2013-05-16 21:14:33 Jasen

我很困惑。我有一個客戶端列表，請參閱代碼的第一部分。我沒有看到如何點擊鏈接顯示彈出窗口。 – ginalster

您將擁有一個觸發器列表。也許這[jsfiddle]（http://jsfiddle.net/jasenhk/b4BGs/）會有所幫助。 – Jasen

將這個內容在樣式表

 .modalDialog { 
      position: fixed; 
      font-family: Arial, Helvetica, sans-serif; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0; 
      background: rgba(0,0,0,0.8); 
      z-index: 99999; 
      opacity:0; 
      -webkit-transition: opacity 400ms ease-in; 
      -moz-transition: opacity 400ms ease-in; 
      transition: opacity 400ms ease-in; 
      pointer-events: none; 
     } 

     .modalDialog:target { 
      opacity:1; 
      pointer-events: auto; 
     } 

     .modalDialog > div { 
      width: 80%; 
      position: relative; 
      margin: 10% auto; 
      padding: 5px 20px 13px 20px; 
      border-radius: 10px; 
      background: #fff; 
      background: -moz-linear-gradient(#fff, #999); 
      background: -webkit-linear-gradient(#fff, #999); 
      background: -o-linear-gradient(#fff, #999); 
     } 


     .close { 
      background: #606061; 
      color: #FFFFFF; 
      line-height: 25px; 
      position: absolute; 
      right: -12px; 
      text-align: center; 
      top: -10px; 
      width: 24px; 
      text-decoration: none; 
      font-weight: bold; 
      -webkit-border-radius: 12px; 
      -moz-border-radius: 12px; 
      border-radius: 12px; 
      -moz-box-shadow: 1px 1px 3px #000; 
      -webkit-box-shadow: 1px 1px 3px #000; 
      box-shadow: 1px 1px 3px #000; 
     } 

     .close:hover { background: #00d9ff; }

，並在代碼中使用下列

 <a href="#openModal" target="">Open Modal</a> 

     <div id="openModal" class="modalDialog" data-theme="c"> 
      <div> 
       <a href="#close" title="Close" class="close" target="">X</a> 
       <h2>Pop up</h2> 
       <p>Pop up content. You can add your controls and content here</p> 
      </div> 
     </div>

這個邏輯爲我工作。希望它也適用於你。

而不是使用<a href="#close" title="Close" class="close" target="">X</a>來關閉它，而是最好導航到某個父頁面。

來源

2013-10-31 06:05:26

javascript/jquery模態彈出對話框MVC 4 /渲染局部視圖

回答

相關問題