Question

我想为餐厅管理页面制作一个餐桌排列系统。我想要一个表索引页面，它将所有表格显示为更大的div（餐厅地图）内的div。餐馆面包车添加表格，这些表格被添加到该索引页面。可以使用jquery draggable函数拖动表。此页面需要有一个保存按钮，如果单击它需要将所有表位置存储到数据库。我的模型是这样的：

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>

现在需要一个按钮来执行查询，该查询使用正确的位置更新所有表记录，或者只在可能的情况下更新表。

Answer 1

您可以在视图页面上创建输入标记。您可以通过指定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" />

}

然后在控制器内部，您可以编写一个Action方法，该方法将包含2个参数;即; param1和param2将通过编写linq query来执行更新表格参数的任务：

public ActionResult ActionMethodName(int param1,int param2)
{

       //LINQ query goes here for updating table coordinates

}

在保存mvc时保存所有可拖动div的位置

1 个答案: