Question

我正在进行MVC4开发，我正在使用模态对话框来编辑记录。我使用ajaxform将更新的值提交给控制器。到目前为止功能正常。但是我遇到了缓存问题，我一直试图解决但没有成功。主页面上的记录显示在各个选项卡中，每个选项卡都有一个编辑选项。点击编辑我在模态对话框上加载相应的局部视图。在我启动模态对话框并单击取消后更改选项卡并再次单击编辑对话框将正确加载相应的部分视图以进行编辑。但是，如果我单击编辑启动模式对话框并更新值，然后再次从另一个选项卡加载模态弹出窗口，它会显示上一个选项卡的编辑视图，而不是我要编辑的那个。我调试了代码，但它似乎不是代码问题。我试图通过缓存禁用：在模态对话框和应用程序级别为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()关闭时。

Answer 1

我发现了错误。我刚刚做了以下更改

                $('#model-editor').dialog({ modal: true,
                    width: 'auto', resizable: false, autoOpen: false,
                    closeOnEscape: true, position: 'middle'

                });

                 $('#model-editor').html(data); <<= Moved this line after modal initialization
                  myModal = $('#model-editor').dialog('open'); 
                 $.validator.unobtrusive.parse("#EditForm");

Answer 2

我想你应该试试

dialog('destroy') instead dialog('close')

无法禁用jQuery模式对话框缓存

2 个答案: