0

プロジェクトで MVC3 を使用しています。

質問の数によって異なりますが、質問が 5 つある場合は、回答フォームのように見える 5 つの div タグがあります。これらの div タグはすべて 1 つのフォーム内にあります。

各 div タグには、hiddenfield、textarea、および DropDownList があります。これらのフィールド内の値は、フィールド内の値を取得してコントローラーに投稿する ajax post によって使用されます。

これまでのところ、コードで最初の div タグを投稿できましたが、残りの div タグは投稿されていません。私が探しているのは、「すべて保存」ボタンをクリックすると、すべての div タグを 1 つずつ投稿できるようにすることです。また、すべての 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

関数を使用.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 に答える
0

これを試してみてください...すべてのdivを1つの配列に収集し、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();
}
于 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 に答える