I have created a drag and drop that allows users to drag a row from one GridView to another GridView which updates the record from Active to Inactive (and vise versa). The problem I am faced with is that when I add in a FriendlyUrl RouteConfig via the Global.asax Application_Start the record won’t save.
My HTML including the Javasccript:
<%@ 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>
My Code Behind:
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();
}
}
}
}
}
My Global.asax file:
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)
{
}
}
}
My RouteConfig.cs file:
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);
}
}
}
If I comment out RouteConfig.RegisterRoutes(RouteTable.Routes); in my Global.asax the record will update after a drop. Is there a way to make the table Update work via the JSON/SaveClient WebMethod while including the RouteConfig?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
I figured it out. If I set settings.AutoRedirectMode = RedirectMode.Off; in the RouteConfig it solves the issue.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0