asp.net-mvc - 如何从 ASP.Net MVC 列表页面使用 jQuery UI 模态表单

Question

我正在尝试使用这个:http://jqueryui.com/demos/dialog/#modal-form

我有:

 <script type="text/javascript">
  $(document).ready(function() {
  $("#dialog").dialog();
  $("#dialog").dialog('close');

      $('.myPop').click(function() {            
          $("#dialog").dialog('open');
      });
  });

这允许我在单击“.myPop”时弹出，这只是我的列表中正在运行的临时输入按钮:

<button type="button" class="myPop"></button>

我的问题是 - 使用此弹出窗口转到 Controller 的编辑方法、填充控件然后能够保存回模型并刷新列表页面的最佳方法是什么？

我想遵循 ASP.Net MVC 的最佳实践。

我可能会用这个吗？ http://dev.iceburg.net/jquery/jqModal/

谢谢

Answer 1

显然有很多方法可以做到这一点，但这是我解决它的方法。在加载对话框之前执行 ajax 调用以填充对话框的内容、显示对话框，然后在保存时关闭对话框并刷新网格。这些是基础知识，下面有一些帮助代码。我发现从保存操作中返回 json 结果来确定保存是否成功是一个很好的做法，如果没有，则显示一条错误消息，指示为什么无法向用户显示。

<div id="dialog" title="Basic dialog">
  <!-- loaded from ajax call -->
  <form id="exampleForm">
 <input blah>
        <input type="button" onclick="Save()" />
  </form>
</div>

<script>
  $(function() {
      $('.myPop').click(function() { 
          $.get("editController/loadContents", function(data){
             $("#dialog").html(data);
           });           
          $("#dialog").dialog('open');
      });
  });


function Save(){
 $.post("/editController/Edit", $("#exampleForm").serialize(),
  function(data){
     $("#dialog").dialog('close');
    //update grid with ajax call
  });
}

</script>