如何使用ajax保存列表

Question

我有2個列表顯示在頁面上，已添加和可用。如果您在「可用」列表中有一條記錄，它會從該列表中刪除並添加到「已添加」。 Ajax用於刷新以顯示新的結果。但是，下面的代碼使這項工作成爲可能。我很難理解我如何跟上每一個清單，並堅持下去。現在它只記得基於最初的模型數據。任何建議將是偉大的 我已經在這方面努力（我還是新的）。

jquery的AJAX：

<script> 
    function AddProperty(propertyid) { 
     var currentProperties = @Html.Raw(Json.Encode(Model.Added)); 
     var availableProperties = @Html.Raw(Json.Encode(Model.Avail)); 

     if (currentProperties.Id == null) { 
      var x = { 
       "Id": 0, 
       "Name": "na", 
       "Value": "na" 
      }; 
      currentProperties.push(x); 
     } 

     $.ajax({ 
      url: "/Home/AddProperty", 
      type: "POST", 
      data: JSON.stringify({ PropertyId: propertyid, editList: currentProperties, availList: availableProperties }), 
      dataType: "json", 
      contentType: "application/json", 
      success: function (result) { 
       $("#edittable tr").remove(); 
       $("#availtable tr").remove(); 
       for (var i = 0; i < result.FirstList.length; i++) { 
        if (result.FirstList[i].Id > 0) { 
         $('#edittable').append(
          '<tr><td>'+result.FirstList[i].Name+':</td>' + 
          '<td><input type="text" id=editval"' + i+ '" value="'+result.FirstList[i].Value+'"></td>' + 
          '<td>' + 
           '<a class="btn-primary" style="cursor:pointer" onclick="DeleteProperty('+result.FirstList[i].Id+')" ><span class="glyphicon glyphicon-remove" /></a>' + 
         '</td></tr>' 
         ); 
        } else { 
         $('#edittable').append('<tr><td>No configuration values added.</td></tr>'); 
        } 
       }      

       for (i = 0; i < result.SecondList.length; i++) { 
        if (result.SecondList[i].Id > 0) { 
         $('#availtable').append(
          '<tr><td><a class="btn-primary" style="cursor:pointer" onclick="AddProperty('+result.SecondList[i].Id+')" ><span class="glyphicon glyphicon glyphicon-plus-sign" /></a></td>' + 
          '<td>'+result.SecondList[i].Name+':</td>' + 
          '</td></tr>' 
         ); 
        } else { 
         $('#availtable').append('<tr><td>No configuration values available.</td></tr>'); 
        } 
       } 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert('error: ' + thrownError); 
      } 
     }); 
    } 
</script> 

視圖模型：

public class ViewModel 
{ 
    public int Id { get; set; } 
    public string Desc { get; set; } 
    public List<Children> Added { get; set; } 
    public List<Children> Avail { get; set; } 
} 

public class Children 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
    public string Value { get; set; } 
} 

控制器：

[HttpPost] 
public ActionResult AddProperty(int propertyId, List<Children> editList, List<Children> availList) 
{ 
    var newEditList = new List<Children>(); 

    //add object to added list 
    var newEditRow = availList.Where(edit => edit.Id == propertyId).ToList(); 
    newEditList.AddRange(newEditRow); 

    //remove from available list 
    var newAvailList = availList.Where(avail => avail.Id != propertyId).ToList(); 

    var result = new { FirstList = newEditList, SecondList = newAvailList }; 

    return Json(result, JsonRequestBehavior.AllowGet); 
} 

查看代碼：

@model ViewModel 
@using (Html.BeginForm()) 
{ 
    <div class="panel panel-primary" id="ConfigValueContainer"> 
    <div class="panel-heading"> 
     <h2>Our Values</h2> 
     <hr /> 
    </div> 
     <div class="panel-body"> 
      <div class="lineup-tables"> 
      <h3>Edit Values</h3> 
      <table id="edittable"> 
       @*<tr> 
        <td colspan="2">Message Type: @Model.Desc</td> 
       </tr>*@ 
       @if (@Model.Added.Any()) 
       { 
        foreach (var added in Model.Added) 
        { 
         <tr> 
          <td>@Html.DisplayFor(model => added.Name):</td> 
          <td>@Html.TextBoxFor(model => added.Value)</td> 
          <td> 
           <a class='btn-primary' style='cursor:pointer' onclick='DeleteProperty(@added.Id)' ><span class='glyphicon glyphicon-remove' /></a> 
          </td>     
         </tr> 
        } 
       } 
       else 
       { 
        <tr> 
         <td>No configuration values added.</td> 
        </tr> 
       } 
      </table> 
     </div> 
      <div class="lineup-tables"> 
      <h3>Add New Values</h3> 
       <table id="availtable"> 
        @if (@Model.Avail.Any()) 
        { 
         foreach (var avail in Model.Avail) 
         { 
          <tr> 
           <td> 
            <a class='btn-primary' style='cursor:pointer' onclick='AddProperty(avail.Id)' ><span class='glyphicon glyphicon-plus-sign' /></a> 
           </td> 
           <td>@Html.DisplayFor(model => avail.Name)</td> 
          </tr> 
         } 
        } 
        else 
        { 
         <tr> 
         <td>No configuration values available.</td> 
        </tr> 
        } 
       </table> 
       </div> 
      <br/> 
      <div class="panel-footer"> 
       <input type="submit" disabled class="btn btn-primary" value="Save" id="btnSave" /> 
       <span id="close" class="btn btn-primary cancelLink">Cancel</span> 

       <div class="clearfix"></div> 
      </div> 

     </div> 
     </div> 
} 

Answer 1

首先，隱藏的輸入添加到每個錶行，可以很容易抓住你所需要的一切。現在

#edittable 
<tr> 
    <input type="hidden" class="id" value="@added.Id" /> 
    <input type="hidden" class="name" value="@added.Name" /> 
    <input type="hidden" class="value" value="@added.Value" /> 

    <td>@Html.DisplayFor(model => added.Name):</td> 
    <td>@Html.TextBoxFor(model => added.Value)</td> 
    <td> 
    <a class='btn-primary' style='cursor:pointer' onclick='DeleteProperty(@added.Id)' ><span class='glyphicon glyphicon-remove' /></a> 
    </td>     
</tr> 

#availtable 
<tr> 
    <input type="hidden" class="id" value="@avail.Id" /> 
    <input type="hidden" class="name" value="@avail.Name" /> 
    <input type="hidden" class="value" value="@avail.Value" /> 

    <td> 
    <a class='btn-primary' style='cursor:pointer' onclick='AddProperty(avail.Id)' ><span class='glyphicon glyphicon-plus-sign' /></a> 
    </td> 
    <td>@Html.DisplayFor(model => avail.Name)</td> 
</tr> 

，而是採用currentProperties和availableProperties你的方式做，試試這個：

function AddProperty(propertyid) { 
    var currentProperties = []; 
    var availableProperties = []; 

    $('#edittable tr').each(function() { 
    var row = $(this); 
    var child = { 
     Id: row.find('.id').val(), 
     Name: row.find('.name').val(), 
     Value: row.find('.value').val() 
    }; 
    currentProperties.push(child); 
    }); 

    $('#availtable tr').each(function() { 
    var row = $(this); 
    var child = { 
     Id: row.find('.id').val(), 
     Name: row.find('.name').val(), 
     Value: row.find('.value').val() 
    }; 
    availableProperties.push(child); 
    }); 

    // Use them in your ajax call 

這可能需要一些調整，但應該讓你去正確的道路上。