2012-06-26 2 views
0

Я открываю диалоговое окно со следующим: Это мой Appliation Details.cshmtlвкладок JQuery не работает в диалоговом окне, как частичный вид

<script type="text/javascript"> 
$.ajaxSetup({ cache: false }); 

$(document).ready(function() { 
    $(".display tr:odd").addClass("odd"); 
    $(".display tr:even").addClass("even"); 

    //modal popup 
    $("#dialog-confirm").dialog({ 
     autoOpen: false, 
     resizable: false, 
     height: 200, 
     width: 400, 
     modal: true, 
     buttons: { 
      "Delete": function() { 
       $(this).dialog("close"); 
       $('#deleteApplication').submit(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $(".deleteLink").click(function (e) { 
     e.preventDefault(); 
     $("#dialog-confirm").dialog("open"); 
    }); 

    $(".openDialog").live("click", function (e) { 
     e.preventDefault(); 

     $("<div></div>") 
      .addClass("dialog") 
      .attr("id", $(this).attr("data-dialog-id")) 
      .appendTo("body") 
      .dialog({ 
       title: $(this).attr("data-dialog-title"), 
       close: function() { $(this).remove() }, 
       modal: true, 
       width: "90%", 
       height: "500", 
       buttons: { 
        "Close": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }) 
      .load(this.href); 
    }); 

    $(".close").live("click", function (e) { 
     e.preventDefault(); 
     $(this).closest(".dialog").dialog("close"); 
    }); 

}); 
</script> 

<div class="tabset"> 
    <ul class="tab_labels"> 
     <li><span>Details</span></li> 
     <li><span>Versions</span></li> 
     <li><span>History</span></li> 
     <li><span>Log</span></li> 
    </ul> 
    <div class="tab_content"> 
     <table id="detailsView" class="display"> 
      <tbody> 
       <tr> 
        <td>@Html.LabelFor(model => model.ApplicationName)</td> 
        <td>@Html.DisplayFor(model => model.ApplicationName)</td> 
       </tr> 
       <tr> 
        <td>@Html.LabelFor(model => model.Description)</td> 
        <td>@Html.DisplayFor(model => model.Description)</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="tab_content"> 
     @Html.Partial("_Versions", versions, new ViewDataDictionary {{ "applicationId", Model.ApplicationId}}) 
    </div> 
    <div class="tab_content"> 
     @Html.Partial("_RecordHistory", history) 
    </div> 
    <div class="tab_content"> 
     @Html.Partial("_RecordLog", log) 
    </div> 
</div> 
<br /> 
<div class="button_wrapper_center"> 
    <a href="@Url.Action("Index", "Application")" class="button_black_medium"><span style="white-space:nowrap;">Return to List</span></a> 
</div> 
<div id="dialog-confirm" title="Delete the item?" style="display:none" > 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p> 
</div> 

частичного вида _Versions содержит ссылку, чтобы открыть диалоговое Это _Versions.cshtml

@model IEnumerable<WebDevelopment.SqlData.Version> 

@{ 
    var applicationId = ViewData["applicationId"]; 
    } 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var recordId; 

     $(".deleteVersionLink").click(function (e) { 
      e.preventDefault(); 
      var frm = $(this); 
      recordId = frm.attr("id"); 
      $("#dialog-confirmVersion").dialog("open"); 
     }); 

     $("#dialog-confirmVersion").dialog({ 
      autoOpen: false, 
      resizable: false, 
      height: 200, 
      width: 400, 
      modal: true, 
      buttons: { 
       "Delete": function() { 
        $("#deleteVersion" + recordId).submit(); 
        $(this).dialog("close"); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

     $('#versions').dataTable({ 
      "bFilter": false, 
      "bPaginate": false, 
      "bInfo": false, 
      "bSort": false 
     }); 
    }); 
</script> 
<table> 
    <tr> 
     <td> 
      <a href="@Url.Action("Create", "Version", new { applicationId = applicationId })" class="button_black_medium"><span style="white-space:nowrap;">Create New</span></a> 
     </td> 
    </tr> 
</table> 
<table cellpadding="0" cellspacing="0" border="0" class="display" id="versions"> 
    <thead> 
     <tr> 
      <th> 
       @Html.LabelFor(p => Model.FirstOrDefault().VersionNumber) 
      </th> 
      <th> 
       @Html.LabelFor(p => Model.FirstOrDefault().ReleaseDate) 
      </th> 
      <th> 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var item in Model) 
     { 
      <tr> 
       <td> 
        @Html.ActionLink(item.VersionNumber, "Details", "Version", new { id = item.VersionId }, new { @class = "openDialog", data_dialog_id = "detailsDialog", data_dialog_title = "Version Details" }) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.ReleaseDate) 
       </td> 
       <td> 
        @Html.ActionLink("Edit", "Edit", "Version", new { id = item.VersionId }, null) | 
        @Html.ActionLink("Delete", "DeleteConfirmed", "Version", new { id = item.VersionId }, new { @class = "deleteVersionLink", @id = item.VersionId }) 
        @using (Html.BeginForm("DeleteConfirmed", "Version", new { id = item.VersionId }, FormMethod.Post, new { @id = "deleteVersion" + item.VersionId })){} 
       </td> 
      </tr> 
     } 
    </tbody> 
</table> 
<div id="dialog-confirmVersion" title="Delete the item?" style="display:none" > 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p> 
</div> 

Вот версия регулятора,

 public ActionResult Details(int id) 
    { 
     ViewBag.History = recordHistoryRepository.GetRecordHistory("ConnectionString", "Version", id); 
     ViewBag.Log = recordLogRepository.GetRecordLog("ConnectionString", "Version", id); 
     var version = versionRepository.GetVersionById(id); 
     if (Request.IsAjaxRequest()) 
     { 
      return PartialView("_DetailsDialog", version); 
     } 

     return View(version); 
    } 

Вот версия Details.cshtml

@model WebDevelopment.SqlData.Version 

@Html.Partial("_DetailsDialog") 

Вот _DetailsDialog

@model WebDevelopment.SqlData.Version 

@{ 
    var history = ViewBag.History as IEnumerable<WebDevelopment.SqlData.RecordHistory>; 
    var log = ViewBag.Log as IEnumerable<WebDevelopment.SqlData.RecordLog>; 
} 
<table width="100%"> 
    <tr> 
     <td><h1 class="first">@Html.DisplayTextFor(_ => Model.Application.ApplicationName)</h1></td> 
    </tr> 
</table> 
<div class="tabset"> 
    <ul class="tab_labels"> 
     <li><span>Details</span></li> 
     <li><span>History</span></li> 
     <li><span>Log</span></li> 
    </ul> 
    <div class="tab_content"> 
     <table id="detailsDialogView" class="display"> 
      <tbody> 
       <tr> 
        <td>@Html.LabelFor(model => model.VersionNumber)</td> 
        <td>@Html.DisplayFor(model => model.VersionNumber)</td> 
       </tr> 
       <tr> 
        <td>@Html.LabelFor(model => model.ReleaseDate)</td> 
        <td>@Html.DisplayFor(model => model.ReleaseDate)</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="tab_content"> 
     @Html.Partial("_RecordHistory", history) 
    </div> 
    <div class="tab_content"> 
     @Html.Partial("_RecordLog", log) 
    </div> 
</div> 

Окно открывается, и я вижу HTML для страницы _DetailsDialog в поджигатель, но язычки не функционируют. Не работают функции данных в частичных представлениях _RecordHistory и _RecordLog из _DetailsDialog.cshtml.

ответ

0

У меня была аналогичная проблема - и не нашел решения. Вместо этого я пошел в плагин easytabs (http://os.alfajango.com/easytabs/). Он работает как шарм, и я нахожу его простым в использовании и адаптации.

Смежные вопросы