0

コンテンツがフォームに追加されるたびに新しい行を追加するフォームをテーブル内に作成しようとしています。これが私のコードです、そしてそれから私は問題が何であるかを教えます。

@{
    //Declare the i variable
    var i = 0;
}

@using (Html.BeginForm())
{
    <table>
        <tr>
            <th>

            </th>
            <th>
                Question
            </th>
        </tr>
        <tr id="@(i+1)">
            <td class="QuestionNum">
                @(i+1))
            </td>
            //This is the cell with the Form field. 
            <td>
                @Html.TextBoxFor(m => m.Questions[i].Question, new { @class = "QuestionBox Last" })
            </td>
        </tr>
    </table>
}

<script>
    $(document).ready(function () {
        SetUpNewLine($('.QuestionBox'));
    });

    function SetUpNewLine(obj) {
        obj.bind('keyup paste', function () {
            if ($(this).val() != "") {
                if ($(this).hasClass("Last")) {

                    //This is the line that isn't working.
                    @(i++)

                    $(this).parents('table').append('<tr id="@(i+1)"><td class="QuestionNum">@(i+1))</td><td>@Html.TextBoxFor(m => m.Questions[i], new { @class = "QuestionBox Last", style="width:100%;" })</td></tr>');
                    $(this).removeClass('Last');
                    SetUpNewLine($('.Last'));
            }
        });
    }
</script>

したがって、このコードは初めて@(i++)機能しますが、Javascript関数でを呼び出すと、関数の外に出ると変数の変更は保存されません。したがって、Model.Questionsオブジェクトの最初のアイテム用の最初のHtml.TextBoxForの後に、私が望むように新しいテキストボックスを作成しますが、リストで変更するアイテムをインクリメントする代わりに、すべてを編集するだけです。リストの2番目の項目。

奇妙なことに、私が@(i++)内部を行うとしたら$(document).ready()、それはうまくいくでしょう。

変数を正しくインクリメントする方法について何かアイデアはありますか？Razor変数とJavascriptの混合に関しては、私にはわからないことがあると確信しています。

4

2 に答える 2

2

iサーバーでレンダリングされたの値をjavascriptに保存する必要があります。

編集 これはすべて間違っています。あなたがしようとしているように、かみそりの構文で要素に追加することはできません。Razorはサーバー側のテンプレート言語であり、HTMLに解釈されると、クライアント側からより多くのHTMLをレンダリングできます。

編集2 次のようなことを試してください。

var current_index = (@i);

    $(document).ready(function () {
        SetUpNewLine($('.QuestionBox'));
    });

    function getHtml(index){
        return '<tr id="' +index + '"><td class="QuestionNum">'+ index +'</td><td><input type="text" name="Question" class="QuestionBox Last" style="width:100%;"/></td></tr>';
    }

    function SetUpNewLine(obj) {
        obj.bind('keyup paste', function () {
            if ($(this).val() != "") {
                if ($(this).hasClass("Last")) {

                    //This is the line that isn't working.
                    current_index++;

                    $(this).parents('table').append(getHtml(current_index);
                    $(this).removeClass('Last');
                    SetUpNewLine($('.Last'));
            }
        });
    }
于 2012-07-19T17:36:00.433 に答える
0

変数の値を非表示のフォームフィールドに格納します。これにより、フォームがサーバーに送信されるときに、この変数の増分値も送信されます。

<input type="hidden" name="incrementedVar" value="1" />

それをインクリメントするJavascript：

$("input[name='incrementedVar']").val($("input[name='incrementedVar']").val() + 1);

コントローラで値を取得します

public ActionResult MyAction(int incrementedVar)
{
    // the incrementedVar param matches the name of the hidden field. 
    // the model binder will automatically pass the value of the hidden field to this param.
}

このコードを使用すると、変数は完全にjavascriptによって制御され、サーバーはポストバック時にのみアクセスできます。現在持っているかみそりの宣言とインクリメントコードを削除する必要があります。

于 2012-07-19T17:24:46.277 に答える