MVC5 Ajax.BeginForm, UpdateTargetId no render PartialView - ajax

Question

I have a problem with my MVC application.
My controller:
public class CustomerController : Controller
{
CustomerFacade cf = new CustomerFacade();
public ActionResult Create()
{
return View();
}
[HttpPost]
public void Create(Customers customers)
{
if (customers != null)
{
cf.CreateCustomer(customers, UserSession.UserId);
}
// return View();
}
public ActionResult GetAllCustomers()
{
var allCustomers = cf.GetAllCustomers();
return PartialView("InsuranceCustomer", allCustomers);
}
}
My main view:
<div class="x_content">
<div id="mainb" style="height:350px;">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
<i class="fa fa-plus"></i>
</button>
#*render modal*#
#Html.Partial("~/Views/Customer/CreateModal.cshtml")
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
<i class="fa fa-database"></i>
</button>
#*render modal*#
<div id="customerId">
#Html.Action("GetAllCustomers", "Customer")
</div>
</div>
</div>
The partial view CreateModal.cshtml is a form on bootstrap modalpopup:
for example:
<div class="modal-body">
#using (Ajax.BeginForm("Create", "Customer", null, new AjaxOptions
{
HttpMethod = "Post",
UpdateTargetId = "customerId",
OnSuccess = "$('#customerModal').modal('hide')"
}))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
<div class="col-md-4">
#Html.TextBoxFor(model => model.FirstName, new { #required = "require", #class = "form-control", placeholder = #Resources.InsuranceCustomer.FirstName })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
<div class="col-md-4">
#Html.TextBoxFor(model => model.LastName, new { #required = "require", #class = "form-control", placeholder = #Resources.InsuranceCustomer.LastName })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
// and other field form
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" value="#Resources.Common.Save" class="btn btn-success" />
</div>
}
#*<div>
#Html.ActionLink("Back to List", "Index")
</div>*#
</div>
and InsuranceCustomer looks like:
#model IEnumerable<Insurance_System.Models.Customers>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.FirstName)
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
</tr>}
I want to after submiting modal CreateModal loaded again InsuranceCustomer with new element without reloading page.
(sorry for my bad English)

Answer 1

in the controller
public ActionResult Create()
{
return View();
}
[HttpPost]
public void Create(Customers customers)
{
var cust = new customer
{
name=customers.name,
etc....
}
db.customers.add(cust);
db.savechanges();
var listcustomers = db.customers.ToList();
return PartialView("InsuranceCustomer",listcustomers);
}
in the View
<div class="x_content">
<div id="mainb" style="height:350px;">
<div id="customerId">
#*here will be load your partialview*#
</div>
</div>
</div>
<div class="modal-body">
#using (Ajax.BeginForm("Create", "Customer", null, new AjaxOptions
{
HttpMethod = "Post",
UpdateTargetId = "customerId",
OnSuccess = "$('#customerModal').modal('hide')"
}))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
<div class="col-md-4">
#Html.TextBoxFor(model => model.FirstName, new { #required = "require", #class = "form-control", placeholder = #Resources.InsuranceCustomer.FirstName })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
<div class="col-md-4">
#Html.TextBoxFor(model => model.LastName, new { #required = "require", #class = "form-control", placeholder = #Resources.InsuranceCustomer.LastName })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
// and other field form
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" value="#Resources.Common.Save" class="btn btn-success" />
</div>
}
#*<div>
#Html.ActionLink("Back to List", "Index")
</div>*#
</div>
in the partial view
#model IEnumerable<Insurance_System.Models.Customers>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.FirstName)
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
</tr>}