你可以在ASP.NET中使用迭代Ajax表單嗎？

我希望在我的列表頁面上有X個Ajax面板，這些面板位於主頁面內，以保證網站的一致性。你可以在ASP.NET中使用迭代Ajax表單嗎？

我在ASP.NET Ajax上遇到的教程似乎暗示我需要圍繞我的<table></table>佈局設置<form><asp:ScriptManager ID="asm" runat="server"/></form>。我會認爲這個函數（每個代碼是一個單獨的Ajax元素），每個<tr></tr>本身就是一種形式。因此，特定於代碼的操作只會觸發該部分的Ajax異步回發。以下是我想象的正確佈局：

<table> 
    <thead> 
     <tr> 
      <th> 
       Code 
      </th> 
      <th> 
       Description 
      </th> 
      <th> 
       Document 
      </th> 
      <th> 
       Customer Contact Required for Resolution 
      </th> 
      <th> 
       Associate 
      </th> 
      <th> 
       Shareholder 
      </th> 
      <th> 
       Customer 
      </th> 
      <th> 
       Regulatory 
      </th> 
      <th> 
       Root Cause 
      </th> 
      <th> 
       Investor Requirements 
      </th> 
     </tr> 
    </thead> 

    <tbody> 
     <% foreach (var item in GetCodes()) 
     { %> 
      <tr> 
       <form><asp:ScriptManager ID="asm" runat="server"/> 
       <asp:UpdatePanel runat="server"> 
        <td><%=item.Code %></td><td>item.Description</td><td><%=item.Document %></td> 
        <td><asp:ListBox ID="lbAssociate" /></td> 
        <td><asp:ListBox ID="lbShareholder" /></td> 
        <td><asp:ListBox ID="lbCustomer" /></td> 
        <td><asp:ListBox ID="lbRegulatory" /></td> 
        <td><asp:dropdownlist ID="ddlRoot" /></td> 
        <td><asp:CheckBox 
         ID="_ckbAllInvestorRequirements" 
         runat="server" 
         Text="All" 
         onclick="AllInvestorClicked()" /> 
         <asp:CheckBoxList 
         ID="_cblInvestorRequirements" 
         runat="server"> 
         </asp:CheckBoxList></td> 
        <td><asp:Button ID="Submit" Text="Submit" runat="server" /></td> 
       </asp:UpdatePanel> 
       </form> 
      </tr> 
     <% } %> 
    </tbody> 
</table>

這是迭代Ajax迷你表格的正確佈局嗎？看來XHTML不喜歡<table>裏面有<form>的想法，所以我怎麼能說出來呢？我認爲在表單中包裝整個表格會導致所有項目都在每個請求上重新加載，而不是單個訂單項。

來源

2009-12-08 Maslow

HTML不容許''

我使用jQuery Ajax直接調用了頁面上的PageMethod。使用this方法，我不需要<form>或<asp:UpdatePanel>。

<script type="text/javascript"> 
//<![CDATA[ 
    function submitAjax(controls) { 
     //$("#ajaxResult").text("submitCalled:" + code); 
     function quoteOrNull(value) { 
      if (typeof value == "undefined" || value == null) 
       return "null"; 
      else 
       return "'" + value + "'"; 
     }; 
     var all = controls.All.attr('checked'); 
     var investors = []; 
     controls.Boxes.each(function(index,item) { 
      if (item.checked || all) 
       investors.push(item.value); 
     }); 
     var message = "{'code':'" + controls.Code 
       + "','associate':" + quoteOrNull(controls.Associate.val()) 
       + ",'shareholder':" + quoteOrNull(controls.Shareholder.val()) 
       + ",'customer':" + quoteOrNull(controls.Customer.val()) 
       + ",'regulatory':" + quoteOrNull(controls.Regulatory.val()) 
        + ",'rootCause':" +quoteOrNull(controls.Rootcause.val()) 
        + ",'investors':[" + investors +"]" 
       + "}"; 
     $.fn.wait = function(time, type) { 
      time = time || 1000; 
      type = type || "fx"; 
      return this.queue(type, function() { 
       var self = this; 
       setTimeout(function() { 
        $(self).dequeue(); 
       }, time); 
      }); 
     }; 

     $.ajax({ 
      type: "POST", 
      url: "List.aspx/Save", 
      data: message, //Get form values 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(msg) { 

       var value = msg.d; 
       if (msg.d.HasError == false) { 
        $("#ajaxResult").text("Ajax success").removeClass("errormsg"); 
        controls.Row.addClass("complete"); 
        controls.Button.val("Edit"); 
        controls.Result.text("Success").removeClass("errormsg"); 
        controls.Result.show().wait(2000).fadeOut("slow"); 
        if (controls.Associate.val() && controls.Shareholder.val() && controls.Customer.val() 
         && controls.Regulatory.val()) { 
         var value = parseInt(controls.Associate.val(), 10) + parseInt(controls.Shareholder.val(), 10) 
         + parseInt(controls.Customer.val(), 10) 
         + parseInt(controls.Regulatory.val(), 10); 
         controls.Severity.text("Severity: " + (value/4)).fadeIn("slow"); 

        } 
        // else controls.Severity.text("Incomplete").fadeIn("slow").wait(1500).fadeOut("slow"); 
        function disable(item) { item.attr("disabled", "disabled"); } 
        disable(controls.Associate); 
        disable(controls.Shareholder); 
        disable(controls.Customer); 
        disable(controls.Regulatory); 
        disable(controls.Rootcause); 
        disable(controls.All); 
        disable(controls.Boxes); 
       } 
       else { 
        controls.Result.text("Creation failure:" + msg.d.ErrorMessage).addClass("errormsg").show(); 
        $("#ajaxResult").text("Ajax success, creation failure:" + msg.d.ErrorMessage).addClass("errormsg"); 
       } 

       // span.attr("style", "color:White"); 
       //span.text("Ajax success:" + msg.d).show().wait().fadeOut("slow"); 
      }, 
      error: function(request, textStatus, errorThrown) { 
       // var span = $(formSelector + " div.submit span"); 
       controls.Result.text("Ajax failure").addClass("errormsg").show().wait(3500).fadeOut("slow"); 
       $("#ajaxResult").text("Ajax failure:" + request.statusText).addClass("errormsg"); 
       // span.attr("style", "color:Red"); 
       // span.text("*" + request.statusText).show().wait().fadeOut("slow"); 

      } 
     }); 
    }; 
    //]]> 
</script>

然後提交按鈕看起來是這樣的：

<input type="button" value="<%=defect.Assessment==null?"Save":"Edit" %>" name="submit" onclick="codeButton('<%=CurrentDefect.Code %>');" />

來源

2009-12-11 17:53:54 Maslow

不幸的是，你需要將整個表格打包在UpdatePanel才能使其工作。如果你擔心會變慢，請先嚐試一下。當我以UpdatePanels的刷新率封裝表格時，我一直很驚喜。

您可能還想看看ASP.NET Dynamic Data，它提供了您正在尋找的功能。

來源

2009-12-08 15:41:34

那麼整個桌子每次都會刷新，而不是一個單獨的tr？ – Maslow 2009-12-08 15:42:56

正確。我已經通過鏈接到微軟的動態數據版本更新了我的文章，這可能正是你要找的。還有一些jQuery插件可以幫助你，但是我真的建議在你嘗試任何更復雜的事情之前嘗試包裝整個表並檢查性能。 – 2009-12-08 15:47:50

有沒有辦法只發送一些數據回服務器沒有''？無論是jQuery或JavaScript或什麼？ – Maslow 2009-12-08 15:51:29

根據您的CSS-fu的強度，您可能可以使用帶有DIV標籤的CSS在表單值附近完成類似的佈局。這將是這樣的：

<% foreach (var item in GetCodes()) 
    { %> 
<form> 
    <asp:ScriptManager ID="asm" runat="server"/> 
    <asp:UpdatePanel runat="server"> 
     <div id="Row"> 
     <div id="Associate"><asp:ListBox ID="lbAssociate" /></div> 
     <div id="Shareholder">... etc. 
    </div> 
    </asp:UpdatePanel> 
</form> 
<% } %>

嘗試這條道路，如果全球的UpdatePanel不給你你要找的性能。

來源

2009-12-08 15:48:55 iandisme

雖然性能是一個問題，但我的主要動機是佈局，而不必在每次重新加載時來回發送其他標記控件的狀態。如果有人點擊其他行中的某個行，則嘗試通過旅行到服務器來保存正在處理的行。我不希望其他行流量和它們的值丟失。 – Maslow 2009-12-08 15:50:28

我看到了 - 應該可以在沒有表格的情況下實現相同的佈局，如果這是您的AJAX調用的最佳選擇，那麼基於CSS的佈局可能是您最好的選擇。儘管你可能需要使用xhtml代碼，但我只是在答案編輯器中將其翻譯過來。 – iandisme 2009-12-08 16:18:42

這聽起來像是一個很好的解決方案，我只需要研究並找出如何實現它。 – Maslow 2009-12-08 16:20:48

如果你想讓頁面的每個部分都有自己的狀態，你應該查看ISCriptControl和javascript WebRequests。這並不像updatepanels那麼簡單，但它對用戶來說指數更快，並且可以讓你實現你的意圖。

您的母版頁上將有很多繼承IScriptControl的控件。如果你這樣做，他們將成爲他們自己的小獨立世界，無需用戶數據等等。如果您正確實施IScriptControl，每個控件都會有一個與之關聯的JavaScript文件，並與該控件的某個dom元素綁定。

該JavaScript文件將表現得像一個對象，並綁定到一個單獨的DOM元素。您可以對aspx頁面執行javascript webrequests以發送和檢索該部分的數據，而不必擔心頁面的其餘部分。

javascript調用的aspx頁面可以覆蓋渲染，因此它只處理請求數據後發送回必要的部分。

然後，您可以從服務器獲取html並僅更新該個人dom元素。你會知道數據回來了，因爲會有一個你可以捕獲的javascript事件。

來源

2009-12-08 16:21:58 diadem

你可以在ASP.NET中使用迭代Ajax表單嗎？

回答

相關問題