Hi gkoutsiv,

In order to send the Form data like TextBox, Label to the WebMethod you need to create a class for the required properties with Generic List of HolidayData property.

Then use the class as parameter in the UpdatePreference WebMethod.

Inside the jQuery sortable event, assign the TextBox, Label and Holiday preference to an JavaScript object.

Finally, send the JavaScript object as parameter to the WebMethod.

Refer the modified code.

HTML

<asp:GridView ID="gvLocations" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Id" ItemStyle-Width="30">
            <ItemTemplate>
                <%# Eval("Id") %>
                <input type="hidden" name="LocationId" value='<%# Eval("Id") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-Width="150" />
        <asp:BoundField DataField="Preference" HeaderText="Preference" ItemStyle-Width="100" />
        <asp:BoundField DataField="UpdatedBy" HeaderText="UpdatedBy" ItemStyle-Width="100" />
    </Columns>
</asp:GridView>
<br />
<asp:Label ID="lblCity" Text="Mumbai" runat="server" />
<asp:TextBox ID="txtCountry" runat="server" Text="India" />
<asp:HiddenField ID="hfDraged" runat="server" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="httpss://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/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 () {
        $("[id*=gvLocations]").sortable({
            items: 'tr:not(tr:first-child)',
            cursor: 'pointer',
            axis: 'y',
            dropOnEmpty: false,
            start: function (e, ui) {
                ui.item.addClass("selected");
            },
            stop: function (e, ui) {
                var id = $.trim(ui.item.find('td').eq(0).text());
                var holidayLocationsPref = [];
                $.each($(this).find('tr:has(td)'), function (item) {
                    var obj = {};
                    obj.Id = id;
                    obj.locationId = $.trim($(this).find("TD").eq(0).text());
                    obj.location = $.trim($(this).find("TD").eq(1).text());
                    obj.preference = $.trim($(this).find("TD").eq(2).text());
                    obj.UpdatedBy = $.trim($(this).find("TD").eq(3).text());
                    holidayLocationsPref.push(obj);
                });

                var formRecord = {};
                formRecord.HolidayData = holidayLocationsPref;
                formRecord.City = $("[id*=lblCity]").html();
                formRecord.Country = $("[id*=txtCountry]").val();

                ui.item.removeClass("selected");
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/UpdatePreference",
                    data: JSON.stringify({ data: formRecord }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        location.reload();
                    }, error: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            receive: function (e, ui) {
                $(this).find("tbody").append(ui.item);
            }
        });
    });
</script>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindGrid();
    }
}

private void BindGrid()
{
    string query = "SELECT Id, Location, Preference,UpdatedBy FROM HolidayLocationsPref ORDER BY Preference";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    gvLocations.DataSource = dt;
                    gvLocations.DataBind();
                }
            }
        }
    }
}

[WebMethod]
public static void UpdatePreference(FormRecord data)
{
    int preference = 1;
    foreach (var item in data.HolidayData)
    {
        UpdatePreference(item.LocationId, preference, item.Id, item.Location, data.City, data.Country);
        preference++;
    }
}

private static void UpdatePreference(int locationId, int preference, int id, string location, string city, string country)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Parameters.AddWithValue("@Id", locationId);
                cmd.Parameters.AddWithValue("@Preference", preference);
                string query = "";
                if (locationId == id)
                {
                    query = "UPDATE HolidayLocationsPref SET Preference = @Preference, UpdatedBy = @UserName WHERE Id = @Id; ";
                    query = query + "INSERT INTO HolidayLocationsPref2 (Location,Preference,UpdatedBy) VALUES(@Location,@Preference,@UserName)";
                    cmd.Parameters.AddWithValue("@Location", location);
                    cmd.Parameters.AddWithValue("@UserName", HttpContext.Current.Session["User"].ToString());
                }
                else
                {
                    query = "UPDATE HolidayLocationsPref SET Preference = @Preference WHERE Id = @Id";
                }
                cmd.CommandText = query;
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }
}

public class HolidayData
{
    public int Id { get; set; }
    public int LocationId { get; set; }
    public string Location { get; set; }
    public int Preference { get; set; }
    public string UpdatedBy { get; set; }
}

public class FormRecord
{
    public List<HolidayData> HolidayData { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
}