Access Label and TextBox outside ASP.Net GridView in WebMethod using jQuery Ajax

gkoutsiv
 
on Jul 01, 2022 11:20 PM
369 Views

Hi, 

What I need to do is populate an SQL audit table for every drag and drop. I am using exactly what you have here in this example:

Save (Insert) Drag and Drop GridView row in Log Table using C# and VB.Net in ASP.Net

How can I access other controls on the form, such as labels, textboxes, etc..?  I am able to access bound values from the grid, but having difficulty accessing Labels, TextBoxes in the UpdatePreference Web Method.

I need to access labels outside GridView.

Thank you!

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 02, 2022 02:43 AM

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; }
}