0

我在我的项目中使用 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>
                }
 }

任何帮助表示赞赏。

提前致谢！

4

3 回答 3

0

Try this one... it will collect all your divs into one single array, and using ajax post will post the data...

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

and in your controller...

[HttpPost]
public ActionResult AnswerForm(Answers[] answers)
{
                foreach (var item in answers)
                {
                    // do whatever you want here
                }
                return View();
}
于 2012-04-30T12:58:54.907 回答
0

我不得不做一个 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");

                    }

                });
            }
于 2012-04-30T14:33:19.433 回答
0

使用该.each()函数遍历 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 () {

        });
    });
});
于 2012-04-30T12:58:10.823 回答