Multiple form in MVC 3 and Ajax - asp.net-mvc-3

Question

My page in working perfectly with postback. My problem is that it's kind of anoying every ingredients or subtitles that people submit, it reloads the entire page. So, I though that it could be a good way to learn a little bit of ajax... I've read a lot of article, and I got confused. Some people are using Ajax.Beginform and others are using the $.ajax from jQuery inside an event of jQuery (submit for example). I've read that the second approach is better but I don't know if it's possible with the way my form is done.
Here is the important part of my View. To summarize, I have a list of subtitle, and each of the subtitle can contain a list of ingredients. One of the form can submit ingredients, and the other can submit subtitle. The first one can appear multiple time (in each of the subtitle).
<div id="Ingredients">
<h2>Ingrédients</h2>
#foreach (RecettesMaison.Models.Subtitle sub in Model.Subtitles)
{
<h4>#Html.DisplayFor(modelItem => sub.Name)</h4>
<ul id="ing#nSubtitle">
#foreach (RecettesMaison.Models.Ingredient ing in sub.Ingredients)
{
<li>#Html.DisplayFor(modelItem => ing.QuantityAndName)</li>
}
</ul>
using (Html.BeginForm("AddIngredient", "Recipe", new { subname = sub.Name }, FormMethod.Post))
{
#Html.HiddenFor(model => model.IDRecipe)
<a name="IngredientSection" ></a>
<input class="field required span6 text-box single-line" id="nameingredient" name="nameingredient" />
<input type="submit" class="btn btn-success" value="Ajouter un ingrédient" />
}
nSubtitle++;
}
#using (Html.BeginForm("AddSubtitle", "Recipe", FormMethod.Post))
{
#Html.HiddenFor(model => model.IDRecipe)
<a name="SubtitleSection" ></a>
<input class="field required span6 text-box single-line" name="Name" />
<input type="submit" class="btn btn-success" value="Ajouter une catégorie d'ingrédient" />
}
</div>
My first approach was that if a submit is successful, I would "refresh" the two foreach with the new data. But the approach I've seen on must tutorial is to use a partial view and refresh only the partial view inside of a div. But in my case, my Html.BeginForm would be inside the partial view so I don't think it would work. I also think about just appending html at the end of my list but it will only work of the ingredient. So the best way would be to refresh both for each
So, my general question
How can I do that? :)
Thanks!

Answer 1

Ajax.BeginForm vs .ajax()
Both accomplish the same thing. Ajax.BeginForm will hide the javascript details so .ajax() will probably give you a better foundation in understanding the pattern especially if you ever need to work outside of MS technologies.
AJAX with Partial Views
It's entirely possible and there are many examples on the web even here on SO. The general idea is you're just replacing a div with partial view content retrieved via AJAX.
If the div is static, then your jquery selectors are quite simple.
If the div is dynamically generated, then you'll need to do some DOM traversing to find the target div.
Without seeing your attempts it is hard to give you specific help. I suggest you start with a simple example with a single partial view and form and update it using AJAX. Then you can move to a more complex situation with multiple forms once you understand the mechanics.