c# mvc+js实现拖拽式添加数据
时间: 2023-12-16 10:02:58 浏览: 40
要在C# MVC项目中实现拖拽式添加数据,您需要使用JavaScript库来处理拖拽操作,并使用Ajax将数据发送到服务器以保存。下面是一个基本的实现步骤:
1. 在MVC视图中添加一个可拖拽的元素,例如一个div:
```html
<div draggable="true" ondragstart="drag(event)">数据</div>
```
2. 使用JavaScript编写drag函数,将数据放入拖拽数据传输对象中:
```javascript
function drag(event) {
event.dataTransfer.setData("text", event.target.textContent);
}
```
3. 在接受数据的MVC视图中添加一个可放置的元素,例如一个div:
```html
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
```
4. 使用JavaScript编写allowDrop函数和drop函数,将数据从拖拽数据传输对象中提取出来,并使用Ajax将数据发送到服务器:
```javascript
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
$.ajax({
type: "POST",
url: "/Controller/AddData",
data: { data: data },
success: function (result) {
// 处理添加成功后的响应
},
error: function (result) {
// 处理添加失败后的响应
}
});
}
```
5. 在MVC Controller中添加AddData方法,处理接收到的数据并将其存储到数据库中:
```csharp
[HttpPost]
public ActionResult AddData(string data)
{
// 处理接收到的数据并将其存储到数据库中
return Json(new { success = true });
}
```
以上是一个基本的实现步骤,您可以根据具体需求进行修改和扩展。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)