可以在ASP.NET中使用迭代的Ajax表单吗?

很遗憾,您需要将整个表包装在 UpdatePanel 为了让这个工作。如果你担心速度会变慢,那就先试试。当我以刷新率将表包装在updatepanels中时,我总是感到很惊喜。

你也可以看看 ASP.NET Dynamic Data ,它提供了您想要的功能。

根据您的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>
<% } %>

如果全局更新面板没有提供所需的性能,请尝试该路径。

如果您希望页面的每个部分都有自己的状态,那么应该查找iscriptControl和javascriptWebRequests。它不像updatepanels那么简单,但对用户来说,它是指数级的速度,可以让你达到你的目的。

您的母版页上有许多继承iscriptControl的控件。如果你做的对,他们都将是他们自己的小独立世界,无用户数据等等。如果正确实现IScriptControl,每个控件都将有一个与之关联的javascript文件,绑定到该控件的某个DOM元素。

该javascript文件的行为将类似于一个对象,并绑定到一个单独的dom元素。您可以对ASPX页面执行javascript webrequests,以便仅为该部分发送和检索数据,而不必担心页面的其余部分。

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

然后,您可以从服务器获取HTML,并且只更新该individual dom元素。您将知道数据回来了,因为您可以捕获到一个javascript事件。

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