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代码：

$("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>
                }
 }

感谢任何帮助。

提前致谢！

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

Answer 3

我必须做一个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");

                    }

                });
            }

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

3 个答案: