save position from all draggable divs on save mvc - asp.net-mvc

Question

I want to make a table arrangement system for a restaurant admin page.
I want a table index page which shows all tables as divs inside a bigger div(map of the restaurant).
The restaurant van add tables and these tables be added to that index page.
The tables can be dragged with the jquery draggable function.
This page needs to have a save button and if clicked it needs to store all the tables positions to the database.
My model is like this:
public class table
{
public int id { get; set; }
public string tableName { get; set; }
public bool available { get; set; }
public float positionY { get; set; }
public float positionX { get; set; }
}
My Controller which does not have much now.
private BonTempsDbContext db = new BonTempsDbContext();
// GET: tafel
public ActionResult Index()
{
return View(db.Tafel.ToList());
}
// GET: Menu/Create
public ActionResult Create()
{
return View();
}
// POST: Menu/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "id,tafelNaam,beschikbaar,positionY,positionX")] Tafel tafel)
{
if (ModelState.IsValid)
{
db.Tafel.Add(tafel);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(tafel);
}
and my view looks like this:
#model IEnumerable<BonTempsMVC.Table>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div class="VoegToeBtn">
<a href="/table/create">
<span class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create new table
</span>
</a>
</div>
<div id="tablewrapper">
#foreach (var item in Model)
{
<div class="draggable ui-widget-content" id="#Html.DisplayFor(ModelItem => item.id)">
<p>#Html.DisplayFor(ModelItem => item.tablename)</p>
</div>
}
</div>
<script>
$(".draggable").draggable({
snap: ".draggable",
snapMode: "outer"
});
</script>
now there needs to be a button which executes a query that update all the table records with the right positions or only the tables which moved if that is possible.

Answer 1

You can create an input tag on your view page. You can specify the Action method which will be invoked when the button is clicked by specifying the onclick attribute. Also, you can pass parameters so that the method will receive the coordinates:
#using (Html.BeginForm("ActionMethodName","ControllerName",new {param1 = coordinate1, param2 = coordinate2}))
{
... your input, labels, textboxes and other html controls go here
<input class="button" id="Update" type="submit" value="Submit" />
}
Then inside your controller, you can write an Action method which will have 2 parameters; viz; param1 and param2 which will do the task of updating the table parameters by writing a linq query:
public ActionResult ActionMethodName(int param1,int param2)
{
//LINQ query goes here for updating table coordinates
}