C # MVC Текстовое поле в конкретной строке таблицы (отключить) при нажатии кнопки - PullRequest
0 голосов
/ 04 октября 2018

У меня есть таблица, значения которой находятся в цикле с моим списком товаров, и у меня есть текстовое поле для «Количество» и кнопка «Добавить в корзину».Я пытаюсь сделать, когда я нажимаю кнопку «Добавить в корзину», он проверит значение количества, если оно имеет значение, или нет, тогда текстовое поле «Количество» будет отключено только для этой конкретной строки.

Продукт.cshtml

<table id ="productList" class="table table-dark">
    <tr>
        <th>Product ID</th>
        <th>Title</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>Add to cart</th>
    </tr>
    @foreach (var item in Model)
        {
            <tr class="active">
                <td>@item.Id</td>
                <td>@item.Title</td>
                <td>@item.Description</td>
                <td>@Html.TextBox("Quantity", "0", new { @class = "form-control" })</td>
                <td><button class="btn btn-default pull-left" onclick="disableText(Quantity);" id="btn-addToCart">Add To Cart</button></td>
            </tr>
        }
</table>

javascript

function disableText(QtyVal) {
    if(QtyVal.value == '')
    {
        document.getElementById("Quantity").value = 1;
    }
}

В настоящее время мой проект выводится каждый раз, когда я нажимаю любую кнопку отправки, он всегда обновляет первую строку (что неверно).

Цель состоит в том, чтобы обновить количество и отключить его для этой конкретной строки

Ответы [ 4 ]

0 голосов
/ 05 октября 2018

Использовать частичное представление, избавить от головной боли.

<table id ="productList" class="table table-dark">
    <tr>
        <th>Product ID</th>
        <th>Title</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>Add to cart</th>
    </tr>
    @foreach (var item in Model)
    {
        @Html.Partial("~/Views/_OrderRowPartial.cshtml", item)
    }
</table>

_OrderRowPartial.cshtml:

@model item
<tr class="active">
    <td>@item.Id</td>
    <td>@item.Title</td>
    <td>@item.Description</td>
    <td>@Html.TextBoxFor(m => m.Quantity,  new { @class = "form-control quantity" })</td>
    <td><button class="btn btn-default pull-left" onclick="disableText();">Add To Cart</button></td>
</tr>

Javascript:

function disableText(t, el) {
  var qty = el.parentElement.previousElementSibling.getElementsByTagName('input')[0];
  mytd.style.border = "1px solid #00FF00";
  console.log(qty.value);
  if (qty.value == '') {
    qty.value = 1;
  }
}

Вот пример, гдеЯ установил границы для вещей, чтобы было понятно, что происходит.Неясно, если вы хотите отключить ввод или кнопку, чтобы я сделал оба.

function disableText(t, el) {
  el.style.border = "2px solid #FF0000";
  var mytd = el.parentElement;
  mytd.style.border = "1px solid #00FF00";
  var mytr = mytd.parentElement;
  var qtytd = mytd.previousElementSibling;
  var qty = qtytd.getElementsByTagName('input')[0];
  qtytd.style.border = "2px solid orange";
  qty.style.border = "2px solid cyan";
  console.log(qty.value);
  if (qty.value == '') {
    qty.value = 1;
  }
  // disable button
  el.setAttribute("disabled", "disabled");
  qty.setAttribute("disabled", "disabled");
}
<table id="productList" class="table table-dark">
  <tr>
    <th>Product ID</th>
    <th>Title</th>
    <th>Description</th>
    <th>Quantity</th>
    <th>Add to cart</th>
  </tr>
  <tr class="active">
    <td>1234d</td>
    <td>Cherry Pie</td>
    <td>Gooey cherry pie</td>
    <td><input type="text" class="form-control quantity" value="2" .>
      <td><button class="btn btn-default pull-left" onclick="disableText('',this);">Add To Cart</button></td>
  </tr>
  <tr class="active">
    <td>1234hd</td>
    <td>Hot Dog</td>
    <td>Dog, With mustard</td>
    <td><input type="text" class="form-control quantity" /></td>
    <td><button class="btn btn-default pull-left" onclick="disableText('',this);">Add To Cart</button></td>
  </tr>
</table>
0 голосов
/ 05 октября 2018

Ваша проблема заключается в следующем определении кнопки:

<button class="btn btn-default pull-left" onclick="disableText(Quantity);" id="btn-addToCart">Add To Cart</button>

Цикл foreach генерирует повторяющиеся значения атрибута id для всех кнопок, что создает недопустимый HTML и вызывает нежелательное поведение.Поскольку ваша таблица также содержит тег <input>, вы должны использовать цикл for вместо foreach и добавить к кнопке отдельное имя класса, например, buttonadd:

<!-- assumed that @model List<Product> is used -->
<table id ="productList" class="table table-dark">
    <tr>
        <th>Product ID</th>
        <th>Title</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>Add to cart</th>
    </tr>
    @for (int i = 0; i < Model.Count; i++)
    {
       <tr class="active">
           <td>@Model[i].Id</td>
           <td>@Model[i].Title</td>
           <td>@Model[i].Description</td>
           <td>@Html.TextBox("Quantity", "0", new { @class = "form-control" })</td>
           <td><button type="button" class="btn btn-default pull-left buttonadd">Add To Cart</button></td>
       </tr>
    }
</table>

Тогда вы можете сослаться на buttonadd класс в качестве селектора для определения, в какой строке содержится кнопка, и установка <input> состояния на readonly (не disabled, поскольку вы хотите отправлять количественные значения при отправке формы; все входные данные с атрибутом disabled не включеныво время отправки), как в примере ниже:

$(document).on('click', '#productList .buttonadd', function () {
    var row = $(this).closest('tr');

    // find quantity text box in the same row as clicked button
    var qty = row.find('input');

    // set quantity value and prevent user input
    qty.val(parseInt(qty.val()) + 1);
    qty.attr('readonly', 'readonly');
});

Примечание: Если вы хотите использовать строго типизированный помощник, используйте @Html.TextBoxFor:

@Html.TextBoxFor(m => m[i].Quantity, new { @class = "form-control" })

Liveпример: .NET Fiddle

0 голосов
/ 05 октября 2018

Вам просто нужно добавить приведенный ниже код при нажатии кнопки

(this).prev('input').attr("disabled", "disabled")
0 голосов
/ 04 октября 2018

Поскольку все ваши текстовые поля имеют одинаковый идентификатор, вы не можете указать, какой из них вы пытаетесь обновить в своем js.Попробуйте дать уникальный идентификатор для вашего TextBox, тогда, когда вы получитеElementById ("UniqueID"), вы можете убедиться, что выбрали правильное текстовое поле.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...