如何使用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>

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

我想在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>