保存mvc上所有可拖放的div的位置
保存mvc上所有可拖放的div的位置
提问于 2014-11-28 08:40:12
我想为餐厅的管理页面做一个桌子安排系统。我想要一个表格索引页面，显示所有表作为div在一个更大的div(餐厅的地图)。餐厅面包车添加表，这些表被添加到索引页。可以使用jquery可拖式函数拖动这些表。此页面需要一个保存按钮，如果单击该按钮，则需要将所有表位置存储到数据库。我的模型是这样的：
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; }
}我的主计长，现在没有太多了。
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);
}我的看法是：
@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>现在需要一个按钮来执行一个查询，它用正确的位置更新所有的表记录，或者只有在可能的情况下移动的表。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-11-28 23:42:19
您可以在视图页上创建一个输入标记。您可以指定Action方法，该方法将在单击按钮时通过指定onclick属性来调用。此外，您还可以传递参数，以便该方法将接收坐标：
@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" />
}然后在控制器内部，您可以编写一个包含2个参数的Action方法，即param1和param2，它们将通过编写linq query来完成更新表参数的任务。
public ActionResult ActionMethodName(int param1,int param2)
{
//LINQ query goes here for updating table coordinates
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27192919
复制
相似问题
如何在html中保存可拖放的div位置？
可拖放节点的JavaFX保存位置
固定多个div中可拖放的位置
可拖放元素的jQuery UI保存位置
Jquery可拖放对象上的拖放位置
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
