Imagine below MVC parent model:

Model:

Namespace MyProject.SampleModel
{
     public class ViewModelExample {
           public FirstModel BoolValues { get; set; }
           public SecondModel NamesValues { get; set; }
     }
}

Namespace MyProject.SampleModel
{
   public class FirstModel
   {
     public bool MyBoolean1 { get; set; }
     public bool MyBoolean2 { get; set; }
   }

   public class SecondModel
   {
     public string FirstName { get; set; }
     public string LastName { get; set; }
   }
}

View:

@model MyProject.SampleModel.ViewModelExample

@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, htmlAttributes: new { id = "Myform" }))
{

   (...)

   @Html.CheckBoxFor(m => m.BoolValues.MyBoolean1)

   (...)

    <input id="submitButton" type="button" value="Add" onclick="InitiateSequence();" />

   (...)
}

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

      (...)

      function InitiateSequence()
      {
            // Do some stuff
      }

      (...)
      function ScriptSample() {

            if(@(Model.BoolValues.MyBoolean1 ? "true" : "false")
            {
                 // It's true, do some stuff
            }
            else
            {
                 // It's false, do some stuff
            }
      }

</script>

Controller:

public ActionResult MyAction(ViewModelExample model)
        {
            model.FirstModel = new TestsModel(); // I do not instantiate SecondModel as in the view for this controller i do not use it

            return View(model);
        }

Page is loading correctly, but when I click on the button it says javascript function InitiateSequence is not defined.... what's happening?

Imagine below MVC parent model:

Model:

Namespace MyProject.SampleModel
{
     public class ViewModelExample {
           public FirstModel BoolValues { get; set; }
           public SecondModel NamesValues { get; set; }
     }
}

Namespace MyProject.SampleModel
{
   public class FirstModel
   {
     public bool MyBoolean1 { get; set; }
     public bool MyBoolean2 { get; set; }
   }

   public class SecondModel
   {
     public string FirstName { get; set; }
     public string LastName { get; set; }
   }
}

View:

@model MyProject.SampleModel.ViewModelExample

@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, htmlAttributes: new { id = "Myform" }))
{

   (...)

   @Html.CheckBoxFor(m => m.BoolValues.MyBoolean1)

   (...)

    <input id="submitButton" type="button" value="Add" onclick="InitiateSequence();" />

   (...)
}

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

      (...)

      function InitiateSequence()
      {
            // Do some stuff
      }

      (...)
      function ScriptSample() {

            if(@(Model.BoolValues.MyBoolean1 ? "true" : "false")
            {
                 // It's true, do some stuff
            }
            else
            {
                 // It's false, do some stuff
            }
      }

</script>

Controller:

public ActionResult MyAction(ViewModelExample model)
        {
            model.FirstModel = new TestsModel(); // I do not instantiate SecondModel as in the view for this controller i do not use it

            return View(model);
        }

Page is loading correctly, but when I click on the button it says javascript function InitiateSequence is not defined.... what's happening?

• javascript
• asp-mvc
• asp-mvc-4
• razor

Share Improve this question Follow edited Sep 21, 2013 at 20:57 tereško 58.5k2525 gold badges100100 silver badges150150 bronze badges asked Sep 21, 2013 at 20:51 WillyWilly 10.7k3131 gold badges169169 silver badges341341 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

That could be because most possibly the function appears where it is not supposed to be. Also don't use inline attributes to bind the handlers, use event binding instead of inline handler.

<input id="submitButton" type="button" value="Add" />

and

<script type="text/javascript">

  (...) //whatever code

  $(function(){
     $('#submitButton').on('click', InitiateSequence);
  });