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

my page in working postback. problem it's kind of anoying every ingredients or subtitles people submit, reloads entire page. so, though way learn little bit of ajax... i've read lot of article, , got confused. people using ajax.beginform , others using $.ajax jquery inside event of jquery (submit example). i've read second approach better don't know if it's possible way form done.

here important part of view. summarize, have list of subtitle, , each of subtitle can contain list of ingredients. 1 of form can submit ingredients, , other can submit subtitle. first 1 can appear multiple time (in each of 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 if submit successful, "refresh" 2 foreach new data. approach i've seen on must tutorial use partial view , refresh partial view inside of div. in case, html.beginform inside partial view don't think work. think appending html @ end of list work of ingredient. best way refresh both each

so, general question

how can that? :)

thanks!

ajax.beginform vs .ajax()

both accomplish same thing. ajax.beginform hide javascript details .ajax() give better foundation in understanding pattern if ever need work outside of ms technologies.

ajax partial views

it's entirely possible , there many examples on web here on so. general idea you're replacing div partial view content retrieved via ajax.

• if div static, jquery selectors quite simple.
• if div dynamically generated, you'll need dom traversing find target div.

without seeing attempts hard give specific help. suggest start simple example single partial view , form , update using ajax. can move more complex situation multiple forms once understand mechanics.