Ajax.BeginForm () does not work MVC - uncaught JavaScript error - unexpected token (

Question

I am trying to make an ajax form in MVC, here is my step: I am creating a Model MyModel class :

public class MyModel
{
    [Required]
    public string Name { get; set; }
    public int iexNum { get; set; }
    public InMyModel inMyModel { get; set; }
    public string selectedCombo { get; set; }
    public List<string> collection { get; set; }
}

public class InMyModel
{
    public string Name { get; set; }
    public int Num { get; set; }
}

I added two scripts to my layout:

<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

and this is my form:

          @{
    Html.EnableClientValidation();
}
@using (Ajax.BeginForm("MyFunction", "Home",
    new AjaxOptions
    {
        HttpMethod = "POST",
        OnBegin = "function(){ loadingPanel.Show(); }",
        OnComplete = "function(){ loadingPanel.Hide(); }",
        UpdateTargetId = "mycontent",
        InsertionMode = InsertionMode.Replace
    },
    new
    {
        id = "validationForm",
        @class = "edit_form",
        style = "height: 200px; width: 600px;"
    }))
{

    <div id="mycontent">
        @Html.Partial("_ajaxForm", Model)
    </div>

}

when I launch the application and click on the form, I get javascript uncaught error, as in this screenshot:

As you can see, there is a fuzzy error in jquery.unobstusive.ajax.min.js. Will someone help, please !?

Answer 1

I found a problem, this line is not very good!

    OnBegin = "function(){ loadingPanel.Show(); }",
    OnComplete = "function(){ loadingPanel.Hide(); }",

I changed it to:

    OnBegin = "onBegin",
    OnComplete = "onEnd",

and implement this function in my javascript file and it works!