如何更新一个表，而不刷新整个网站剃刀

我不能大气压更新表未经本站清爽。我需要一种方法来轻松地

添加一行，删除一行，修改表格内容中的一行。

我的桌子是这样构建的。

{....} 
@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

如何更新一个表，而不刷新整个网站剃刀

回答

相关问题