asp.net - 客户端内联表单编辑

Question

我看到一些网站使用动态表单（我不知道如何调用它们！）来编辑一组数据。例如：有一组数据，如姓名、姓氏、城市、国家等。当用户单击 EDIT 按钮时，不是回发，而是由 2 个文本框 + 2 个组合框组成的表单动态打开以进行编辑，然后当您单击“保存”按钮时，编辑表单消失，所有数据更新..

现在，我知道这里发生的事情是使用 Ajax 进行服务器调用和一些 javascript 进行 dom 操作。我什至找到了一些用于文本框编辑的 jquery 插件。但是，我找不到任何可以完全实现表单字段的东西。因此，我通过 jquery ajax 调用和手动 dom 操作在 asp.net 上实现了它。这是我的过程：

1) 单击编辑按钮时：对服务器进行 ajax 调用以检索必要的formedit.aspx 2) 它返回分配了值的可编辑表单字段。3) 单击保存按钮时：对服务器进行 ajax 调用以检索 formupdateprocess.aspx 页面。它基本上进行数据库更新，然后返回必要的 DOM 片段 (...) 以插入当前页面..

很好，但我的问题是性能。结果似乎比我在其他网站上看到的样本慢。:((

有什么我不知道的吗？一个更好的方法来实现这个？？

score 1 · Accepted Answer

I would keep the edit form on the client, but hidden with e.g. "style="display:none;", and then show it when the user clicks the edit button. Loading a form from the server in this event is very costly performance wise.

This is a very basic example and doesn't consider positioning the edit form etc.

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

This does mean your main page will have to carry the edit field values from first load, but very often that is a small price to pay, because the user accepts a wait at that time, not when they click a button.

score 0 · Accepted Answer

我过去在 ASP.NET 中使用过 jQGrid（MVC 不支持 GridViews）。

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

和http://trirand.com/jqgrid/jqgrid.html上的演示（查看行编辑）。

score 0 · Accepted Answer

只是一个想法，但是您是否看过可编辑内联内容的Jeditable插件？

这里有一个教程，并且教程代码有一些改进。

score 0 · Accepted Answer

如果您像我一样讨厌不时使用插件，这就是它的完成方式。

的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方法将变量发送到服务器端进行处理。

asp.net - 客户端内联表单编辑

4 回答 4

Related

Reference