title: Razor: button click not fired correctly
body: <p>I have a view. I want to load it to get all information then click <strong>Edit</strong> or <strong>Delete</strong> button to do something. When click <strong>Edit</strong> button then I hope it goes to another view.</p>
  
  <pre><code>    @model Models.CountryLanguagesModel
  
  @{
      ViewBag.Title = "Language";
  }
  
  
  &lt;div class="span4 proj-div text-center" data-toggle="modal" data-target="#addLanguageModal"&gt;
      &lt;u&gt;Add Language&lt;/u&gt;
      &lt;div&gt;&lt;br /&gt; &lt;/div&gt;
  
      &lt;table class="table table-bordered table-dark-header table-responsive"&gt;
          &lt;tr&gt;
              &lt;th class="text-center"&gt;Language Name&lt;/th&gt;
              &lt;th class="text-center"&gt;Welcome Message&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
  
  
          @foreach (var item in Model.CountryLanguages)
          {
              &lt;tr&gt;
                  &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.LanguageName)&lt;/td&gt;
                  &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.WelcomeMessage)&lt;/td&gt;
  
              &lt;/tr&gt;
          }
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="col-md-8 col-md-offset-2"&gt;
          &lt;button class="btn btn-success" id="editLanguage"&gt;Edit&lt;/button&gt;
          &lt;button class="btn btn-danger" id="deleteLanguage"&gt;Delete&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="modal fade" id="addLanguageModal"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                  &lt;h3&gt;Add Language&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="form-group"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="left"&gt;
                          &lt;label&gt;Language Name:&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="right"&gt;
                          &lt;input type="text" class="form-control" name="languageName" id="languageName" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;div class="left"&gt;
                          &lt;label&gt;Welcome Messagee:&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="right"&gt;
                          &lt;input type="text" class="form-control" name="welcomeMessage" id="welcomeMessage" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
  
                  &lt;button class="btn btn-gray" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
                  &lt;button class="btn btn-primary" id="addLanguageBtn"&gt;Save&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  @section scripts
  {
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $("#addLanguageBtn").on("click", function (evt) {
                  var CountryId = @Model.CountryId;
                  var languageName = $("#languageName").val();
                  var welcomeMessage = $("#welcomeMessage").val();
                  $.post("/Country/AddLanguage", { id: CountryId, languageName: languageName, welcomeMessage: welcomeMessage }, function (data) {
  
                      $("#languageName").val("");
                      $("#welcomeMessage").val("");
                      $("#addLanguageModal").modal('hide');
                  });
              });
  
              $("#editLanguage").on("click", function (evt) {
                  var CountryId = @Model.CountryId;
                  $.post("/Country/LanguageEdit", { id: CountryId }, function () {
                  });
              });
  
              $("deleteLanguage").on("click", function (evt) {
                  var CountryId = @Model.CountryId;
                  $.post("/Country/LanguageDelete", { id: CountryId }, function () {
                  });
              });
          });
      &lt;/script&gt;
  }
  </code></pre>
  
  <p>Now the question is when the page loaded, I found the the code reached click event script. It is strange. When I click the button, it doesn't reach the script. But it goes to the controller action method,</p>
  
  <pre><code> [HttpPost]
      public ActionResult LanguageEdit(MyModel model)
      {
  </code></pre>
  
  <p>I guess some stupid error to cause the onclick event not fired correctly, but I can't figure it out.</p>
  
  <p><strong>EDIT</strong></p>
  
  <pre><code> public ActionResult LanguageEdit(int id)
      {
          var model = new CountryLanguageModel();
          model.CountryId = id;
          model.CountryLanguageQuestion = MyService.GetQuestion(x =&gt; x.CountryId == id);
          return View(model);
      }
  </code></pre>