MvC multiple submits diffrent columns same row - asp.net-mvc-4

Question

So this is the code, i have 2 submit buttons when i press "Start" I want it to send the Datetime.now to the start row, and when i press "Stop" i want it to send the Stop datetime.now to the column, this should be happening in the same row. And when i press Start again it should generate a new ID 2, etc. print the start date on the second row.
Exampel ID 1 : Start 2013-11-15 05:12 Slut : 2013-11-15 05:15
Greetings Patrik
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="editor-label">
#Html.LabelFor(model => model.Start)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Start, new { style = "display: none;", #Value = #DateTime.Now })
#Html.ValidationMessageFor(model => model.Start)
</div>
<p>
<input type="submit" name="#Html.NameFor(x => x.Command)" value="Start" formaction="/tider/create" />
</p>
}
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="editor-label">
#Html.LabelFor(model => model.Slut)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Slut, new { #Value = #DateTime.Now })
#Html.ValidationMessageFor(model => model.Slut)
</div>
<p>
<input type="submit" name="#Html.NameFor(x => x.Command)" value="Stop" />
</p>
}
</fieldset>
<div class="editor-label">
#Html.LabelFor(model => model.Slut)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Slut, new { #Value = #DateTime.Now })
#Html.ValidationMessageFor(model => model.Slut)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
controller
{
public class TiderController : Controller
{
private TiderDBContext db = new TiderDBContext();
//
// GET: /Tider/
public ActionResult Index()
{
return View(db.Tider.ToList());
}
//
// GET: /Tider/Details/5
public ActionResult Details(int id = 0)
{
ArbetsTider arbetstider = db.Tider.Find(id);
if (arbetstider == null)
{
return HttpNotFound();
}
return View(arbetstider);
}
//
// GET: /Tider/Create
public ActionResult Create()
{
return View();
}
//
// POST: /Tider/Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(ArbetsTider arbetstider)
{
if (ModelState.IsValid)
{
db.Tider.Add(arbetstider);
db.SaveChanges();
}
return View(arbetstider);
}
//
// GET: /Tider/Edit/5
public ActionResult Edit(int id = 0)
{
ArbetsTider arbetstider = db.Tider.Find(id);
if (arbetstider == null)
{
return HttpNotFound();
}
return View(arbetstider);
}
//
// POST: /Tider/Edit/5
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(ArbetsTider arbetstider)
{
if (ModelState.IsValid)
{
db.Entry(arbetstider).State = EntityState.Modified;
return RedirectToAction("Index");
}
return View(arbetstider);
}
//
// GET: /Tider/Delete/5
public ActionResult Delete(int id = 0)
{
ArbetsTider arbetstider = db.Tider.Find(id);
if (arbetstider == null)
{
return HttpNotFound();
}
return View(arbetstider);
}
//
// POST: /Tider/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
ArbetsTider arbetstider = db.Tider.Find(id);
db.Tider.Remove(arbetstider);
db.SaveChanges();
return RedirectToAction("Index");
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
[HttpPost]
public ActionResult Start(ArbetsTider model)
{
using (var context = new TiderDBContext())
{
context.Tider.FirstOrDefault(x => x.ID == model.ID).Start = model.Start;
context.SaveChanges();
}
return View("Index");
}
[HttpPost]
public ActionResult Stop(ArbetsTider model)
{
using (var context = new TiderDBContext())
{
context.Tider.FirstOrDefault(x => x.ID == model.ID).Slut = model.Slut;
context.SaveChanges();
}
return View("Index");
}
}
}
model
public class ArbetsTider
{
public int ID { get; set; }
public DateTime Start { get; set; }
public DateTime Slut { get; set; }
}
public class TiderDBContext : DbContext
{
public DbSet<ArbetsTider> Tider { get; set; }
}

Answer 1

You need to use Ajax method to submit the one form partially without refreshing the whole page.
Try something like this:
First change like this(remove type='submit'):
#using (Html.BeginForm("Create", "Tider", FormMethod.Post, new { #id= "formStart" } ))
{
// html code
<input id="submittStartDate" name="#Html.NameFor(x => x.Command)" value="Start" class="submitButton" />
});
And
#using (Html.BeginForm("Stop", "Tider", FormMethod.Post, new { #id= "formStop" } ))
{
//html
<input id="stop" name="#Html.NameFor(x => x.Command)" value="Stop" class="submitButton" />
//html
});
Then add a function in javascript file:
$(document).ready(function () {
$("input.submitButton").click(function() {
SubmitForm(this);
});
});
function SubmitForm(input) {
var url = "";
var formData = "";
if(input[0].id == "formStart")
{
url = "../Tider/Create";
data = $('form#formStart').serialize();
}
else if(input[0].id == "formStop") {
url = "../Tider/Stop";
data = $('form#formStop').serialize();
}
$.ajax({
type: "POST",
url: url,
data: data,
success: function (result) {
// Do your stuff here
},
error: function () {
alert("Error in saving");
}
});
}
You need to change the return types of the C# methods Create and Stop to required type(I think you need int here) and retun that. And you will get the data "success" function of the Ajax call.