Question

我希望在我的列表页面上有X个Ajax面板，这些面板位于主页面内，用于站点一致性。

我在ASP.NET Ajax上遇到的教程似乎暗示我需要在<form><asp:ScriptManager ID="asm" runat="server"/></form>布局周围<table></table>。我认为这个函数（每个代码都是一个单独的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>的想法，所以我该如何解决这个问题呢？我认为在表单中包装整个表会导致在每个请求上重新加载所有项目而不是单个行项目。

Answer 1

不幸的是，您需要将整个表格包装在UpdatePanel中以使其正常工作。如果你害怕它会慢，那就先试试吧。当我以刷新率在UpdatePanels中包装表时，我总是感到惊喜。

您可能还想查看ASP.NET Dynamic Data，它会提供您正在寻找的功能。

Answer 2

根据CSS-fu的强度，您可以使用CSS和表单值周围的DIV标记来完成类似的布局。它会是这样的：

<% 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没有为您提供所需的性能，请尝试使用该路径。

Answer 3

如果您希望页面的每个部分都有自己的状态，则应查找ISCriptControl和javascript WebRequests。它不像updatepanels那么容易，但它对用户来说指数级更快，并且可以让你实现你的意图。

您的母版页上会有很多控件继承IScriptControl。如果你这样做，他们将是他们自己的小独立世界，没有用户数据等。如果正确实现IScriptControl，每个控件都会有一个与之关联的javascript文件，并绑定到该控件的dom元素之一。

该javascript文件将像对象一样运行并绑定到单个dom元素。您可以对aspx页面执行javascript webrequests以发送和检索该部分的数据，而不必担心页面的其余部分。

javascript调用的aspx页面可以覆盖渲染，因此它只在处理请求数据后发回必要的部分。

然后，您可以从服务器返回html并仅更新该单独的dom元素。你会知道数据又回来了，因为你可以捕获一个javascript事件。

Answer 4

我最终使用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 %>');" />

你能在ASP.NET中使用迭代Ajax表单吗？

4 个答案: