Как использовать модальную форму пользовательского интерфейса jQuery со страницы списка ASP.Net MVC - PullRequest
Новая
       16

Как использовать модальную форму пользовательского интерфейса jQuery со страницы списка ASP.Net MVC

4 голосов
/ 04 октября 2009

Я пытаюсь использовать это: 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/

Спасибо

1 Ответ

7 голосов
/ 05 октября 2009

Очевидно, что есть множество способов сделать это, но вот как я бы это решил. Выполните 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>
...