MVC3 razor How to repeatedly add Set of fields to my page on clicking a button? - asp.net-mvc-3

Question

How to repeatedly add Set of fields to my page on clicking a button?
I have a button "Add records" on my ParentView.cshtml
on Click of this "Add records" button ,I need the below mentioned razor view(childView.cshtml) to be appended on my ParentView.Each time I click of this "Add records" button ,I need new empty ChildView.cshtml to be appended to my Parent view.Can some one help me how can I achieve this functionality ?
ChildView.cshtml
<p>Record index
#Html.EditorFor(model => model.Name)
#Html.EditorFor(model => model.Address)
#Html.EditorFor(model => model.Location)
<input type="submit" id="btnSave" value="Save" />
My ParentView.cshtml will look like below
#model MyWebRole.ViewModels.MyViewModel
#{
ViewBag.Title = "Address Book";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Html.BeginForm())
{
<fieldset>
<legend style="font-size: small;">Add Address records </legend>
<br />
<table>
<tr>
<td rowspan="5">
<img alt="" id="imageBox" src="" width="395" height="225" />
</td>
<td>
<span>Address Book </span>
<br />
</td>
<td>
#Html.EditorFor(model => model.REcordTitle)
#Html.ValidationMessageFor(model => model.REcordTitle)
</td>
</tr>
------------------------
------------------------
</table>
<div><input type="submit" id="btnAdd records" value="Add Records" /></div>
</fieldset>
}

Answer 1

You could use the built-in Ajax helpers?
#model MyWebRole.ViewModels.MyViewModel
#{
ViewBag.Title = "Address Book";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Ajax.BeginForm(new AjaxOptions() {
UpdateTargetId = "RecordSection",
InsertionMode = InsertionMode.InsertAfter,
}))
{
<fieldset>
<legend style="font-size: small;">Add Address records </legend>
<br />
<table>
<tr>
<td rowspan="5">
<img alt="" id="imageBox" src="" width="395" height="225" />
</td>
<td>
<span>Address Book </span>
<br />
</td>
<td>
#Html.EditorFor(model => model.REcordTitle)
#Html.ValidationMessageFor(model => model.REcordTitle)
</td>
</tr>
------------------------
------------------------
</table>
<div><input type="submit" id="btnAdd records" value="Add Records" /></div>
</fieldset>
}
<div id="RecordSection">
#* New Partial Views will be rendered here *#
</div>
Then in the Action which handles this you can use the Get/Post/Redirect design pattern to put a new PartialView on the Page:
[HttpPost]
public ActionResult AddressBook(MyViewModel model)
{
// do stuff with model, then pass an Id?
// to the Action which renders the partial view
return RedirectToAction("AddRecord", new { id = model.Id });
}
public ActionResult AddRecord(int id)
{
MyChildModel model = new MyChildModel();
model.Id = id;
return PartialView("_ChildView", model);
}

Answer 2

$('#btnAddRecords').click(function(){
$.getJSON("/MyController/AddRecord", null
function (data) {
$('#divToAddRecords').append(data);
});
})
In Controller:
public JsonResult AddRecord()
{
...
var res = SerializeControl("~/Views/Folder/ChildView.cshtml", viewModel);
return Json(res, JsonRequestBehavior.AllowGet);
}
private string SerializeControl()
{
var control = new RazorView(ControllerContext, controlPath, null, false, null);
ViewData.Model = model;
var writer = new HtmlTextWriter(new StringWriter());
control.Render(new ViewContext(ControllerContext, control, ViewData, TempData, writer), writer);
string value = writer.InnerWriter.ToString();
return value;
}
And change so that button that adds records does not submit