Update partial view after submit Ajax.Beginform

Question

I am new at .NET mvc.

In a view "DisplayThings" I have something like:

@foreach (var thing in Model)
{
    @Html.Partial("DisplayPartial", thing)
}

In the partial view "DisplayPartial" I have

@using (Ajax.BeginForm("Afunc", new AjaxOptions ()))
{
    @Html.EditorFor(model => model.AstringThing)
    @Html.EditorFor(model => model.AintThing)

    <input type="submit" name="submit" value="Ajax Post" />
}

At the moment the "Afunc"-Action saves the model to the database and then redirects to a controller action to retrieve all "things" from the database and render the entire "Displaythings" View.

My question is: When i press one of the submitbuttons (There is one submitbutton for every "thing" i the list). I want only that partial view to reload/reflect on my change. I dont want to reload the entire "Displaythings" view. How do I do this? If I just return a partial view I lose everything else but that partial view.

If this is a bad approach please give me directions.

Update:

I am still doing something wrong as I get the partial view rendered in a new page. My controller :

public ActionResult Afunc(ThingModel thingmodel)
{
    // do

    return PartialView("DisplayPartial", thingmodel);
}

I have tried using UpdateTargetId and onsuccess both with the same result (A new page)

Answer 1

In the AjaxOptions that your are simply now passing as new AjaxOptions you can specify the target element using the UpdateTargetId property:

<div id="unique_thing_id">
@using (Ajax.BeginForm("Afunc", new AjaxOptions { UpdateTargetId = 'unique_thing_id' }))
{    
}
</div>

Above, a container with unique id for every "thing" is represented with <div id="unique_thing_id">. This will be replaced with the repsonse of the request. Change Afunc to render only the particular "thing" partial.