title: How can I update a Table without refresh the entire site razor
body: <p>Hi I'm working on a table </p>
  
  <p>I cannot atm update the table without the site refreshing. 
  I need a way to easily</p>
  
  <p>Add a row ,Delete a row, Modify a row in a table's content.</p>
  
  <p>my table is build like this.</p>
  
  <pre><code>{....}
  @using (Html.BeginForm())
  {
  &lt;fieldset&gt;
      &lt;legend&gt;ShiftTypes&lt;/legend&gt;
      &lt;table class="EditableTable" id="EditableTableShiftTypes"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      #:
                  &lt;/th&gt;
                  &lt;th&gt;
                      ShiftName:
                  &lt;/th&gt;
                  &lt;th&gt;
                      ShiftCode:
                  &lt;/th&gt;
                  &lt;th&gt;
                      Suplement:
                  &lt;/th&gt;
                  &lt;th&gt;
                      ExtraSuplement:
                  &lt;/th&gt;
                  &lt;th&gt;
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              @foreach (BPOPortal.Domain.Models.ShiftTypeView type in Model.ShiftTypeList)
              {
                  &lt;tr&gt;
                      &lt;td&gt;
                          @type.ID
                      &lt;/td&gt;
                      &lt;td&gt;
                          @type.ShiftName
                      &lt;/td&gt;
                      &lt;td&gt;
                          @type.Name
  
                      &lt;/td&gt;
                      &lt;td&gt;
                          @type.Supplement
  
                      &lt;/td&gt;
                      &lt;td&gt;
                          @type.OneTimePayment
  
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;button&gt;
                              Delete&lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              }
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;label&gt;
                      &lt;/label&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.Editor("ShiftName")
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.Editor("ShiftCode")
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.Editor("Suplement")
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DropDownList("ExtraSuplement", new SelectListItem[] { new SelectListItem() { Text = "yes", Value = "true", Selected = false }, new SelectListItem() { Text = "No", Value = "false", Selected = false } }, "--Choose--")
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;button id="AddButton"&gt;
                          Add&lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;button type="submit" id="Gem"&gt;
          Save&lt;/button&gt;
  &lt;/fieldset&gt;
  {....}
  </code></pre>
  
  <p>I've Tried to use Ajax in the following way but it refreshes the entire page.</p>
  
  <pre><code>{....}
          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,
                           "&lt;button&gt;Delete&lt;/button&gt;"]); } 
                      }
              });
              ID++;
          });
  {....}
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>My Method in the Controller that should handle the request.</p>
  
  <pre><code>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);
      }
  </code></pre>
  
  <p>However it doesn't seem to work Now I'm asking For Ideas and ways to make this better/easier/Working </p>
  
  <p><strong>Edit</strong>:saw a copy past Error</p>
  
  <p><strong>EDIT2:</strong> I've now changed it slightly I found that I had a error in how my script was running this is the latest. there are still problems but at least now I can see and describe the error.</p>
  
  <p>this is what I changed the script is now </p>
  
  <pre><code> $("#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,
                   "&lt;button&gt;Delete&lt;/button&gt;"]);
              }
          }
      });
      ID++;
  });
  </code></pre>
  
  <p>now with the help of firebug I've seen that the values are back on the page but before I can see them the page is refreshed.</p>