Append row to <TABLE> using Ajax.BeginForm()

Question

I have an HTML <TABLE> displaying a list of items in the rows of the table. To add a new item to the list of items I have a form which submits the data to my controller via AJAX using Ajax.BeginForm. Once the action on the controller has finished it returns a partial view containing the markup for a new row to append to my table (eg. <TR><TD>.......</TD></TR>). My question is how do I add the new row my existing table?

I have create an at the top of the as my header with the id "userrightsgridheader" and specified my Ajax.BeginForm as follows:

<% using (Ajax.BeginForm(
                   "CreateUserRight",
                    new { workstationId = Model.Id },
                    new AjaxOptions
                    {
                        HttpMethod = "POST",
                        InsertionMode = InsertionMode.InsertAfter,
                        UpdateTargetId = "userrightsgridheader"
                    }
                ))
               {  %>

The problem is that this does not work. Does anyone have any ideas on how to achieve this?

Thanks!

Answer 1

You can add the following AjaxOption, this executes 'jsfunction' when the Ajax functionality executed successfully:

new AjaxOptions { OnSuccess = "jsfunction" };

You can add the tablerow in the jsfunction.

update you can define jsfunction as follows:

function jsfunction(ajaxContext) {
    //ajaxContext contains the responseText
}

AjaxContext is defined as follows:

AjaxContext ajaxContext = new AjaxContext(request, updateElement, loadingElement, ajaxOptions.InsertionMode);