Uncaught ReferenceError: function not defined, load via ajax in partial view with ASP.NET MVC

0

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">
                    &times;
                </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 -->
    
asked by anonymous 08.08.2016 / 18:13

0 answers