0

一部のWebサイトでは、動的フォームを使用して（呼び出し方法がわかりません！）、データのグループを編集しています。例：名前、姓、都市、国などのデータのグループがあります。ユーザーが[編集]ボタンをクリックすると、ポストバックを実行する代わりに、2つのテキストボックスと2つのコンボボックスで構成されるフォームが動的に開いて編集し、[保存]ボタンをクリックすると、編集フォームが非表示になり、すべてのデータが更新されます。

ここで、サーバー呼び出しにAjaxを使用し、dom操作にjavascriptを使用していることがわかりました。テキストボックス編集用のjqueryプラグインもいくつか見つかりました。ただし、フォームフィールドを完全に実装するためのプラグインは見つかりませんでした。したがって、jqueryajax呼び出しとdom操作を手動でasp.netに実装しました。これが私のプロセスです：

1）[編集]ボタンがクリックされたとき：サーバーにajax呼び出しを行って、必要なformedit.aspxを取得します。2）値が割り当てられた編集可能なフォームフィールドを返します。3）[保存]ボタンをクリックした場合：サーバーをajaxで呼び出して、formupdateprocess.aspxページを取得します。基本的にデータベースの更新を行い、現在のページを挿入するために必要なDOMスニペット（...）を返します。

うまく機能しますが、私の問題はパフォーマンスです。他のサイトで見られるサンプルよりも結果が遅いようです。:(（

私が知らないことはありますか？これを実装するためのより良い方法??

4

4 に答える 4

1

クライアントで編集フォームを保持しますが、「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>

これは、メイン ページが最初の読み込みから編集フィールドの値を保持する必要があることを意味しますが、多くの場合、ユーザーはボタンをクリックしたときではなく、その時点で待機することを受け入れるため、これはわずかな代償です。

于 2010-01-03T08:25:54.083 に答える
0

過去に ASP.NET で jQGrid を使用しました (MVC は GridView をサポートしていません)。

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

http://trirand.com/jqgrid/jqgrid.htmlのデモ (行編集のものをチェックしてください)。

于 2009-10-16T13:49:30.140 に答える
0

あなたが私のようにプラグインを何度も使用するのを嫌う場合は、次のようにします。

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メソッドを使用して変数をサーバー側に送信して処理することができます。

于 2012-08-30T10:07:20.327 に答える
0

単なるアイデアですが、インライン コンテンツを編集できるJeditableプラグインを見たことがありますか?

そして、ここにチュートリアルと、いくつかの改良を加えたチュートリアル コードがあります。

于 2009-10-16T14:37:07.663 に答える