MVC - Ajax發佈視圖內存在的所有div標籤內的內容？

Question

我在我的項目中使用MVC3。

我有一個大約2-12個div標籤的視圖，它取決於有多少個問題，如果有5個問題，有5個div標籤看起來像一個答案表單。所有這些div標籤都在一個表單內。

每個div標籤都有一個hiddenfield，textarea和一個DropDownList。這些字段中的值由ajax post使用，它將字段中的值傳遞給我的控制器。

到目前爲止，我可以用我的代碼發佈第一個div標籤，但其餘的div標籤沒有發佈。我正在尋找的是當點擊「全部保存」按鈕時，能夠逐個發佈所有div標籤。同樣所有的div標籤都有相同的類名：「wizard-step2」。他們都有一個唯一的ID，ID的值是從數據庫中提取的QuestionID。

下面是我後的jQuery代碼：

​​

下面的代碼將只保存第一個div標籤，但不休息。

這是我的HTML：

@{ 
       int nr = 1; 
       foreach (SelectedQuestionViewModel items in Model.AllSelectedQuestions) 
       { 
       <div class="wizard-step2" id="@items.QuestionID"> 
        <br/> 
        <br/> 
        <p>@(nr++).&nbsp;@items.SelectedQuestionText <span class="b">Betyg:&nbsp;&nbsp; 
        @{ 
        var selectListItems = (new[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }).Select(i => new SelectListItem { Text = i.ToString(), Value = i.ToString(), Selected = (items.Grade.HasValue && i == items.Grade.Value) }); 

        @Html.DropDownList("selectetListItems", selectListItems, "n/a", new { @class = "Grade" }) 
        }</span></p> 

        <div class="editor-field"> 
         @Html.TextArea("Comment", items.Comment, new { @id = "selectstyle3", @class = "Comment" }) 
        </div> 
        <br/> 
        <br/> 
        @Html.Hidden("QuestionID", items.QuestionID, new { @id = "SelectedQuestions", @class = "QuestionID" }) 
        <br/> 
       </div> 
       } 
} 

任何幫助表示讚賞。

在此先感謝！

Answer 1

使用.each()函數來迭代div，併爲每個單獨發送一個AJAX帖子。在沒有看到HTML結構，我只能根據你已經有了什麼猜測，但我認爲下面應該工作：

$("saveall").click(function() { 
    $('#loading2').show(); 
    setTimeout(function() { $("#loading2").hide(); }, 400); 
    $(".wizard-step2").each(function(index, step) { 
     var Comment = step.find(".Comment").val(); 
     var QuestionID = step.find(".QuestionID").val(); 
     var Grade = step.find(".Grade").val(); 
     var data = { 
      Comment: Comment, 
      QuestionID: QuestionID, 
      Grade: Grade 
     }; 
     $.post('@Url.Action("AnswerForm", "AnswerNKI")', data, function() { 

     }); 
    }); 
}); 

Answer 2

試試這個......它將所有的div收集到一個單一的陣列，並且使用AJAX會後發佈的數據...

$.fn.serializeObject = function() { 
     var o = {}; 
     var a = this.serializeArray(); 
     $.each(a, function() { 
      if (o[this.name]) { 
       if (!o[this.name].push) { 
        o[this.name] = [o[this.name]]; 
       } 
       o[this.name].push(this.value || ''); 
      } else { 
       o[this.name] = this.value || ''; 
      } 
     }); 
     return o; 
    }; 

$(document).ready(function() { 
    $("#Submit").click(function() { 
     var QuestionAnswerArray = []; 
     var QuestionAnswerLength = $(".wizard-step2").length; 
     $(".wizard-step2").each(function (i) { 
      var test = $(this).find("select,textarea, input").serializeObject() 
      QuestionAnswerArray.push(test); 
      if ((i + 1) == QuestionAnswerLength) { 
       $.ajax({ 
        type: 'POST', 
        url: '/../AnswerNKI/AnswerForm', 
        data: JSON.stringify(QuestionAnswerArray), 
        contentType: 'application/json; charset=utf-8', 
        dataType: 'json', 
        success: function (return_flag) {        
         if (return_flag == true) { 
          alert("Question and Answers Saved Succesfully!");         
         } else { 
          alert("Error Occured"); 
         } 
        } 
       }); 
      } 
     }); 
    }); 
}); 

，並在控制器中......

[HttpPost] 
public ActionResult AnswerForm(Answers[] answers) 
{ 
       foreach (var item in answers) 
       { 
        // do whatever you want here 
       } 
       return View(); 
} 

Answer 3

我必須爲循環做了，這是正確的答案：

var $step = $(".wizard-step2"); // get current step 
      for (var i = 0; i < $step.length; i++) { 

       var allsteps = $(".wizard-step2"); 
       var Allsteps = $(allsteps[i]); 
       var Comment = Allsteps.find(".Comment").val(); 
       var QuestionID = Allsteps.find(".QuestionID").val(); 
       var Grade = Allsteps.find(".Grade").val(); 

       var data = 
       { 
        Comment: Comment, 
        QuestionID: QuestionID, 
        Grade: Grade 
       }; 
       $.post('@Url.Action("AnswerForm", "AnswerNKI")', data, function() { 

        if (Comment != null && Grade > 0) { 
         $('a[data-id="' + QuestionID + '"]').removeClass("unfinished"); 
         $('a[data-id="' + QuestionID + '"]').addClass("completed"); 
        } else { 
         $('a[data-id="' + QuestionID + '"]').removeClass("completed"); 
         $('a[data-id="' + QuestionID + '"]').addClass("unfinished"); 

        } 

       }); 
      }