Javascript MVC-Ajax发布视图中存在的所有div标记中的内容？

我正在我的项目中使用MVC3

我有一个大约2-12个div标签的视图，这取决于有多少个问题，如果有5个问题，则有5个div标签看起来像一个答案表单。所有这些div标签都在一个表单中

每个div标签都有一个hiddenfield、textarea和一个DropDownList。这些字段中的值由ajaxpost使用，ajaxpost获取字段中的值并将其发布到我的控制器

到目前为止，我可以用我的代码发布第一个div标签，但是其余的div标签没有发布。我所寻找的是能够张贴所有的div标签一个接一个当“保存所有”按钮被点击。此外，所有div标记都具有相同的类名：“wizard-step2”。它们都有一个唯一的ID，ID的值是从数据库中获取的QuestionID

以下是我的jquery代码：

$("saveall").click(function() {
        $('#loading2').show();
        setTimeout(function () { $("#loading2").hide(); }, 400);
        var $step = $(".wizard-step2"); // show all steps
        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 () {

        });
    });

下面的代码将只保存第一个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>
                }
 }

@{
int nr=1；
foreach（SelectedQuestionView模型中的模型项。AllSelectedQuestions）
{




@（nr++.@items.SelectedQuestionText Betyg:
@{
var selectListItems=（新[]{1,2,3,4,5,6,7,8,9,10}）。选择（i=>newselectListItem{Text=i.ToString（），Value=i.ToString（），Selected=（items.Grade.HasValue&&i==items.Grade.Value）}）；
@DropDownList（“selectetListItems”，selectListItems，“n/a”，new{@class=“Grade”}）
}

@text区域（“Comment”，items.Comment，new{@id=“selectstyle3”，@class=“Comment”}）




@Html.Hidden（“QuestionID”、items.QuestionID、新的{@id=“SelectedQuestions”、@class=“QuestionID”}）


}
}

感谢您的帮助

提前谢谢

使用该函数迭代div，并为每个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 () {

        });
    });
});

---

试试这个。。。它将把所有div收集到一个数组中，并使用ajax post发布数据

$.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();
}

---

我必须做一个for循环这是正确的答案：

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");

                    }

                });
            }

var$step=$（“.wizard-step2”）；//获取当前步骤
对于（变量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数据=
{
评论:评论,，
问号：问号，
年级：年级
};
$.post（'@Url.Action（“AnswerForm”、“AnswerNKI”）），数据，函数（）{
如果（注释！=null&&Grade>0）{
$（'a[data id=“”+QuestionID+“]”）。removeClass（“未完成”）；
$（'a[data id=“”+QuestionID+“]”）。addClass（“已完成”）；
}否则{
$（'a[data id=“”+QuestionID+“]”）。removeClass（“已完成”）；
$（'a[data id=“”+QuestionID+“]”）。addClass（“未完成”）；
}
});
}

你能发布你的HTML结构吗？我已经用我的HTML更新了structure@RammtinAvar，尝试使用我的解决方案，我已将其用于主详细信息…与您的问题无关，但我认为这更容易，因为我不明白为什么要将所有div收集到一个数组中？每个div标签都已经是一个数组了，我需要的就是能够对每个div进行步进并发布。如果你想单独发布每个div，那么@Anthony Grist发布的另一个解决方案就可以了，但是如果你只想对所有div发布一次，我的解决方案就可以了。。