如何使用从ASP.Net MVC列表页一个jQuery用户界面模式窗体 [英] How to use a jQuery UI Modal Form from ASP.Net MVC list page

问题描述

我tryng使用这个： http://jqueryui.com/demos/dialog/ ＃模式形式

I am tryng to use this: 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的点击它只是在我的名单这是工作的一个临时输入按钮：

Which allows me to pop-up on the click of '.myPop' which is just a temp input button in my list which is working:

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

我的问题是 - 什么是使用这个弹出去我控制器的编辑方法，填充控件，然后可以保存回模型，并刷新列表页面的最佳方式。

My question is - what is the best way to use this pop-up to go to the Edit method of my controller, populate controls and then be able to save back to the model and refresh the list page?

我要保持与ASP.Net MVC请。

I want to keep with best practice in ASP.Net MVC please.

我是否beetr也许用这个？ http://dev.iceburg.net/jquery/jqModal/

Am I beetr maybe using this? http://dev.iceburg.net/jquery/jqModal/

感谢

推荐答案

有显然一堆方法可以做到这一点，但这里是我会怎么解决这个问题。加载对话框来填充对话框的内容，显示对话框，比保存关闭对话框并刷新网格之前执行一个Ajax调用。这些都是基础知识，有一些帮手code以下。我觉得这是一个很好的做法，从保存操作返回JSON结果，以确定是否得救的成功，如果没有指出为何没有显示给用户的错误消息。

There's obviously a bunch of ways to do that, but here's how I would solve it. Perform an ajax call before loading the dialog to populate the dialog's contents, show the dialog, than on save close the dialog and refresh the grid. Those are the basics, there's some helper code below. I find it a good practice to return a json result from the save action to determine if the saved was successful, and if not an error message that indicates why it failed to display to the user.

<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>

这篇关于如何使用从ASP.Net MVC列表页一个jQuery用户界面模式窗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！