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函数中调用时，一旦你离开函数，它就不会保存变量更改。所以在第一个 Html.TextBoxFor 之后，它是 Model.Questions 对象中的第一个项目，它确实像我想要的那样创建了一个新的文本框，但是它没有增加它在 List 中更改的项目，而是让它们都只是编辑列表中的第二项。

奇怪的是，如果我在@(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 回答