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)

Solution

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.

Comments

[Andreas]

I will accept you answer since you pointed out something I was missing. THat was however only one of 2 things I had missed. A common issue is to forget(after surfing the net) to add this to your layoutpage: <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

[Jack]

@manojlds I opened a new question, could you please have a look at this question?