MVC4上的HTML表的問題--使用jQuery動態洗掉行 -有解無憂

編輯：

我有一個表，我在MVC4中使用jQuery動態添加/洗掉表中的行。當我做POST的時候，這些行并沒有被完全存盤起來，

示例

當我做POST的時候，這些行沒有被完全存盤起來。

示例：我在表中添加了10行并洗掉了第7行，理論上只剩下9行。我遇到的問題是，無論我洗掉哪一行，都只保存了之前的行（1到6），而它應該保存表格中的所有行（1到9）。

我在尋找除錯，發現輸入ID沒有更新，我得到了以下結果。

我在尋找除錯，發現輸入ID沒有更新。

 <input name=" [0].HW_SQ"> 
        <input name="[1].HW_SQ">/span>
        <input name="[2].HW_SQ">/span>
        <input name="[3].HW_SQ">/span>
        <input name="[4].HW_SQ"> 
        <input name="[5].HW_SQ">/span>
        <input name="[7].HW_SQ">/span>
        <input name="[8].HW_SQ">/span>
        <input name="[9].HW_SQ">

正如你所看到的，我選擇的位置被消除了，但輸入的ID沒有被更新，所以我需要它如下。

 <input name=" [0].HW_SQ"> 
        <input name="[1].HW_SQ">/span>
        <input name="[2].HW_SQ">/span>
        <input name="[3].HW_SQ">/span>
        <input name="[4].HW_SQ">/span>
        <input name="[5].HW_SQ"/span>>
        <input name="[6].HW_SQ">/span>
        <input name="[7].HW_SQ">/span>
        <input name="[8].HW_SQ">

有什么方法可以正確地更新ID值嗎？

這里是我的代碼：

 <div> < a href="#" id="addNew"> < input type="button" value="Add"/> </a></div>
<table id="dataTable"/span>>
        <thead> 
        <tr>/span>
            <th>/span>#</th>/span>
            <th>/span>SEQ</th>/span>
            <th>品牌</th>/span>
            <th>Serial</th>/span>
            <th>Model</th>/span>
            <th>年型號</th>
            <th> 狀態</th>                
            <th>Place</th>
            <th>Location</th>
            <th>FA標簽</th>/span>
            <th>安全標簽</th>/span>
            <th>收購日期</th>/span>
            <th>/span>價格</th>
            <th>Description</th>
        </tr>/span>
        </thead>/span>
        <tbody id="mytbody">/span>
        @if (Model != null && Model.Count > 0)
        {
            int j = 0;
            int index = 1;
            
            foreach (var p in Model)
            {
               <tr> 
                    <td style="text-align: center;">@index</td>/span>
                    <td>@Html.TextBoxFor(a => a[j].HW_SQ)</td>/span>
                    <td>@Html.TextBoxFor(a => a[j].HW_BRAND)</td>/span>
                    <td>@Html.TextBoxFor(a => a[j].HW_SERIAL)</td>/span>
                    <td>@Html.TextBoxFor(a => a[j].HW_MODEL)</td> 
                    <td>@Html.TextBoxFor(a => a[j].HW_YEAR)</td>                         
                    <td>@Html.TextBoxFor(a => a[j].HW_STATUS)</td>/span>                                               
                    <td>@Html.TextBoxFor(a => a[j].HW_PLACE)</td>/span>
                    <td>@Html.TextBoxFor(a => a[j].HW_LOCATION)</td> 
                    <td>@Html.TextBoxFor(a => a[j].HW_FA_TAG)</td>/span>
                    <td>@Html.TextBoxFor(a => a[j].HW_SECURITY_TAG)</td>/span>
                    <td>@Html.TextBoxFor(a => a[j].HW_DATE_ITEM_ADQUISITION)</td> 
                    <td>@Html.TextBoxFor(a => a[j].HW_PRICE)</td>/span>
                    <td>@Html.TextBoxFor(a => a[j].HW_DESCRIPTION)</td>/span>
                    <td>           
                         < a href="#"/span> id="remove" class="remove"> 移除</a>。   
                    </td>/span>                     
               </tr> 
                index  = 1;
            }
        }
        </tbody> 
        </table>/span>
                <center>< input type="submit" value="Save" id="sendinv"/> </center>>

jQuery代碼：

 $(document).ready(function (>) {

    function numberRows（$t）{
    $t.find("tr").each(function (i, el) {
        $(el).find("td"/span>)。 eq(0).html((i   1)。
    });
    }

    /- 啟動表添加、洗掉按鈕 -

    $("#addNew").click(function (e) {
        e.preventDefault（）。
    var last = $('#dataTable>tbody>tr:last') 。
    if (last.length > 0) {
        var name = last.children() 。 find('input,select')[0].name。
        var index = Number(name.replace(/[^0-9]/gi, ''/span>)   1;
        var tr = ('<tr>'   last.html() 。 replace(/[0-9] __/gi, index   '__'/span>)   '</tr>').replace（/[[0-9] ] [. ]/gi, '['   index   ']。'）。)
        numberRows($('#dataTable tbody').append(tr)) 。
    }
    });

    $(document)。 on('click', '#remove', function (e) {
        e.preventDefault（）。
        if ($('#dataTable>tbody>tr').length > 1) {
            //$(this).parent().parent().remove();.
            $(this).closest('tr').remove() 。
            numberRows（$（'#dataTable tbody'））。
            return false。
        }
        else {
            //$(this).parent().parent().show();.
            alert('Form must have at least one row'/span>)
            numberRows($('#dataTable tbody') )。
        }
    });
    /- End Table Add, delete buttons - 
});

uj5u.com熱心網友回復：

這里問題的核心是ASP.NET MVC的模型系結在發現編號有空隙時停止建立一個集合。因此，客戶端成功地將值POST到服務器上，但是服務器端的框架忽略了這些值，所以它們在到達控制器操作方法之前就丟失了。

解決方案將取決于您的服務器端代碼所期望的內容以及它如何使用資料。該代碼是否知道如何識別和處理丟失的記錄，以及您如何更新支持的資料。但目前這并不在問題的范圍內，你所特別詢問的是如何在客戶端重新編號，所以讓我們專注于此。

你已經擁有并呼叫了一個函式來在洗掉一個條目后 "重新為行編號"：

function numberRows($t) {
  $t.find("tr"/span>).each(function (i, el) {
    $(el).find("td").eq(0).html((i   1) 。)
  });
}

它只是沒有重新編號任何重要的東西。它所做的只是向用戶顯示一個數字，而不是對發送到服務器的任何索引重新編號。但是你可以使用相同的函式來做這件事。也許像這樣：

function numberRows($t) {
  $t.find("tr"/span>).each(function (i, el) {
    $(el).find("td").eq(0).html((i   1) 。)
    $(el).find("td").eq(1).find("input") 。 prop("name", "["   i   "] .HW_SQ")。
  });
}

新的一行代碼與上一行類似，它從 "當前行 "開始，找到一個<td>單元格（這次是第二個單元格，而不是第一個），并修改該單元格中的內容。這一次，它在單元格中找到一個<input>，并將其name屬性設定為一個基于i索引的值。所以產生的值應該是"[0].HW_SQ"，"[1].HW_SQ"，"[2].HW_SQ"，等等。

你可以用同樣的方法在該函式中添加更多的行，對其余的輸入進行重新編號。在這一點上，應該由你的服務器端代碼知道如何解釋新編號的記錄，并根據需要同步回資料。

另外，你的HTML標記目前是無效的，這可能會導致未來出現更多的錯誤。具體來說，這個元素有一個id，它被重復了多次：

< a href="#"/span> id="remove" class="remove"> Remove</a>

幸運的是，該元素已經有一個class屬性，你可以使用。因此，完全洗掉id屬性，并使用class來選擇你的JavaScript中的元素：

$(document) 。 on('click', ' .remove', function (e) {
  //...。
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/319223.html

標籤：

上一篇：對輸入型別為數字但模型屬性為字串的剃刀視圖顯示驗證資訊

下一篇：c中的時間復雜度（嵌套回圈）