Getting and setting ASP.NET attributes in jquery

Question

I am adding a new attribute to a DataList control in asp.net. I want to set the attribute on the server in C#. I then want to modify it in jQuery on the client, and get the new value of the attribute in C# back on the server. I think if I initialize the attribute to say "0" in my .aspx code, it get reset to "0" during the postback.

So, I'm using DataList.Attributes.Add() to create and init the attribute value during my render. On the client, I use .attr in jQuery to modify the value. During the postback on the server, I use DataList.Attributes["attributeName"] to get the new value, but it's null. I've changed EnableViewState for the DataList, its parent, and grandparent to true and false, but I still get a null value.

Is there a way to create and init an attribute on the server, modify it in jQuery on the client, and get the new value in C# back on the server?

deostroll · Accepted Answer · 2014-01-26 08:12:32Z

A server control's attributes are persisted in the page viewstate. On postback the server control is re-created, and, its attribute values are re-created by parsing the viewstate value, from the posted data.

Hence any attempt to modify a server-created-control-attribute, or, add an attribute on a server-control from the client will not work. (More precisely it won't be very straight forward even if it might be possible).

Anyhow, a browser is "programmed" to send (over the wire) data held inside any html input or select control (hope I didn't miss anything) nested inside the html form. Further, all such controls need to be identified by the value specified by the name attribute. For e.g.

<form method="post" action="default.aspx">
<input type="text" name="foo" value="123"/>
<input type="submit" value="submit to server"/>
</form>

If one such form is submitted to a server like ASP.NET (which is an abstraction of IIS which implements the CGI standard), you can get the value of the textbox by doing something like:

string fooValue = Request.Form["foo"];

A browser program is usually programmed to send data corresponding the name and value attributes only.

Now, since you are looking at getting more than one kind of data on the server, but still associated with a single control, your options are to go with any of the following:

Access the value from two separate controls on the server. However, its your job to figure their are associations.
You can think of a user control approach, which ultimately is like the above but if written will give you a neat encapsulation.

Here is a small example of the 2nd approach:

CompositeControl.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CompositeControl.ascx.cs" Inherits="WebApp.Attributes.CompositeControl" %>

<label>Enter Name</label>
<asp:TextBox runat="server" ID="tbxName"></asp:TextBox>
<asp:HiddenField ID="hdnAge" runat="server" />

CompositeControl.ascx.cs:

using System;

namespace WebApp.Attributes
{
    public partial class CompositeControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            if (!string.IsNullOrEmpty(this.HiddenFieldClientId))
            {
                hdnAge.ClientIDMode = System.Web.UI.ClientIDMode.Static;
                hdnAge.ID = this.HiddenFieldClientId;
            }
        }

        public string Name
        {
            get
            {
                return tbxName.Text;
            }
            set
            {
                tbxName.Text = value;
            }
        }

        public int Age
        {
            get
            {
                return int.Parse(hdnAge.Value);
            }
            set
            {
                hdnAge.Value = value.ToString();
            }
        }

        public string HiddenFieldClientId { get; set; }
    }
}

default.aspx:

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

<%@ Register src="CompositeControl.ascx" tagname="CompositeControl" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-2.1.0.min.js"></script>
    <script>
        $(function () {
            $('#tbxAge').val($('#personAge').val());
            $('#btnSetAge').click(function () {
                $('#personAge').val($('#tbxAge').val());
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <uc1:CompositeControl ID="CompositeControl1" runat="server" HiddenFieldClientId="personAge" />
        <br />
        <input id="tbxAge" type="text" />
        <input id="btnSetAge" type="button" value="Set" />
        <p>Hit <strong>set</strong> before clicking on submit to reflect age</p>
        <asp:Button runat="server"  ID="btnSubmit" Text="Submit" 
            onclick="btnSubmit_Click" /> 
        <br />
        <asp:Literal runat="server" ID="ltrlResult"></asp:Literal>
    </div>
    </form>
</body>
</html>

default.aspx.cs:

using System;

namespace WebApp.Attributes
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                CompositeControl1.Age = 23;
                CompositeControl1.Name = "Default";
            }
        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            ltrlResult.Text = string.Format("<p>{0}</p><p>{1}</p>", CompositeControl1.Name, CompositeControl1.Age);
        }
    }
}

Community · Accepted Answer · 2017-05-23 11:49:23Z

You could make an AJAX call in wich you send the changes made it with jquery to some webservices method in your code behind to handle it.

AJAX jquery post change call:

$.ajax({
    type: 'POST',
    url: 'Default.aspx/Checksomething',
    data: '{"userValuePostChanged ": "' + DtLValue+ '"}',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(msg) {
        alert("Result: " + msg);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("Error: " + textStatus);
    }
});

webservices C#

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Checksomething(string userValuePostChanged)
{
    //Do some stuff with userValuePostChanged

    return "something else"
}

This are the links where I took the examples:

consume .net web service using jquery

How to use jQuery to make a call to c# webservice to get return value

http://www.codeproject.com/Articles/66432/Consuming-Webservice-using-JQuery-ASP-NET-Applicat

Collectives™ on Stack Overflow

Getting and setting ASP.NET attributes in jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related