Tutorial : How Developers Create Jquery Drag Drop Ui In Asp.Net Mvc
In this tutorial, asp.net developers will explain the way to create jQuery Drag Drop UI in MVC with an example. You can read the story thoroughly and follow each step to develop jQuery Drag Drop UI. All coding shared in this tutorial are instance based to give you an idea of development of Drag Drop UI in MVC.
Here I will give an example of drag and drop Value and ID using jQuery Drag-Drop UI in ASP.net MVC.
The example will contain multiple Employee list. We can drag and drop boxes between the two Tables. Also we have taken Name and ID value property of the control.
Create a simple Empty MVC Application to give you example of how we can jquery Drag Drop UI in asp.net MVC.
In this database, add a new table called ‘Employee’ using the following script:Here I will give an example of drag and drop Value and ID using jQuery Drag-Drop UI in ASP.net MVC.
The example will contain multiple Employee list. We can drag and drop boxes between the two Tables. Also we have taken Name and ID value property of the control.
Create a simple Empty MVC Application to give you example of how we can jquery Drag Drop UI in asp.net MVC.
In the App_Data folder of the application add a new SQL Server database with the name ‘Employee.mdf’ as below.
CREATE TABLE [dbo].[EmployeeList] (
[EmployeeId] INT IDENTITY (1, 1) NOT NULL,
[EmployeeName] VARCHAR (50) NOT NULL,
PRIMARY KEY CLUSTERED ([EmployeeId] ASC)
);
In the wizard that comes up, select the Employee.mdf database and the EmployeeList table designed in the below step. After completing the wizard, the following table mapping gets displayed something like this.
Now, In the Models folder, add a new Entity Framework with the name Employee EDMX. In the controllers folder, add a new Empty WEB API Controller with the name EmployeeAPIController. In this API controller add the following code:
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using DragDrop_MVC_jQuery.Models;
namespace DragDrop_MVC_jQuery.Controllers
{
public class EmployeeAPIController : ApiController
{
ApplicationEntities ctx;
public EmployeeAPIController()
{
ctx = new ApplicationEntities();
}
[Route("EmployeeList")]
public IEnumerable<Employee> GetEmployee()
{
return ctx.Employee.ToList();
}
}
}
The above code declares an object of EmployeeEntities, which got generated using EntityFramework. The GetEmployee() returns a list of Employee. This method is applied with an Attribute Route ‘[Route(“EmployeeList”)]’ which will provide the URL to make call to this method using client-side framework.
Now, In the controllers folder, add a new Empty MVC controller of the name EmployeeController. This controller class will generate an Index method. Scaffold a new Empty view from the Index method, shows something like this.
Now, In the controllers folder, add a new Empty MVC controller of the name EmployeeController. This controller class will generate an Index method. Scaffold a new Empty view from the Index method, shows something like this.
Now, Add the following markup in the Index view, shows something like this.
<div style="width:100%">
<div id="left" style="float:left;width:30%;">
<table>
<tr>
<td>
<h1>Employee List</h1>
</td>
</tr>
<tr>
<td>
<div id="divleft">
<ul id="EmployeeList"></ul>
</div>
</td>
</tr>
</table>
</div>
<div id="left" style="float:left;width:70%;">
<table>
<tr>
<td>
<h1>Selected Employee</h1>
</td>
</tr>
<tr>
<td>
<div id="divright">
<ul id="selectedEmployeeList"></ul>
</div>
</td>
</tr>
</table>
</div>
</div>
The above markup has a table with two rows. The first row shows headers for Employee List and selected Employee. The second row contains <div>s containing list in it. The ‘EmployeeList’ list will show the Employee retrieved from the server. The ‘selectedEmployeeList ‘will show selected Employee by the end-user using Drag-Drop.
Now, Add the following styles in the View, shows something like this.
style type="text/css">
table, td {
background-color: mediumaquamarine;
border: ridge;
}
#divleft,#divright {
background-color: mediumaquamarine;
height: 150px;
width: 150px;
font-family: Arial;
}
</style>
Now, In the Index.cshtml page add the following JS, shows something like this.
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
Now, In the Index.cshtml page add the following Script, shows something like this.
<script type="text/javascript">
$(document).ready(function () {
// debugger;
loadEmployee();
//Function to set events for Drag-Drop
function setEvents() {
var EmployeeList = $('li');
//Set Drag on Each 'li' in the Employeelist
$.each(EmployeeList, function (idx, val) {
$('li').on('dragstart', function (evt) {
evt.originalEvent.dataTransfer.setData("Value", evt.target.textContent);
evt.originalEvent.dataTransfer.setData("Text", evt.target.id);
//evt.originalEvent.dataTransfer.setData("Text", this.id);
evt.target.draggable = false;
});
});
//Set the Drop on the <div>
$("#divright").on('drop', function (evt) {
evt.preventDefault();
debugger;
var data = evt.originalEvent.dataTransfer.getData("Value");
var value = evt.originalEvent.dataTransfer.getData("Text");
var lst = $("#selectedEmployeeList");
var li = "<li id=" + value + ">" + value +" "+ data + "</li>";
li.textContent = data;
lst.append(li);
});
//The dragover
$("#divright").on('dragover', function (evt) {
evt.preventDefault();
});
}
///Function to load Employee using call to WEB API
function loadEmployee() {
var items = "";
var Id = "";
$.ajax({
url: "/Employee",
type: "GET"
}).done(function (resp) {
$.each(resp, function (idx, val) {
items += "<li id=" + val.EmployeeId + " draggable='true'>" + val.EmployeeName + "</li>";
});
$("#EmployeeList").html(items);
//$("#hdnID").html(Id);
setEvents();
}).error(function (err) {
alert("Error! " + err.status);
});
}
});
</script>
The script has the following specifications:
- The function ‘loadEmployee()’ makes an ajax call to WEB API. When the call is successful, the iteration is done through the response. This iteration adds the <li> tag in the ‘EmployeeList’ list with the draggable attribute set to true.
- The function ‘setEvents()’ performs the following two step operations:
2) The <div> of id ‘divright’ is subscribed to ‘drop’ event, it accepts the dragged Text. Once the text is accepted, it is set to the <li> which is dynamically appended in the list with id as ‘selectedEmployeeList’.
Now, run the application, the Employees data gets loaded, shows something like this.
Drag the Employee from the ‘Employee List’ and drop it in the ‘Selected Employee’, shows something like this.
The above Red Mark shows the Drag Action. Once the drop operation is over the result will be Display here, also we have taken Employee Name and ID value property of the control.
The Below Red Mark shows Multiple Employee the Drag Action. Once the drop operation is over the result will be Display something like this.
The Below Red Mark shows Multiple Employee the Drag Action. Once the drop operation is over the result will be Display something like this.
AegisSoftTech Asp.net MVC developers have just shared the way to develop jQuery Drag Drop UI in MVC. You can understand it with the instance explained with coding in the post and try to create your own UI in asp.net MVC.