jQuery 当我在 FriendlyUrl 程序集中添加时,拖放不起作用

jQuery Drag and Drop doesn't work when I add in FriendlyUrl assembly

我创建了一个拖放功能,允许用户将一行从一个 GridView 拖到另一个 GridView,从而将记录从 Active 更新为 Inactive(反之亦然)。我面临的问题是,当我通过 Global.asax Application_Start 添加 FriendlyUrl RouteConfig 时,记录将不会保存。

我的 HTML 包括 Javascript:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="DragAndDrop._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Grids</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="InactiveClients" runat="server" ShowHeaderWhenEmpty="true" CssClass="drag_drop_grid gridview" HeaderStyle-CssClass="gridview-header"  AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField HeaderText="Key" SortExpression="">
                        <ItemTemplate>
                            <asp:Label ID="ClientKey" runat="server" Text='<%# Bind("ClientKey") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Name" SortExpression="">
                        <ItemTemplate>
                            <asp:Label ID="ClientName" runat="server" Text='<%# Bind("ClientName") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Code" SortExpression="">
                        <ItemTemplate>
                            <asp:Label ID="ClientCode" runat="server" Text='<%# Bind("ClientCode") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="IsActive" SortExpression="">
                        <ItemTemplate>
                            <asp:CheckBox ID="IsActive" runat="server" Checked='<%# Convert.ToBoolean(Eval("IsActive")) %>'/>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
        <div>
        
        </div>
        <div>
            <asp:GridView ID="ActiveClients" ShowHeaderWhenEmpty="true" runat="server" CssClass="drag_drop_grid gridview" HeaderStyle-CssClass="gridview-header" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField HeaderText="Key" SortExpression="">
                        <ItemTemplate>
                            <asp:Label ID="ClientKey" runat="server" Text='<%# Bind("ClientKey") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Name" SortExpression="">
                        <ItemTemplate>
                            <asp:Label ID="ClientName" runat="server" Text='<%# Bind("ClientName") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Code" SortExpression="">
                        <ItemTemplate>
                            <asp:Label ID="ClientCode" runat="server" Text='<%# Bind("ClientCode") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="IsActive" SortExpression="">
                        <ItemTemplate>
                            <asp:CheckBox ID="IsActive" runat="server" Checked='<%# Convert.ToBoolean(Eval("IsActive")) %>'/>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $(".drag_drop_grid").sortable({
                    items: 'tr:not(tr:first-child)',
                    cursor: 'arrow',
                    connectWith: '.drag_drop_grid',
                    axis: 'x,y',
                    dropOnEmpty: true,
                    start: function (e, ui) {
                        ui.item.addClass("selected");
                    },
                    receive: function (e, ui) {
                        setTimeout(function () {
                            ui.item.find('[id*=IsActive]').removeAttr('checked');
                            var obj = {};
                            obj.ClientKey = $.trim(ui.item.find('[id*=ClientKey]').html());
                            if (ui.sender[0].id == "InactiveClients") {
                                obj.IsActive = "true";
                                ui.item.find('[id*=IsActive]').attr('checked', 'checked');
                            }
                            else if (ui.sender[0].id == "ActiveClients") {
                                obj.IsActive = "false";
                                ui.item.find('[id*=IsActive]').removeAttr('checked');
                            }

                            ui.item.removeClass("selected");
                            $.ajax({
                                type: "POST",
                                url: "Default.aspx/SaveClient",
                                data: JSON.stringify({ cdata: obj }),
                                contentType: "application/json; charset=utf-8",
                                dataType: "json"
                            });
                            $(this).find("tbody").append(ui.item);
                            return false;
                        }, 100);
                    },
                });
            });
        </script>
    </form>
</body>
</html>

我的代码背后:

using System;
using System.Web.UI;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Script.Services;
using System.Web.Services;

namespace DragAndDrop
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {

                string conString = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
                using (SqlConnection con = new SqlConnection(conString))
                {
                    using (SqlCommand cmd = new SqlCommand("SELECT ClientKey, ClientName, ClientCode, IsActive FROM TBLClientData WHERE IsActive = 0 ORDER BY ClientName", con))
                    {
                        con.Open();

                        SqlDataAdapter da = new SqlDataAdapter(cmd);
                        DataTable dt = new DataTable();
                        da.Fill(dt);
                        InactiveClients.UseAccessibleHeader = true;
                        InactiveClients.DataSource = dt;
                        InactiveClients.DataBind();
                        con.Close();
                    }

                    using (SqlCommand sqlcmd = new SqlCommand("SELECT ClientKey, ClientName, ClientCode, IsActive FROM TBLClientData WHERE IsActive = 1 ORDER BY ClientName", con))
                    {
                        con.Open();
                        SqlDataAdapter da = new SqlDataAdapter(sqlcmd);
                        DataTable dt = new DataTable();
                        da.Fill(dt);
                        ActiveClients.UseAccessibleHeader = true;
                        ActiveClients.DataSource = dt;
                        ActiveClients.DataBind();
                        con.Close();
                    }
                }
            }
        }

        public class UpdateClient
        {
            public string ClientKey { get; set; }
            public string IsActive { get; set; }
        }

        [WebMethod]
        [ScriptMethod]
        public static void SaveClient(UpdateClient cdata)
        {
            bool isact = Convert.ToBoolean(cdata.IsActive);
            string conString = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
            using (SqlConnection con = new SqlConnection(conString))
            {
                using (SqlCommand cmd = new SqlCommand("UPDATE TBLClientData SET IsActive = @IsActive WHERE ClientKey = @ClientKey", con))
                {
                    //cmd.CommandType = CommandType.Text;
                    con.Open();
                    cmd.Parameters.AddWithValue("@IsActive", isact);
                    cmd.Parameters.AddWithValue("@ClientKey", cdata.ClientKey);
                    cmd.ExecuteNonQuery();
                    con.Close();
                }
            }
        }
    }
}

我的 Global.asax 文件:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
using System.Web.Optimization;
using System.Web.Routing;

namespace DragAndDrop
{
    public class Global : System.Web.HttpApplication
    {

        protected void Application_Start(object sender, EventArgs e)
        {
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        }

        protected void Session_Start(object sender, EventArgs e)
        {

        }

        protected void Application_BeginRequest(object sender, EventArgs e)
        {

        }

        protected void Application_AuthenticateRequest(object sender, EventArgs e)
        {

        }

        protected void Application_Error(object sender, EventArgs e)
        {

        }

        protected void Session_End(object sender, EventArgs e)
        {

        }

        protected void Application_End(object sender, EventArgs e)
        {

        }
    }
}

我的 RouteConfig.cs 文件:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Routing;
using Microsoft.AspNet.FriendlyUrls;

namespace DragAndDrop
{
    public static class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            var settings = new FriendlyUrlSettings();
            settings.AutoRedirectMode = RedirectMode.Permanent;
            routes.EnableFriendlyUrls(settings);
        }
    }
}

如果我在 Global.asax 中注释掉 RouteConfig.RegisterRoutes(RouteTable.Routes);,记录将在删除后更新。有没有办法在包含 RouteConfig 的同时通过 JSON/SaveClient WebMethod 使 table 更新工作?

我明白了。如果我在 RouteConfig 中设置 settings.AutoRedirectMode = RedirectMode.Off; 它可以解决问题。