Ajax and Json if value in textbox is editing not see the modify in c#

Question

User-2004582644 posted

Hi there,

On my form in aspx page I have insert a Panel with UpdateProgress and UpdatePanel

This Panel is update with Ajax and Json

My problem is that when update the value on the TextBox ID="txman" in the database the edit is registered but when I return to the aspx page the change is not displayed.

To see the edit on the TextBox ID="txman" I have to close the browser and reopen the aspx page.

How to do resolve this?

My code below

<asp:UpdateProgress ID="UpdateProgress4" runat="server"
    AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <div class="modal">
            <div class="center">
                <img alt="" src="/aspnet/img/831.gif" />
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-3">
                <asp:TextBox ID="txman" runat="server" Height="200" TextMode="MultiLine" CssClass="pure-u-23-24"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" ControlToValidate="txman"
                    SetFocusOnError="true" ErrorMessage="Required" Text=""
                    Display="None" ValidationGroup="ValidationSummary2"
                    CssClass="validation-summary-errors-one"></asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator Display="Dynamic"
                    ControlToValidate="txman"
                    ID="RegularExpressionValidator9"
                    ValidationExpression="^[\s\S]{0,2000}$"
                    runat="server" ErrorMessage="max 2000"
                    ValidationGroup="ValidationSummary2">
                </asp:RegularExpressionValidator>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<div class="container">
   <asp:ImageButton ID="imgf" runat="server" ValidationGroup="ValidationSummary2"
   ImageUrl="/aspnet/Img/save_button.gif" OnClientClick="if (!confirm('Confirm?')) return false;" />
</div>
<asp:ValidationSummary ID="ValidationSummary2" ValidationGroup="ValidationSummary2" runat="server" ShowMessageBox="true"
   CssClass="validation-summary-errors" ShowSummary="false" />

    $(function () {
        $("[id*=imgf]").bind("click", function () {

            var qString = "?" + window.location.href.split("?")[1];
            var f = {};

                $.ajax({
                    type: "POST",
                    url: "Default.aspx/Save" + qString,
                    data: '{f: ' + JSON.stringify(f) + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",

                    ...
c#

Answer 1

User475983607 posted

Where is the code that populates txman?  You did not share this bit.

Answer 2

User-2004582644 posted

oops here it is

         [WebMethod(EnableSession = true)]
         [ScriptMethod]
         public static void Save(pnf f)
         {
            if (!String.IsNullOrEmpty(HttpContext.Current.Request.QueryString["id"]))
            {
                string ProductID = HttpContext.Current.Request.QueryString["id"].ToString();

                string sql = String.Format(@" UPDATE `txman_table` ");
                sql += String.Format(" SET ");
                sql += String.Format(" txman_column = ?, ");
                sql += String.Format(" WHERE tx_ID_column = ?; ");

                using (OdbcConnection cn =
                            new OdbcConnection(ConfigurationManager.ConnectionStrings["cn"].ConnectionString))
                {
                    using (OdbcCommand command =
                            new OdbcCommand(sql, cn))
                    {
                        try
                        {
                            command.Connection.Open();
                            command.Parameters.AddWithValue("param1", f.txman.ToString().Replace("'", "`").ToUpper());
                            command.Parameters.AddWithValue("param2", ProductID.ToString());
                            command.ExecuteNonQuery();
                        }
                        catch (Exception ex)
                        {
                            throw ex;
                        }
                        finally
                        {
                            command.Connection.Close();
                        }
                    }
                }
            }
         }


         public class pnf
         {
           public string txman { get; set; }
         }

Answer 3

User475983607 posted

Still you have not shown the code that populates txman.  You shared a web method that returns void.  Share the code that populates the txman input.

Do you expect txman to have a value when the web method completes?  If so, return the value from the web method rather than void.  Update your AJAX function to set txman's value in the success handler.

Answer 4

User-2004582644 posted

Sorry, don't understand.

I don't have other code to show.

On my form the textbox `txman` is empty.

I write value "foo" in the textbox `txman `and save this string with `webmethod` and `Ajax/JSon`.

The value "foo" is correctly inserted in the table `txman_table` corresponding to the reference id.

When I return to the aspx page for check the new string this is not displayed.

To see the new string "foo" on the "txman" I have to close the browser and reopen the aspx page.

Answer 5

User475983607 posted

When I return to the aspx page for check the new string this is not displayed.

Up to this point you have not shared any code that sets txman which is most likely the problem.  Can you explain "return to aspx page"?  Is your code redirecting to another aspx page?  Also can you explain why you have an update panel and jQuery/AJAX?   Usually you use one or the other not both.  

Can you explain the high level design because it is difficult to understand the design  intent form the code.

Answer 6

User753101303 posted

Hi,

Seems expected. For now my understanding is that you call a web method that does nothing else than updating the database. Not sure where you expect this to be shown (in the txman tetbox as well ?)

If this your intent, following the Ajax call and the db update you may need to trigger an update panel refresh...

Answer 7

User-2004582644 posted

mgebhard

Chevy Marl Sunderland

When I return to the aspx page for check the new string this is not displayed.

When re-open on the browser the aspx page after editing without close browser, in this case not showed the new string on the textbox txman.

To see the edit on the textbox txman I have to close the browser and reopen the same aspx page.

This is the code for recovery the edit value on the textbox txman

        sql = @String.Format(" SELECT txman_column FROM `txman_table`  ");
        sql += String.Format(" WHERE tx_ID_column IN (?); ");

        using (OdbcConnection myConnectionString =
            new OdbcConnection(ConfigurationManager.ConnectionStrings["cn"].ConnectionString))
        {
            using (OdbcCommand command =
                new OdbcCommand(sql, myConnectionString))
            {
                try
                {
                    if (!String.IsNullOrEmpty(Request.QueryString["id"]))
                    {
                        command.Parameters.AddWithValue("param1", Request.QueryString["id"].ToString());
                        command.Connection.Open();

                        using (OdbcDataReader reader =
                            command.ExecuteReader())
                        {
                            if (reader.HasRows)
                            {
                               txman.Text = reader["txman_column"].ToString().ToUpper();
                               txman.Style["text-align"] = "left";
                            }
                        }
                    }                  
                }
                catch (Exception ex)
                {
                    throw new ApplicationException("operation failed!", ex);
                }
                finally
                {
                    command.Connection.Close();
                }
            }
        }        

Answer 8

User-2004582644 posted

Hi,

Seems expected. For now my understanding is that you call a web method that does nothing else than updating the database. Not sure where you expect this to be shown (in the txman tetbox as well ?)

If this your intent, following the Ajax call and the db update you may need to trigger an update panel refresh...

Hi

Can you explain please?

Answer 9

User475983607 posted

The code and design you've shared up to this point is very confusing with a lot of potential issues.  Here are a few examples.

The incomplete AJAX function POSTs an empty "f" object.  You stating the AJAX function is working correctly.  Perhaps you made an incorrect assumption?   Are you using the Visual Studio debugger to check your logic?  

{f: {}}

    $(function () {
        $("[id*=imgf]").bind("click", function () {

            var qString = "?" + window.location.href.split("?")[1];
            var f = {};

                $.ajax({
                    type: "POST",
                    url: "Default.aspx/Save" + qString,
                    data: '{f: ' + JSON.stringify(f) + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",

The code behind always sets txman to the first record it finds.  However, the query has an "IN" clause which indicted more than one record is expected.

sql = @String.Format(" SELECT txman_column FROM `txman_table`  ");
sql += String.Format(" WHERE tx_ID_column IN (?); ");

Lastly, it unconventional to have jQuery/AJAX and an update panel in the same page.  It's possible but uncommon.    What's even more puzzling is the jQuery/AJAX functions updates the update panel. That makes little sense. 

At this point there are too many oddities in the code to figure out the intention.  Can you clarify or clean up the code?
 

Answer 10

User753101303 posted

For now my understanding is that :

• you input a value in txman
  - imgf is clicked and it seems you are posting this value to your Save method (seems the posted value is not populated but it seems you see the value later so I assume you omitted some code?, if not even the db update should not work as expected) 
  - then your Save method saves that value in the database with a short transformation and in upper case

As you stop here there is no reason for this transformed value to show up magically inside the update panel.

So when the Ajax code succeeds it seems you should either trigger an update panel refresh or maybe do the same transformation client side (really a hack).

Or as you seems a bit comfortable with Ajax your Save method could return the transformed value and then you'll change the value yourself with Ajax and the update panel is not needed at all any more.

Your last attempt shouldn't even compile (the webmethod is static and doesn't have access to page controls, it's basically a quick way to include a web service only or mostly used by the current page).

Not sure why you need to close the browser (wrong caching, it could depend also maybe on preceding code you are not showing or the event in which you are doing that ???)

Answer 11

User314352500 posted

Hi all,

Put this code in page load.

Now there will be no data in cache browser will try to get the page from the server.

 Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
 Response.Cache.SetCacheability(HttpCacheability.NoCache);
 Response.Cache.SetNoStore();

Answer 12

User-2004582644 posted

Hi all,

Put this code in page load.

Now there will be no data in cache browser will try to get the page from the server.

 Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
 Response.Cache.SetCacheability(HttpCacheability.NoCache);
 Response.Cache.SetNoStore();

Hi,

Many thanks for this help, really appreciated.

Now when re-opened web aspx page after edit in textbox "txman" the new value is displays correctly without close the browser and reaccess to web site.