如何更新一個表，而不刷新整個網站剃刀

我不能大氣壓更新表未經本站清爽。我需要一種方法來輕鬆地

添加一行，刪除一行，修改表格內容中的一行。

我的桌子是這樣構建的。

{....} 
@using (Html.BeginForm()) 
{ 
<fieldset> 
    <legend>ShiftTypes</legend> 
    <table class="EditableTable" id="EditableTableShiftTypes"> 
     <thead> 
      <tr> 
       <th> 
        #: 
       </th> 
       <th> 
        ShiftName: 
       </th> 
       <th> 
        ShiftCode: 
       </th> 
       <th> 
        Suplement: 
       </th> 
       <th> 
        ExtraSuplement: 
       </th> 
       <th> 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      @foreach (BPOPortal.Domain.Models.ShiftTypeView type in Model.ShiftTypeList) 
      { 
       <tr> 
        <td> 
         @type.ID 
        </td> 
        <td> 
         @type.ShiftName 
        </td> 
        <td> 
         @type.Name 

        </td> 
        <td> 
         @type.Supplement 

        </td> 
        <td> 
         @type.OneTimePayment 

        </td> 
        <td> 
         <button> 
          Delete</button> 
        </td> 
       </tr> 
      } 
      <tr> 
       <td> 
        <label> 
        </label> 
       </td> 
       <td> 
        @Html.Editor("ShiftName") 
       </td> 
       <td> 
        @Html.Editor("ShiftCode") 
       </td> 
       <td> 
        @Html.Editor("Suplement") 
       </td> 
       <td> 
        @Html.DropDownList("ExtraSuplement", new SelectListItem[] { new SelectListItem() { Text = "yes", Value = "true", Selected = false }, new SelectListItem() { Text = "No", Value = "false", Selected = false } }, "--Choose--") 
       </td> 
       <td> 
        <button id="AddButton"> 
         Add</button> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
    <button type="submit" id="Gem"> 
     Save</button> 
</fieldset> 
{....}

我試圖以下面的方式使用Ajax，但它刷新整個頁面。

{....} 
     var ID= 2; 
     $("#AddButton").click(function(){ 
      var ShiftName= $('#ShiftName').attr('value'); 
      var ShiftCode= $('#ShiftCode').attr('value'); 
      var Suplement= $('#Suplement').attr('value'); 
      var ExtraSuplement= $('#ExtraSuplement').attr('value'); 


      $.ajax({ 
       url: '@Url.Action("AddData", "ShiftTypesConfiguration")', 
       data: { ID: ID.toString(), ShiftName: $('#ShiftName').attr('value'), ShiftCode: $('#ShiftCode').attr('value'), Suplement: $('#Suplement').attr('value'), ExtraSuplement: $('#ExtraSuplement').attr('value') }, 
       type: 'POST', 
       //    contentType: 'application/json; charset=utf-8;', 
       dataType: 'json', 
       success: function (response) 
       { 
        function fnClickAddRow() {      
         $('#EditableTableShiftTypes').dataTable().fnAddData([ 
        response.ID, 
        response.ShiftName, 
        response.ShiftCode, 
        response.Suplement, 
         response.ExtraSuplement, 
         "<button>Delete</button>"]); } 
        } 
      }); 
      ID++; 
     }); 
{....} 


</script>

我應該處理請求的控制器中的方法。

public JsonResult AddData(string ID, string ShiftName, string ShiftCode, string Suplement, string ExtraSuplement) 
    { 
     TableViewModel tableViewModel = new TableViewModel(); 
     tableViewModel.ID = ID; 
     tableViewModel.ShiftName= ShiftName; 
     tableViewModel.ShiftCode= ShiftCode; 
     tableViewModel.Suplement= Suplement; 
     tableViewModel.ExtraSuplement= ExtraSuplement; 


     return Json(tableViewModel); 
    }

然而，它似乎並沒有工作，現在我所要求的思路和辦法，使這更好/更容易/工作

編輯：看了一份過去的錯誤

編輯2：我現在已經稍微改變它我發現我的腳本運行過程中出現錯誤，這是最新的。仍然存在問題，但至少現在我可以看到並描述錯誤。

這是我改劇本，現在是

$("#AddButton").click(function (event) { 
    event.preventDefault(); 
    var ShiftName = $('#ShiftName').attr('value'); 
    var ShiftCode = $('#ShiftCode').attr('value'); 
    var Suplement = $('#Suplement').attr('value'); 
    var ExtraSuplement = $('#ExtraSuplement').attr('value'); 


    $.ajax({ 
     url: '@Url.Action("AddData", "ShiftTypesConfiguration")', 
     data: { ID: ID.toString(), ShiftName: ShiftName, ShiftCode: ShiftCode, Suplement: Suplement, ExtraSuplement: ExtraSuplement }, 
     type: 'POST', 
     //    contentType: 'application/json; charset=utf-8;', 
     dataType: 'json', 
     success: function (response) { 
      function fnClickAddRow() { 
       $('#EditableTableShiftTypes').dataTable().fnAddData([ 
       response.ID, 
       response.ShiftName, 
       response.ShiftCode, 
       response.Suplement, 
       response.ExtraSuplement, 
       "<button>Delete</button>"]); 
      } 
     } 
    }); 
    ID++; 
});

現在螢火我見過的值後面的頁面上的幫助，但之前，我可以看到他們的頁面被刷新。

來源

2012-10-26 Helbo

fnAddData函數做什麼？你可以添加代碼嗎？此外，你可能會得到更多的信息，說明爲什麼它不能通過在Chrome或者螢火蟲上調試js來工作。 – nieve

fnAddData是一個函數，它應該添加到我使用DataTables Jquery插件時獲得的數據表的行中。我一直在試着螢火蟲。然而它似乎只是在運行而已。在某些情況下，整個頁面在表格內加載。我也沒有問題進入AddData方法。 – Helbo

你應該在你的javascript點擊函數中添加一個'event.preventDefault（）;'，當然點擊任何按鈕元素都會重新加載頁面？所以你有'.click（函數fnClickAddRow（event）{event.preventDefault（）;' – kolin

我不是在這裏寫代碼，但這裏是你應該怎麼做。

在添加/編輯/刪除時，對您的操作進行ajax調用。在Action中實現您的操作（添加/編輯/刪除），並根據操作成功完成或由於某些錯誤而失敗，請將true/false標誌返回爲json。

然後在ajax調用的成功函數success: function (response){}中，檢查返回的值是真/假，這意味着成功或錯誤。

然後使用一些jQuery你可以添加一行或從表中刪除一行。

查看這些鏈接：http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/

來源

2012-10-26 09:31:48 Yasser

如何更新一個表，而不刷新整個網站剃刀

回答

相關問題