Редактирование встроенной формы на стороне клиента

Я вижу, что некоторые веб-сайты используют динамические формы (я не знаю, как их вызывать!) для редактирования группы данных. Например: есть группа данных, таких как имя, фамилия, город, страна и т.д. когда пользователь нажимает кнопку EDIT, вместо обратной передачи форма, состоящая из 2 текстовых полей + 2 поля со списком, динамически открывается для редактирования, а затем, когда вы нажимаете кнопку «Сохранить», форма редактирования исчезает, и все данные обновляются.

Теперь я знаю, что здесь происходит использование Ajax для вызовов сервера и некоторый javascript для манипулирования домом. Я даже нашел несколько плагинов jquery для редактирования текстовых полей. Однако я не смог найти ничего для полной реализации полей формы. Поэтому я реализовал его на asp.net с помощью вызовов jquery ajax и манипулирования dom вручную. вот мой процесс:

1) при нажатии кнопки «Редактировать»: сделайте ajax-вызов на сервер для получения необходимого formit.aspx 2) он возвращает редактируемые поля формы с назначенными значениями. 3) при нажатии кнопки «Сохранить»: сделать вызов ajax на сервер для получения страницы formupdateprocess.aspx. в основном он выполняет обновления базы данных, а затем возвращает необходимый фрагмент DOM (...), чтобы вставить текущую страницу.

хорошо, это работает, но МОЯ ПРОБЛЕМА - это производительность. Результат кажется медленнее, чем образцы, которые я вижу на других сайтах. :((

Есть ли что-то, чего я не знаю? лучший способ реализовать это ??


jquery asp.net inline-editing jquery-plugins
person bykasif    schedule 16.10.2009    source источник
comment
Вы знаете, что каким-то образом использовали перевернутый восклицательный знак вместо строчной буквы i в заголовке своего поста? я исправил...   -  person Kip    schedule 16.10.2009
comment
@Kip: +1 за острый взгляд.   -  person b3.    schedule 01.03.2011
comment
@b3: Спасибо. Однако, оглядываясь назад на историю редактирования, забавно то, что на самом деле это был не перевернутый восклицательный знак, а печально известная турецкая заглавная буква i с точкой. Может автор сделал опечатку на турецкой клавиатуре? en.wikipedia.org/wiki/Dotted_and_dotless_I   -  person Kip    schedule 02.03.2011

Ответы (4)


arrow_upward
1
arrow_downward

Я бы оставил форму редактирования на клиенте, но скрытую, например. "style="display:none;", а затем показывать его, когда пользователь нажимает кнопку редактирования. Загрузка формы с сервера в этом случае очень дорого обходится с точки зрения производительности.

Это очень простой пример, в нем не рассматривается позиционирование формы редактирования и т. д.

<head>
    <script type="text/javascript">
        $(function () {
            $("#showEdit").click(function () {
                $("#editForm").css("display", "block");
            });
        });
    </script>
</head>
<body>
    <div id="editForm" style="display: none; position: absolute; z-index: 999;">
        <fieldset>
            <label for="surnameInput">Surname:</label>
            <input id="surnameInput" type="text" />
            <label for="firstNameInput">Surname:</label>
            <input id="firstNameInput" type="text" />
        </fieldset>
    </div>
    <input id="showEdit" type="button" value="Edit" />
</body>

Это означает, что ваша главная страница должна будет содержать значения поля редактирования с первой загрузки, но очень часто это небольшая цена, потому что пользователь соглашается на ожидание в это время, а не когда он нажимает кнопку.

person ProfK    schedule 03.01.2010

arrow_upward
0
arrow_downward

Раньше я использовал jQGrid с ASP.NET (MVC не поддерживает GridViews).

http://www.trirand.com/blog/

и демонстрации на http://trirand.com/jqgrid/jqgrid.html (см. Редактирование строк).

person Phil    schedule 16.10.2009

arrow_upward
0
arrow_downward

Просто идея, но вы видели плагин Jeditable, который позволяет редактировать встроенный контент?

А вот руководство и код руководства с некоторые улучшения.

person Mottie    schedule 16.10.2009

arrow_upward
0
arrow_downward

Вот как это делается, если вы, как и я, ненавидите использовать плагины время от времени.

HTML:

<div id="pesa"><p>PERSONAL INFORMATION</p>
<ul>
    EMAIL:<li class="editable">email</li>
    NAME:<li class="editable">name</li>
    TELLPHONE:<li class="editable">tel</li>
    COUNTRY:<li class="editable">country</li>
    CITY:<li class="editable">city</li>
</ul>

Затем CSS для охлаждения:

 #pesa a{
 color: #000;
 }

#pesa a:hover{
 color: #;
 }


  #pesa a:hover{
 text-decoration: none;
 }

  h1{
 font-size: 30px;
 padding: 0;
  margin: 0;
  }

 h2{
 font-size: 20px;
  }


  .editHover{
  background-color: #E8F3FF;
   }

  .editBox{
   width: 326px;
 min-height: 20px;
 padding: 10px 15px;
  background-color: #fff;
 border: 2px solid #E8F3FF;
  }

  #pesa ul{
  list-style: none;
  }

  #pesa li{
  width: 330px;
  min-height: 20px;
  padding: 10px 15px;
  margin: 5px;
 }

 li.noPad{
 padding: 0;
 width: 360px;
}

  #pesa form{
 width: 100%;
}

.btnSave, .btnCancel{
 padding: 6px 30px 6px 75px;
 }

 .block{
 float: left;
 margin: 20px 0;
 }

Затем JavaScript:

              $(document).ready(function() 
        {
var oldText, newText;
$(".editable").hover(
    function()
    {
        $(this).addClass("editHover");
    }, 
    function()
    {
        $(this).removeClass("editHover");
    }
);

$(".editable").bind("dblclick", replaceHTML);


$(".btnSave").live("click", 
                function()
                {
                    newText = $(this).siblings("form")
                                     .children(".editBox")
                                     .val().replace(/"/g, "&quot;");

                    $(this).parent()
                           .html(newText)
                           .removeClass("noPad")
                           .bind("dblclick", replaceHTML);
                }
                ); 

$(".btnDiscard").live("click", 
                function()
                {
                    $(this).parent()
                           .html(oldText)
                           .removeClass("noPad")
                           .bind("dblclick", replaceHTML);
                }
                ); 

function replaceHTML()
                {
                    oldText = $(this).html()
                                     .replace(/"/g, "&quot;");
                    $(this).addClass("noPad")
                           .html("")
                           .html("<form><input type=\"text\" class=\"editBox\" value=\"" + oldText + "\" /> </form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>")
                           .unbind('dblclick', replaceHTML);

                }
  }
  );

Поэтому, когда кто-то наводит курсор на элементы li, они становятся синими, чтобы дать пользователю понять, что они могут редактировать. Когда они дважды щелкают, используя событие dblclick, появляется форма со значением элемента <li>, просто проверьте код. Когда они редактируют в форме и сохраняют, форма удаляется и ставится список с новым htmlvalue. Затем вы можете использовать метод $ajax для отправки переменных на сервер для обработки.

person Jimmy Obonyo Abor    schedule 30.08.2012