C# variable value only update once when called in Javascript

Question

I've look an found only a similar post and didn't really answer my question or maybe they did but I didn't understand. The post I read was this one: Why does this javascript variable I'm creating via C# only get updated once?

I'm using a paged gridview and every time it's object data source runs the SelectCountMethod, I use the returning value on javascript. But, I've noticed that even thought that same returned value changes, on the server side. On javascript this value doesn't update.

My program is quite long but I'll use a basic example and hopefully some of you will understand it.

Client side:

function SomeFuntion()
{
    alert("<%=num%>");
}

Server side:

//Global variable
Public Static int num = 0;

Public int SelectCountMethod()
{                  
    var num = SomeMethod(); //Returns int

    return num;
}

For example, on the server side num returns 60 and then this value updates to 7. On the server side num equals 7 but on the client side it's still 60. Is there a way to update the client sides value?

I apologies for my poor typing skills, English is not my native language. Some examples might be helpful and thanks in advance.

I noticed that it doesn't mater where I update this variable(on selectCount method or any other method), on the client side doesn't update.

Answer 1

Taking a look at your client-side code, the "<%=num%>" is actually run on the server. If you examined the source in your browser, what you'll see is:

function SomeFuntion()
{
    alert("60");
}

As you can see--there is no variable to update. In order to see that "60" change to "7", you'd have to refresh the client to pick up the new value that the server has for "num".

Answer 2

Without your server side code, we won't be able to find the ideal solution. However, you could potentially do the following:

• Use a Hidden Field to store the value.
• Use a global variable for the page, to pass the value to global variable in your JavaScript.

The easiest would be the Hidden Field, the reason is you can easily modify the data on both Client and Server without any real issues. You'll want to ensure that you do not modify the state to often.

<input type="hidden" id="hdTimer" runat="server" />

Then you can do your JavaScript, such as:

$('#Example').on('change', function () {
     $('#hdTimer').val('60');
});

Now throughout the Client code you'll be able to modify the field with no issues, but when you need to submit a form, for a PostBack. You can use the field server side:

var content = hdTimer.value;

As I noted though, excessive cross manipulation may cause an issue at some point. Depending on the complexity. Your other approach would be the Global.

// Server Side
var example = 60;
protected void Page_Load(object sender, EventArgs e)
{

}

So this Global will hold the value, but when you reinitialize the value at Page Load it will hold be able to push an updated value to your JavaScript:

//Client Side:
var example = '<%= example %>';

The key though, will be to ensure you properly reinitialize the value.

When you do a PostBack your page is reinitialized, which can modify values on you if you aren't aware. This is incredibly important.

Answer 3

You could modify your JS method like this

var myMsg = <%=num%>;
function SomeFuntion()
{
    alert(myMsg);
}

and in the codebehind

public int num = 60;    
public int SelectCountMethod()
    {                  
        num = SomeMethod(); //Returns int
        ScriptManager.RegisterStartupScript(this,
                                                        this.GetType(),
                                                        "Funct",
                                                        "myMsg = " + num + ";",
                                                        true);
        return num;
    }

So every time your method SelectCountMethod() is called, your JS variable myMsg get a new value because of the line ScriptManager.RegisterStartupScript

Answer 4

Use an HttpHandler and jQuery. Google is your friend, there are several examples on SO as well.

Answer 5

I found a possible solution, inefficient, but it will have to do. I have a search textbox that every time the search button is clicked, updates the grid view with the retrieved data from a data base. When the Onclick is called it binds the data source with the gridView. What I did was call the SelectCountMethod again right below the binding and used the same parameters I had stored on the Object data source as paramaters for the selectCountMethod. Then the amount returned by the selectCount I stored it on a hiddenField and that's it.

//Global variables
string _param1 = string.Empty,
       _param2 = string.Empty;

//On click method for search btn
protected void OnSearch(object sender, EventArgs e)
{
    gv.DataBind();

    someHiddenField = SelectCountMethod(param1, param2); 
}

protected void OnSelecting(object sender, ObjectDataSourceSelectingEventArgs e)
    {
        try
        {
            e.InputParameters["Param1"] = param1;

            _param1 = param1                

            e.InputParameters["Param2"] = param2; 

            _param2 = param2;      
        }
        catch (Exception ex)
        {
            cvServerError.IsValid = false;
            cvServerError.ErrorMessage = ex.Message;
        }
    }