Question

I have an asp.net view which has two partial views. One for edit information and other one for displaying list of changes that were made. When I hit the update button, the list is not updated. I used ajax.begin form. How can I do this?

Main view has like this:

   <div class="accountdetails1">
    @Html.Action("UpdateAccountDetails", new { dispute = dispute })
    </div>

    <div>
    list of changes
    @Html.Action("GetAccountAudit")

    </div>

updateAccountDetails is like this in start:

@using (Ajax.BeginForm("UpdateAccountDetails", new AjaxOptions
{
    LoadingElementId = "loading",
    LoadingElementDuration = 2000,
    OnSuccess = "OnSuccess",
    OnBegin = "OnBegin",
}))
{

and functions are like this:

<script type="text/javascript">
    function OnSuccess() {
        var div = $('#dvMessage');
        div.html('');
        div.append('Account Information has been updated.');
    }

    function OnBegin() {
        var div = $('#dvMessage');
        div.html('');
    }
</script>

to show success or failure of update Do I need to update change list in success method? Please suggest

Answer 1

@Ajax methods works in following way:

@Ajax.ActionLink – requests HTML from pointed action via AJAX and puts result in HTML element with id equals to UpdateTargetId value specified in AjaxOptions.

@Ajax.BeginForm – gets the all inputs and selects and other form elements inside using(Ajax.BeginForm()) { .. } and submits it to specified action (using AJAX) then puts response to HTML element with id specified in AjaxOptions.UpdateTargetId property.

So you need something like

<div id="myContainer" >
@using(Ajax.BeginForm("yourActionToProcessEdits", new AjaxOptions { UpdateTargetId = "myContainer" }))
{
.. Form for edit information
@Html.EditorFor(m => m.EditMe)
...

<input type="submit" value="Update" />

.. Display changes here
@Html.Raw(Model.MyChanges)

}