Question

我从数据库获取所有产品到我的Asp.Net Mvc View。到现在为止还挺好。我只是在每一行用正负按钮放置文本框，然后按确定按钮更新数据库中的数量。但每次点击都会转到第一个文本框。这是我的代码

  <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--;
        }

但是现在我得到了这个错误：未捕获的TypeError：无法读取null的属性'value'

Answer 1

修改

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

@{ 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 2

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

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

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

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

<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--;
        }

Answer 3

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

查看代码：

  @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();

希望它会有所帮助

由于

KARTHIK

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

3 个答案:

查看代码：