save mvc의 모든 드래그 가능한 div의 위치 저장

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

보기 페이지에 입력 태그를 만들 수 있습니다. onclick 속성을 지정하여 버튼을 클릭 할 때 호출되는 Action 메소드를 지정할 수 있습니다. 이 방법은 좌표받을 수 있도록 또한, 매개 변수를 전달할 수 있습니다 :

컨트롤러 내부 그리고

@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 방법을 쓸 수 있습니다; 즉;

public ActionResult ActionMethodName(int param1,int param2) 
{ 

     //LINQ query goes here for updating table coordinates 

}