Как увеличить значение при нажатии кнопки мыши в MVC (ajax call not form submit)?

Question

Я попытался увеличить счет при нажатии кнопки (ajax call) в MVC, но значение увеличивается только один раз. На самом деле, я обновляю модель после приращения, но не поддерживает обновленную модель. пожалуйста, предложите, как решить?

Моя конечная цель: Что я хочу, это вызов ajax. Я хочу передать модель в actionmethod и сделать некоторое значение для модели и отправить обратно. а при нажатии следующей кнопки я должен отправить обновленную модель. это все.

public class MyModel 
{ 
    public int Integer { get; set; } 
    public string Str { get; set; } 
} 

public class Test1Controller : Controller 
{ 
    [HttpGet] 
    public ActionResult Index() 
    { 
     var m = new MyModel(); 
     return View("Test1", m); 
    } 

    [HttpPost] 
    public ActionResult ChangeTheValue(MyModel model) 
    { 
     model.Integer++; 
     UpdateModel(model); 
     return Json(model.Integer.ToString()); 

    } 

} 
enter code here 
@model MvcApplication2.Model.MyModel 

@{ 
    ViewBag.Title = "Test1"; 
    } 
    <script src="~/Scripts/jquery-2.2.0.js"></script> 
    <script src="~/Scripts/jquery-ui-1.11.4.js"></script> 

    <h2>Test1</h2> 
    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "form1"   })) 
    { 
     <div> 
     <input type="button" onclick="ajaxcall()" id="changeButton" value="Click Me!" /> 
     <input type="text" value="@Model.Integer" class="txt" id="str" name="str" /> 

    </div> 
    } 
    <script type="text/javascript"> 
     function ajaxcall() { 
      $.ajax({ 
      type: 'POST', 
      url: '@Url.Action("ChangeTheValue", "Test1")', 
      data: $('form1').serialize(), 
      cache: false, 
      async: true, 
      success: function (data) { 
       $("#str").val(data); 
      }, 
      error: function (data) { 
       alert("Err " + data); 
      } 

      }); 
     } 


     </script> 

Answer 1

Попробуйте отправить данные по стоимости ул вместо всей формы:

function ajaxcall() { 
      $.ajax({ 
      type: 'POST', 
      url: '@Url.Action("ChangeTheValue", "Test1")', 
      data: $('#str').val(), 
      cache: false, 
      async: true, 
      success: function (data) { 
       $("#str").val(data); 
      }, 
      error: function (data) { 
       alert("Err " + data); 
      } 

      }); 

Answer 2

Прежде всего, ваш Jquery selecctor для формы не так! Поскольку form1 это идентификатор, вы должны префикс с #

data: $('#form1').serialize(), 

И в методе действий, вы обновляете значение свойства Integer. Но вы задаете ему поле с именем str после вызова ajax. Поэтому в следующий раз, когда вы нажмете еще раз, он будет читать значение по умолчанию Integar (оно равно 0 и увеличивает его до 1) и возвращает вас снова. (Это происходит из-за все клики, так как вы не посылать обновленное значение этого свойства) .so в идеале вы должны исправить вашу форму, чтобы иметь правильные имена полого

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "form1" })) 
{ 
    <div> 
     <input type="button" onclick="ajaxcall()" id="changeButton" value="Click Me!" /> 
     @Html.TextBoxFor(f => f.Str) 
     @Html.TextBoxFor(f=>f.Integer) 

    </div> 
} 

И в случае успеха вы должны быть обновив поле формы для Integer.

success: function (data) { 
    $("#Integer").val(data); 
},