ページ全体をリロードするのではなく、aspxページでajaxを使用しますか？

私はaspxで非常にジュニアなプログラマーです。私は助けが必要です。ページ全体をリロードするのではなく、aspxページでajaxを使用しますか？

私は現在1つのaspxページを持っています。このページには3つのテーブルがあります。

最初のテーブルはメインテーブルで、データを含む行が含まれています。 1つの行をクリックすると、もう1つのテーブルが詳細に表示されます。下は写真です。

これはwindow.locationのコードで正常に動作しています。

このプロジェクトをajaxでアップグレードします。 1つの行をクリックすると、データを表示しますが、ページをリロードしません。

ベストプラクティスは、3 aspxページには匹敵しません。誰かが良い例/練習記事を提供できるなら、それは素晴らしいでしょう。

すべての行のonclick方法：

var table = document.getElementById("table1"); 
      var rows = table.getElementsByTagName("tr"); 
      var customerId = getParameterByName('customerid'); 
      var table1Index = '<%= (FindHeaderIndex("table1Columns", "Agreement_NUM")) %>'; 
      for (i = 0; i < rows.length - 1; i++) { //length - 1 to avoid footer row 
       var currentRow = table.rows[i]; 
       var createClickHandler = 
        function (row) { 
         return function() { 
          var table1Number = row.getElementsByTagName("td")[table1Index].innerHTML; 
          window.location = "Project.aspx" + "?" + "customerid=" + customerId + "&" + "table1Number=" + table1Number; 
         }; 
        }; 
       currentRow.onclick = createClickHandler(currentRow); 
      }

GETパラメータ

function getParameterByName(name) { 
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
       results = regex.exec(location.search); 
      return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
     }

体

<body> 
    <div id="container"> 
     <asp:Panel runat="server" ID="mainPanel"></asp:Panel> 
     <asp:Panel runat="server" ScrollBars="Auto" Height="40%" ID="detailsPanel"></asp:Panel> 
     <asp:Label runat="server" ID="errorLabel" CssClass="errorMessage" /> 
    </div> 
</body>

出典

2017-11-16 Peter Smith

これは私が前に使ってきたものです。単にページをリロードするのではなく、Ajaxを呼び出して新しいページ状態をロードして解析し、更新されたHtmlを取得して現在のビューを更新することで、プロセスを「ajaxify」することができます。

あなたはこのように関数を呼び出すと思います（私は表2と表3のIDを前提とします）の表2と3を更新するために、今すぐ

...スクリプトに

function updateElementsById(newDataUrl) { 
    if (arguments.length < 2) return; 
    var $container = $("<div/>"); 
    $container.load(newDataUrl, function() { 
     var idList = Array.prototype.slice.call(arguments, 1); 
     idList.forEach(function(id) { 
      $(id).html($div.find(id).html()); 
     }); 
    }); 
}

を、この機能を追加...

var url = "Project.aspx?customerid=" + customerId + "&table1Number=" + table1Number; 

updateElementsById(url, "#table2", "#table3");

これで十分です。問題がある場合は教えてください。

ちなみに、これは本当に素敵なハックのビットです。実際のソリューションが必要な場合は、データをAjax呼び出しに返すことを検討する必要がありますが、それは必要なデータを処理するためのAPIを作成することを意味します。関連するデータを取得し、そのデータをすべてのデータアクセスを行うクラスに配置し、ページ内でそのクラスを使用し、コントローラーまたはジェネリックハンドラーでデータを返すようにすることができます。

多くの選択肢があります。あなたのニーズとユースケースによって異なります。

出典

2017-11-16 09:25:26 Archer

こんにちは！助けてくれてありがとう。あなたのコードを私の中に貼り付けて、このエラーが出ました：arguments.sliceは関数ではありません –

申し訳ありません - 私の悪いです。引数にスライスを使用することはできません。私は今それを修正しました - それは行くべきであるはずです:) – Archer

ページ全体をリロードするのではなく、aspxページでajaxを使用しますか？

答えて

関連する問題