How to add elements without reloading the page - ajax

Question

I create view by model Article.
class Article
{
public string Title {get;set;}
public List<string> Terms {get;set}
}
Terms - can be any count, and I want that they can be added gradually
#using (Html.BeginForm("Create"))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>CreateArticle</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
Terms:
</div>
<div id="divList">
</div>
#using (Ajax.BeginForm("Update", new AjaxOptions() { Confirm = "Add", HttpMethod = "Post", UpdateTargetId = "divList", InsertionMode = InsertionMode.InsertAfter }))
{
#Html.Partial("_TermPP", "")
<input id="count" name="count" type="hidden" value="-1" />
<input type="submit" value="add" onclick="javascript:plus()" />
}
</fieldset>
}
_TermPP:
#model String
<div>
<input type="text" name="terms[#(ViewBag.Count==null?0:ViewBag.Count)]" value="#(Model == null ? "" : Model)" /> </div>
when the click is sent to a form of ADD but I need to create on the Update. How do this?

Answer 1

You may take a look at the following blog post. Also please note that you cannot nest 2 <form> elements as you did in your code - this is invalid HTML and might result in undefined behavior.