モーダル ダイアログを使用してレコードを編集する MVC4 開発に取り組んでいます。ajaxform を使用して、更新された値をコントローラーに送信しています。これまでのところ、機能は正常に機能しています。しかし、解決しようとしているが成功していないキャッシングの問題に直面しています。メイン ページのレコードはさまざまなタブに表示されており、各タブには編集オプションがあります。編集をクリックすると、モーダル ダイアログにそれぞれの部分ビューが読み込まれます。モーダル ダイアログを起動し、[キャンセル] をクリックしてタブを変更し、もう一度 [編集] をクリックすると、ダイアログは編集用にそれぞれの部分ビューを正しく読み込みます。しかし、編集起動モーダルダイアログをクリックして値を更新し、別のタブからモーダルポップアップを再度ロードすると、編集したいタブではなく、前のタブの編集ビューが表示されます。コードをデバッグしましたが、コードの問題ではないようです。モーダル ダイアログとアプリケーション レベルで cache: false で無効にしようとしましたが、何も機能しません。モーダル起動 jQuery とモーダル ダイアログ フォーム コードのスニペットを追加しています。
$(".model-edit").click(function () {
var viewid = $(this).attr("id");
var key = $("#KeyField").val();
var functionurl = '@Url.Action("ShowEditModel")';
if (key != "") {
$.ajax({
type: 'POST',
url: functionurl,
cache: false,
context: this,
data: { key: key, viewid: viewid },
success: function (data) {
$('#model-editor').html(data);
$('#model-editor').dialog({ modal: true,
width: 'auto', resizable: false, autoOpen: false,
closeOnEscape: true, position: 'middle'
});
myModal = $('#model-editor').dialog('open');
$.validator.unobtrusive.parse("#EditForm");
}
});
}
});
モーダル ダイアログ ビュー。
@using (Ajax.BeginForm("UpdateRecord",null,null,new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", UpdateTargetId = "SelectedRecord", OnSuccess = "closeModal();" }, new { id = "EditForm" } ) )
{
<table cellspacing="3" cellpadding="3" align="left" width="950px">
<tr>
<td align="center" colspan="3">
<input type="hidden" value=@Model.CurrentStep id="CurrentStep" name="CurrentStep"/>
</td>
</tr>
<tr>
<td align="center">
@for (int i = 0; i < ((string[])Model.StepView).Count(); i++)
{
if (i == (int)Model.CurrentStep)
{
<h2 class="StepTitle">@((string)Model.StepTitle[i])</h2>
<div class="wizard-step" id=@i style="height:auto;position:relative;display:inherit">
@Html.Partial((string)Model.StepView[i])
</div>
}
else
{
<div class="wizard-step" style="height:auto;position:relative;">
@Html.Partial((string)Model.StepView[i])
</div>
}
}
</td>
</tr>
<tr>
<td align="center">
<div id="buttons" class="actionBar">
<input type="button" class="button" id="CancelButton" value="Cancel" onclick="closeModal();" />
<input type="submit" class="button" id="SaveButton" value="Update" style="float:left"/>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
function closeModal() {
$(myModal).dialog('close');
}
</script>
}
キャンセルをクリックするか、Xボタンを使用してモーダルダイアログを閉じると完全に機能するため、問題の原因はわかりません。しかし、同じ JavaScript を使用してフォームを送信して閉じるときはそうではありませんcloseModal()
。