Question

Hi I’m working on a table

I cannot atm update the table without the site refreshing.
I need a way to easily

Add a row ,Delete a row, Modify a row in a table’s content.

my table is build like this.

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

I’ve Tried to use Ajax in the following way but it refreshes the entire page.

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

My Method in the Controller that should handle the request.

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);
    }

However it doesn’t seem to work Now I’m asking For Ideas and ways to make this better/easier/Working

Edit:saw a copy past Error

EDIT2: 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.

this is what I changed the script is now

 $("#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++;
});

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.

Answer 1

I am not writing in code here, but here is how you should do it.

On Add/Edit/Delete make an ajax call to your action. In your Action implement your operation (Add/Edit/Delete) and depending on operation completed successfully or failed due to some error, return a true/false flag as json.

Then in the success function success: function (response){} of the ajax call, check wether the value returned is a true/false which means success or error.

And then using some jquery you can add a row or delete a row from the table.

Check out these links : http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/