如何在 Asp.Net Mvc 项目中生成文本框

Question

我将所有产品从数据库获取到我的 Asp.Net Mvc 视图。到目前为止，一切都很好。 我只是将文本框放在带有加号和减号按钮的每一行中，然后使用确定按钮来更新数据库中的数量。 但是每次点击都会转到第一个文本框。这是我的代码

  <table class="table">
        <tr>

            <th>
                Products

            </th>
            <th>
                Quantity

            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>

                <td>
                    @Html.DisplayFor(modelItem => item.Product)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Quantity)
                </td>

                <td> 
             <input type='text' name='qty@(item.ComputerId)' id='qty@(item.ProductId)'/>

                <Button class="btn btn-success btn-xs glyphicon glyphicon-plus" name="add" onclick='javascript: document.getElementById(qty@(item.ProductId)).value++;' value='+' />
                <Button class="btn btn-warning btn-xs glyphicon glyphicon-minus" name="subtract" onclick='javascript: subtractQty(qty@(item.ProductId));' value='-' />
                <button type="button" class="btn btn-primary" onclick="update();">Ok</button>
            </td> 

            </tr>
        }

    </table>

And JavaScript is:


   function subtractQty(name) {
            if (document.getElementById(name).value - 1 < 0)
                return;
            else
               document.getElementById(name).value--;
        }

但现在我得到了这个错误：未捕获的类型错误：无法读取 null 的属性“值”

Answer 1

您好，您可以尝试以下代码：

查看代码：

  @int tempno=0;
  @foreach (var item in Model)
    {
        <tr>

            <td>
                @Html.DisplayFor(modelItem => item.Product)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Quantity)
            </td>

            <td> 
             <input type='text' name='qty@(tempno)' id='qty@(tempno)' />
                <Button class="btn btn-success btn-xs glyphicon glyphicon-plus" name="add" onclick='javascript: document.getElementById("qty").value++;' value='+' />
                <Button class="btn btn-warning btn-xs glyphicon glyphicon-minus" name="subtract" onclick='javascript: subtractQty();' value='-' /> |
                <button type="button" class="btn btn-primary" onclick="update();">Ok</button>


        </tr>
       @temp++
    }

jquery 代码：

var row = $(this).closest('tr');
 var product = row.find('td:eq(0)').text();
var quantity= row.find('td:eq(1)').text();

希望对你有帮助

谢谢

卡提克

Answer 2

编辑

你是对的，你的文本框可能有相同的id。因此，您可以先给它们不同的ids 来唯一标识每个文本框。

    @{
        int counter  = 0;
        foreach (var item in Model)
            {

             <input type='text' name='counter' id='counter' />
                            <Button class="btn btn-success btn-xs glyphicon glyphicon-plus" onclick='javascript: document.getElementById("counter").value++;' value='+' />
                            <Button class="btn btn-warning btn-xs glyphicon glyphicon-minus" onclick='javascript: subtractQty(counter);' value='-' /> 

       counter ++;
        }
   }

然后您必须更改您的 JavaScript 方法 subtractQty 才能知道应该将增量或减量应用于哪个文本框。

我可能会稍微调整您的方法以使用以下方法：

function subtractQty(textboxId) {
            if (document.getElementById(textboxId).value - 1 < 0)
                return;
            else
                document.getElementById(textboxId).value--;
        }

Answer 3

您应该为您的文本框提供唯一的名称和 ID，您可以通过循环执行此操作，例如将项目 ID 附加到 qty 像这样

 <input type='text' name='qty@Item.ID' id='qty@Item.ID' /> 

请注意，我假设您的 id 字段名称是不正确的 ID，请将其更改为您的字段名称。

然后在您的 javascript 函数中，添加一个参数，其名称为 qty@Item.ID，使用此参数按名称获取元素并相应地更新其值

<Button class="btn btn-warning btn-xs glyphicon glyphicon-minus" name="subtract" onclick="javascript: subtractQty(@Item.ID);" value='-' />

你的js函数

function subtractQty(id) {
            if (document.getElementById("qty"+id.toString()).value - 1 < 0)
                return;
            else
                document.getElementById("qty"+id.toString()).value--;
        }