したがって、部分ビューには 3 つのモーダル ボックスがあります。
1) runDates 2) errorCodes 3) testExceptions
最初の 2 つのダイアログ ボックスには ajax リクエストが含まれています。2 番目の ajax リクエストは、1 番目と 3 番目のダイアログ ボックスを無効にします。1 番目と 3 番目をクリックしても開きません。2 番目のダイアログ ボックスを使用しない場合、すべてが完璧に機能します。
また、モーダル ボックスごとに個別の Javascript ファイルもあります。提案してください、私はこれに困惑しています。前もって感謝します！
意見
@model RunLog.Domain.Entities.RunLogEntry
@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/runLogEntry.js")" type="text/javascript"></script>
<script type="text/javascript">
var runlogListErrorsUrl = '@Url.Action("ListErrorCodes", "RunLogEntry")';
</script>
<fieldset>
<legend>Enter a new Run Log Entry</legend>
@using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
{
<div id="main">
@Html.Partial("_RunLogEntryPartialView", Model)
</div>
}
</fieldset>
<script src="@Url.Content("~/Scripts/exitCode.js")" type="text/javascript"></script>
部分図
@model RunLog.Domain.Entities.RunLogEntry
<script src="@Url.Content("~/Scripts/runDates.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/testexception.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.blockUI.js")" type="text/javascript"></script>
<div class="bodyContent">
@if (Model.RunDatesDisplay != null && Model.RunDatesDisplay.Count() > 0)
{
<span class="leftContent">
@Html.Label("Run Dates")
</span><span class="rightContent"><span id="RunDatesChildDialogLink" class="treeViewLink">
Click here to Select/View Run Dates</span>
<br />
<span id="RunDatesDisplayy" style="cursor: pointer; text-decoration: underline;">
</span></span>
}
</div>
<div id="runDatestreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 400px; height: 450px; display: none;">
<table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
<thead>
<tr>
<th>
Run Dates:
</th>
<th>
Minimum Replicate:
</th>
</tr>
</thead>
<tbody>
@Html.EditorFor(x => x.RunDatesDisplay)
</tbody>
</table>
</div>
<div class="bodyContent">
@if (Model.TestExceptionDisplay != null && Model.TestExceptionDisplay.Count() > 0)
{
<span class="leftContent">
@Html.Label("Test Exceptions")
</span><span class="rightContent"><span id="TestExceptionChildDialogLink" class="treeViewLink">
Click here to View Test Exceptions</span>
<br />
<span id="TestExceptionDisplayy"></span></span>
}
</div>
<div id="testExceptiontreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 800px; height: 450px; display: none;">
<table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
<thead>
<tr>
<th>
Exception
</th>
<th>
Frequency
</th>
<th>
Comment
</th>
<th>
Replicate Range
</th>
</tr>
</thead>
<tbody>
@if (Model.TestExceptionDisplay != null)
{
@Html.EditorFor(x => x.TestExceptionDisplay)
}
</tbody>
</table>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Error Code")
</span><span class="rightContent"><span id="ChildDialogLink" class="treeViewLink">Click
here to Select Error Codes</span>
<br />
<span id="ErrorCodeDisplay" style="cursor: pointer; text-decoration: underline;">@(Model.ErrorDescription)</span>
@Html.HiddenFor(model => model.ErrorDescription)
</span>
</div>
<div id="treeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 800px; height: 450px; display:none;">
<div id="errorCodes">
@Html.RenderTree(CacheHelper.ErrorCodes(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "e")
</div>
<div id="inputReps" style="display: none;">
</div>
</div>
<script src="@Url.Content("~/Scripts/errorCode.js")" type="text/javascript"></script>
ツリービュー エラーコードの Javascript ファイル
var errorTextArea;
var ErrorCodeDialog;
$(document).ready(function () {
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
$("#errorCodes ul").treeview({
collapsed: true,
prerendered: false
});
ErrorCodeDialog = $("#treeview").dialog({ closeOnEscape: true, stack: false, autoOpen: false, modal: false, resizable: false, draggable: true, title: 'Select and input Error details', width: 480, height: 500,
buttons: { Select: function () {
var btnText = '';
$('.ui-dialog-buttonpane :button').each(function () {
if ($(this).text() == 'Select') {
btnText = 'Select';
$(this).text('Apply');
$("#errorCodes").attr("style", "display:none;");
$("#inputReps").attr("style", "display:inline;");
}
else if ($(this).text() == 'Apply') {
btnText = 'Apply';
$(this).text('Select');
$("#errorCodes").attr("style", "display:inline;");
$("#inputReps").attr("style", "display:none;");
}
});
if (btnText == 'Select') {
errorTextArea = "";
$("#errorCodes :checkbox:checked").each(function () {
var v = $(this).val();
if (errorTextArea.length > 0) {
errorTextArea = errorTextArea + " | ";
}
errorTextArea = errorTextArea + v;
});
if ($("#LogType").val() == "Run")
//$("#inputReps").load("/RunLogEntry/ListErrorCodes", { ID: $("#ID").val(), ErrorCodes: errorTextArea });
$("#inputReps").load(runlogListErrorsUrl, { ID: $("#ID").val(), ErrorCodes: errorTextArea });
else
//$("#inputReps").load("/ServiceEntry/ListErrorCodes", { ID: $("#ID").val(), ErrorCodes: errorTextArea });
$("#inputReps").load(serviceListErrorsUrl, { ID: $("#ID").val(), ErrorCodes: errorTextArea });
}
else {
errorTextArea = "";
var i = 0;
$("#inputReps :input").each(function () {
var v = $(this).val();
if (errorTextArea.length > 0) {
if ($(this).attr('type') == 'hidden')
errorTextArea = errorTextArea + ' | ' + v;
else {
if (i == 0) {
errorTextArea = errorTextArea + ' ~ L ' + v;
i = 1;
}
else {
errorTextArea = errorTextArea + ' ~ P ' + v;
i = 0;
}
}
}
else
errorTextArea = v;
});
if (errorTextArea.Length > 0) {
errorTextArea = errorTextArea.substr(0, errorTextArea.length - 1);
}
$("#ErrorCodeDisplay").text(errorTextArea);
$("#ErrorDescription").val(errorTextArea);
ErrorCodeDialog.dialog("close");
}
},
Cancel: function () {
ErrorCodeDialog.dialog("close");
// $(this).dialog("close");
// if ($(this).text() == 'Cancel') {
// $(this).dialog("close");
// }
}
}
});
$('#ChildDialogLink').click(function () {
$(ErrorCodeDialog).dialog("open");
// return ErrorCodeDialog.dialog('open');
//replace the div id with the id of the button/form
// $(ErrorCodeDialog).dialog("open");
});
});
runDatestreeview の Javascript ファイル
var RunDialog;
$(document).ready(function () {
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
RunDialog = $("#runDatestreeview").dialog({ closeOnEscape: true, stack: false, autoOpen: false,
modal: false, resizable: true, draggable: true, title: 'Select Run Dates to Auto-Populate Form Fields & Test Exceptions:',
width: 600, height: 500, position: 'center',
// open: function (type, data) {
// },
buttons: { UpdatePage: function () {
$.post("/RunLogEntry/LogFileConfirmation",
$("#form").serialize(),
function (data) {
$("#runDatestreeview").remove();
$("#testExceptiontreeview").remove();
$("#main").html(data);
$(RunDialog).dialog("close");
}, "html");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
RunDialog.closest("div.ui-dialog").appendTo("#form");
$(document).on("click", "#RunDatesChildDialogLink", function () {
// $('#RunDatesChildDialogLink').click(function () {
$(RunDialog).dialog("open");
});
//Region Auto-Open Modal Box
var modalOpen = $("#LogModals").val();
if (modalOpen == "0") {
$("#runDatestreeview").dialog({ autoOpen: true });
}
//End Auto Open Modab Box Region
// $("#runDatestreeview").parent().appendTo("form");
});