Let's go to the scenario: A view, which contains a form, is loaded via Ajax (load) into a modal (bootstrap) and then this modal is presented. The form is built by the helper @ Ajax.BeginForm where the reference to an "OnSuccessAddEntity" function is to handle the result of the submit.
The problem: Everything works except the "OnSuccessAddEntity" function call where it displays the "Uncaught ReferenceError: OnSuccessAddEntity not defined" message.
What has been verified: If the definition of this function is within the view that is loaded via ajax works, but I do not want to be injecting script inside the html, as I know it is not a good practice. When the definition is in the call view of the load it is as if the function was out of scope, there is the part that I am not understanding.
Following examples codes:
Controller
using System;
using System.Web.Mvc;
using App.ViewModels;
namespace App.Controllers
{
public class EntityManagerController : Controller
{
//GET: /entitymanager
public ActionResult Index()
{
return View();
}
//GET /entitymanager/listentities
public ActionResult ListEntities()
{
var entities = DBContext.Entity.ToList();
return Json(new { data = entities }, JsonRequestBehavior.AllowGet);
}
//GET /entitymanager/addentity
public ActionResult AddEntity()
{
return View();
}
//POST /entitymanager/addentity
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult AddEntity(EntityViewModel pEntityViewModel)
{
if (ModelState.IsValid)
{
DBContext.Entity.Add(pEntityViewModel);
return Json(new { Ok = true });
}
ModelState.AddModelError(String.Empty, "Existe(m) erro(s) no preenchimento do formulário");
return View(pEntityViewModel);
}
}
}
View modal caller
<!-- MAIN CONTENT -->
<div id="content">
<!-- row -->
<div class="row">
<div class="col-xs-3 col-sm-7 col-md-7 col-lg-7 text-right">
<button class="btn btn-success" id="btnAddEntity">
<i class="fa fa-plus"></i> <span class="hidden-mobile">Add Entity</span>
</button>
</div>
</div>
<div class="row">
<table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Entity</th>
</tr>
</thead>
<tbody>
/@ Mostra conteudo via AJAX com Datatable @/
</tbody>
</table>
</div>
</div>
//Espaço para abertura do Modal
<div class="modal fade" id="mdlEntityManager" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
</div>
<!-- END MAIN CONTENT -->
@section Scripts {
<script type="text/javascript">
$(document).ready(function() {
//Com o click do botão "Add Entity", carrega o conteudo da view AddEntity dentro do Modal e mostra o modal.
$("#btnAddEntity").click(function() {
$("#mdlEntityManager").load("@Url.Action("AddEntity", "EntityManager")", function() {
$("#mdlEntityManager").modal("show");
});
});
//Executa o submit do formulario.
$("#mdlEntityManager").on("click", "#btnSalveAddEntity", function() {
$("#frmAddEntity").submit();
});
//Funcão do onSuccess do "Ajax.BegimForm
var onSuccessAddEntity = function(result) {
if (result.Ok) {
$("#mdlEntityManager").modal("hide");
window.location.href = "@Url.Action("Index", "EntityManager")";
}
}
});
</script>
}
View loaded within modal
@model App.ViewModels.EntityViewModel
@{
Layout = null;
}
<!-- Modal -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Add Entity</h4>
</div>
<div class="modal-body">
@Html.ValidationSummary(true, "", new { @class = "alert alert-danger" })
@using (Ajax.BeginForm("AddEntity", "EntityManager",
new AjaxOptions
{
OnSuccess = "onSuccessAddEntity",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "mdlEntityManager",
HttpMethod = "POST",
}, new {id = "frmAddEntity"}))
{
@Html.AntiForgeryToken()
<div class="row">
<div class="col-md-12">
<div class="form-horizontal">
<div class="form-group">
@Html.DisplayNameFor(model => model.Description, htmlAttributes: new {@class = "control-label col-md-3"})
<div class="col-md-9">
@Html.EditorFor(model => model.Description, new {htmlAttributes = new {@class = "form-control", placeholder = "Entity description"}})
</div>
</div>
</div>
</div>
</div>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary" id="btnSalveAddEntity">
Salve
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
<!-- /.modal -->