MVC How to change a buttons text on submit - asp.net-mvc

Question

I'm trying to create a simple MVC 4 app with a few buttons that when clicked adds one to their text value. The problem is when I use < input > buttons I can't change the text value when I submit the form and when I use < button > then there is nothing passed to the action.
I have a simple SQL Database that the controller hits which is where the initial ViewData values are coming from and how it's storing the buttons current value.
Also I'm currently trying to do this with multiple forms but if it is possible with one form then that would be ideal.
#using (Ajax.BeginForm("AddOne", "Home", null, new AjaxOptions { UpdateTargetId = "btn-tc-top"}, new { #class = "rectangle-top" }))
{
<input type="submit" class="button" name="button" id="btn-tc-top" value="#ViewData["ct-t"]"/>
}
#using (Ajax.BeginForm("AddOne", "Home", null, new AjaxOptions { UpdateTargetId = "btn-tc-bottom"}, new { #class = "rectangle-bottom" }))
{
<button type="submit" class="button" name="button" id="btn-tc-bottom">#ViewData["ct-b"]</button>
}

Answer 1

You could subscribe to the OnSuccess handler:
#using (Ajax.BeginForm("AddOne", "Home", new { id = "btn-tc-top" }, new AjaxOptions { OnSuccess = "addSuccess" }, new { #class = "rectangle-top" }))
{
<input id="btn-tc-top" class="button" type="submit" name="button" value="#ViewData["ct-t"]" />
}
#using (Ajax.BeginForm("AddOne", "Home", new { id = "btn-tc-bottom" }, new AjaxOptions { OnSuccess = "addSuccess" }, new { #class = "rectangle-bottom" }))
{
<input id="btn-tc-bottom" class="button" type="submit" name="button" value="#ViewData["ct-b"]" />
}
which could be defined like this:
function addSuccess(result) {
$('#' + result.id).val(result.text);
}
and the controller:
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["ct-t"] = "1";
ViewData["ct-b"] = "2";
return View();
}
[HttpPost]
public ActionResult AddOne(string id, int button)
{
return Json(new { id = id, text = button + 1 });
}
}