首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将JQuery Sortable(新订单)保存到ASP.Net MVC控制器?

在ASP.Net MVC控制器中保存JQuery Sortable(新订单)的方法可以通过以下步骤实现:

  1. 首先,在前端页面中使用JQuery Sortable插件创建可拖拽的排序列表。确保在页面中引入JQuery和JQuery Sortable插件的相关文件。
  2. 在前端页面中,使用JavaScript代码监听排序列表的变化,并将新的排序顺序保存到一个数组中。
  3. 使用AJAX技术将保存了新排序顺序的数组发送到后端的ASP.Net MVC控制器。
  4. 在后端的ASP.Net MVC控制器中,接收到前端发送的新排序顺序数组。
  5. 在控制器中,可以将接收到的新排序顺序数组保存到数据库中,或者进行其他相关的业务逻辑处理。

下面是一个示例代码:

前端页面代码:

代码语言:html
复制
<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<script>
$(function() {
  $("#sortable").sortable({
    update: function(event, ui) {
      // 获取新的排序顺序
      var newOrder = [];
      $("#sortable li").each(function() {
        newOrder.push($(this).text());
      });

      // 发送新排序顺序到后端控制器
      $.ajax({
        url: "/Controller/SaveSortableOrder",
        type: "POST",
        data: { order: newOrder },
        success: function(response) {
          // 处理保存成功后的逻辑
        },
        error: function() {
          // 处理保存失败后的逻辑
        }
      });
    }
  });
});
</script>

后端ASP.Net MVC控制器代码:

代码语言:csharp
复制
public class Controller : Controller
{
  [HttpPost]
  public ActionResult SaveSortableOrder(List<string> order)
  {
    // 将新排序顺序保存到数据库或进行其他相关处理
    // ...

    return Json(new { success = true });
  }
}

这样,当用户在前端页面中拖拽排序列表的顺序时,会触发JQuery Sortable的update事件,然后通过AJAX将新的排序顺序发送到后端的ASP.Net MVC控制器中进行保存或处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ASP.NET Core 微服务实战》-- 读书笔记(第7章)

第 7 章 开发 ASP.NET Core Web 应用 ASP.NET Core 基础 在本章,我们将从一个命令行应用开始,并且在不借助任何模板,脚手架和向导的情况下,最终得到一个功能完整的 Web...; }); } } } 为了让它生效,我们还需要添加 NuGet 包依赖:Microsoft.AspNetCore.Mvc 添加控制器 控制器专门负责: (...1)接收来自 HTTP 请求的输入 (2)输入转交给与 HTTP 通信、JSON解析无关的服务类处理 (3)返回合适的响应代码及正文 using Microsoft.AspNetCore.Mvc; namespace...以及 dotnet run 启动应用 从 JavaScript 中调用 REST API 首先,我们通过添加控制器来创建 API 端点 using Microsoft.AspNetCore.Mvc...,以及一个脚本 hello.js 我们按照约定,把它添加到名为 wwwroot 的目录 wwwroot/Scripts/hello.js $(document).ready(function ()

61620
  • ASP.NET Core MVC 概述

    ASP.NET Core MVC 是使用“模型-视图-控制器”设计模式构建 Web 应用和 API 的丰富框架。 什么是 MVC 模式?...模型-视图-控制器 (MVC) 体系结构模式应用程序分成 3 个主要组件组:模型、视图和控制器。 此模式有助于实现关注点分离。...C#复制 [Authorize] public class AccountController : Controller { 区域 区域提供大型 ASP.NET Core MVC Web 应用分区为较小功能分组的方法...详细了解如何测试控制器逻辑。 Razor 视图引擎 ASP.NET Core MVC 视图使用 Razor 视图引擎呈现视图。...强类型视图 可以基于模型强类型化 MVC 中的 Razor 视图。 控制器可以强类型化的模型传递给视图,使视图具备类型检查和 IntelliSense 支持。

    6.4K20

    MVC 3.0 的特性 摘要

    Dependency Injection 的改进 其他特性 Razor 视图引擎 ASP.NET MVC3 带来了一种的名为 Razor 的视图引擎,提供了下列优点: Razor 的语法简单且清晰...控制器的改进 全局的 Action 过滤器 有的时候你希望能够在在一个 Action 方法执行之前或者执行之后执行一些处理逻辑,在 ASP.NET MVC2 中,提供了 Action 过滤器,允许对特定控制器的...: Scott Guthrie's blog on the MVC 3 Preview Filtering in ASP.NET MVC 的 ViewBag 属性 MVC2 中的控制器支持 ViewData...属性,允许通过后绑定的字典数据传送给视图模板,在 MVC3 中,你可以通过 ViewBag 来更加简单的完成。...远程验证 ASP.NET 3 通过一个的标签 RemoteAttribute 对 jQuery Validation 插件的远程验证提供支持。

    2.6K10

    Web API--入门--(一)ASP.NET Web API 2(C#)入门

    Web API模板使用ASP.NET MVC提供API帮助页面。我正在使用本教程的空模板,因为我想显示没有MVC的Web API。一般来说,你不需要知道ASP.NET MVC来使用Web API。...我们添加一个控制器,可以返回产品列表或由ID指定的单个产品。 注意 如果您使用ASP.NET MVC,您已经熟悉了控制器。...有关Web API如何HTTP请求路由到控制器方法的更多信息,请参阅ASP.NET Web API中的路由。...您还可以从http://jquery.com/下载它,ASP.NET“Web API”项目模板也包括jQuery。...现在回到网页,按F5重加载网页。Internet Explorer捕获浏览器和Web服务器之间的HTTP流量。摘要视图显示页面的所有网络流量: ?

    4.2K10

    产品前端重构(TypeScript、MVC框架设计)

    该系统的前端是基于 ExtJs 5 进行构造的,后端是基于 Asp.net MVC 提供的 REST 数据接口。...产品化-提高可扩展性:基于框架开发的界面,需要为二次开发提供易用、有粗有细的扩展点,方便二次开发团队在产品的基础上快速搭建的界面。...这些扩展点包含:模块级别的扩展或替换、模块中的指定界面扩展或替换、控制器中的业务逻辑的扩展或替换,甚至任意逻辑的扩展或替换。...但是我们又需要使用 TypeScript 来编写整个应用程序,而 TypeScript 在语言层面提供了的面向对象系统,使用后者导致我们不能使用 EXTJS 5 本身自带的 MVC 模式。...之前全都堆在一个文件中的代码,现在要分为控制器、视图,而且还需要基于统一的底层框架来实现,框架中的 Api 还需要慢慢熟悉,学习门槛高了不少。

    1.9K80

    七天学会ASP.NET MVC(七)——创建单页应用

    系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)——...ASP.Net MVC 数据处理 七天学会ASP.NET MVC (四)——用户授权认证问题 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理 七天学会ASP.NET MVC...实验33——创建单页应用 1—安装 实验33中,不再使用已创建好的控制器和视图,会创建控制器及视图,创建控制器和视图原因如下: 1. 保证现有的选项完整,也会用于旧版本与新版本对比 2....: 最终用户点击保存按钮 输入值必须在客户端完成验证 会将合法值传到服务器端 Employee记录必须保存到数据库中 CreateEmployee对话框使用完成之后必须关闭 插入值后,需要更新表格。...2.保存功能 我们会创建MVC action 方法实现保存Employee,并使用jQuery Ajax调用 3.

    4.3K60

    【初学者指南】在ASP.NET MVC 5中创建GridView

    介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样。...可用的库 以下是一些可用的库和插件: Grid.Mvc MVCGrid.NET PagedList.MVC JQuery.Grid JQuery Grid for ASP.NET MVC JQuery...现在,创建一个ASP.NET MVC 5 Web 应用程序。打开 Visual Studio 2015,点击文件>>新建>>项目。 ?...从对话框中跳转到 Web,选择 ASP.NET Web 应用程序项目,然后单击确定。 ? 在模板中选择 MVC,如果编写了应用的单元测试,请先做检查,并点击 OK。 我们的工程都是用基本的功能创建的。...通过本文的介绍,希望大家能够掌握在 ASP.NET MVC 5 中创建 GridView 的方法。

    6.2K90

    Asp.Net MVC3 简单入门第一季(二)详解Asp.Net MVC3项目

    前言 在上一篇文章Asp.Net MVC3 简单入门第一季(一)环境准备中我简单介绍了Asp.Net MVC3项目的安装和第一个Asp.Net MVC3项目的基本情况。...还有好多的疑问,那在这篇文章中我们详细介绍项目中各个文件夹的作用,并真的第一个项目我们简要介绍一下Asp.Net MVC的URL驱动的是怎么回事。...文件夹 作用 /Controllers 存放控制器类【职责是:处理用户的请求,指挥具体的页面进行渲染交给客户端】 /Views 存放各个控制器对应的视图文件,如果是Razor引擎的话那后缀是cshtml.../Content 主要存放照片、CSS、Flash等文件 /Scripts 主要存放脚本文件【微软默认给我们提供了JQuery1.5.1的包,看来JQuery已经成为默认的工业标准了!...在讲解之前我们先认识几个概念: Controller:控制器。在Contrller文件夹添加的以Controller结尾的类就是控制器,它的每个方法就是一个Action。

    95310

    Asp.net mvc 知多少(一)

    MVC 设计模式应用程序分解成3个主要部分: Model, View, Controller(模型、视图、控制器) Model - 模型代表一系列类用来描述业务逻辑,比如业务模型以及数据访问操作,再比如数据模型...View - 视图代表的是UI部分,像CSS、jquery、html等。它主要的职责是展现从controller接受到数据或模型。 Controller - 控制器职责在于处理传入的请求。...它接受用户通过视图的输入,然后对用户输入的数据模型进行处理,最终通过视图结果渲染给用户。通常来讲,控制器在视图和模型之间扮演着桥梁(协调者)的角色。 Q3. 什么是领域驱动设计开发? Ans....MVP与MVC相似,只是MVC的Controller替换成Presenter。MVP模式应用程序分解成3个主要部分: Model, View, Presenter。...主要有以下几点优势: Separation of concern(关注分离) - MVC设计模式Asp.net MVC 应用程序分成三个部分,View、Controller、Model。

    2.2K70

    快速入门系列--MVC--01概述

    快速入门系列--MVC--01概述 快速入门系列--MVC--02路由 快速入门系列--MVC--03控制器和IOC应用 快速入门系列--MVC--04模型 快速入门系列--MVC--05行为 快速入门系列...提供的MVC模板非常的棒棒哒,包括对多种不同客户端的支持,与JQuery Mobile的结合,以及一个Recipes包(Nuget)用于现有页面转化为支持移动端的版本的组件。...此外IIS7.0IIS管道和ASP.NET管道有机的整合在了一起,允许本地代码和托管代码两种方式定义IIS Module,形成一个通用管道,例如可以Form认证应用到静态文件的请求上等。...ReleaseRequestState, PostReleaseRequestState 使状态管理模块释放当前请求的相应状态 UpdateRequestCache, PostUpdateRequestCache 使缓存模块请求处理结果的内容保存到缓存...ASP.NET MVC4框架揭秘[M]. 上海:电子工业出版社, 2012.

    81060

    ASP.NET MVC (一、控制器与视图)

    修改默认路由 前言: ASP.NET MVC是最简洁、最方便、最高效、最快速的小型网站开发的方法,本文可以让一个小白用最快速的方式学会网站开发。...当前版本: ASP.NET MVC 5 2013年10月,ASP.NET MVC 5与Visual Studio 2013一起发布。...以下为其主要特性: One ASP.NET 的Web项目体验 ASP.NET Identity Bootstrap模板  版本要求: 软件要求 ASP.NET MVC 5需要.NET Framework...控制器文件是后缀名为.cs或.vb的类文件 Models 放置数据模型对象的文件,如.cs、.vb、.edmx和.dbml等 Scripts 放置JavaScript、jQuery文件,文件后缀名通常为...3.1、添加控制器 在【Controllers】上点击【鼠标右键】,依次选择【添加】【控制器】  依次选择【控制器】【MVC 5 控制器 - 空】,点击【添加】 输入控制器名称:(这里Test举例

    1.8K21
    领券