Using html5 contentEditable to save to db

I'm trying to allow users to edit the content of their webpage and then hit save so that the changes are then saved into a db.

This is my code-behind:

string newName;
        string newIntro;
        string newEduc;
        string newWork;
        
        newName = h1.Text;
        newIntro = intro.Text;
        newEduc = educ.Text;
        newWork = employ.Text;

        string connectionInfo = ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString;

        using (SqlConnection connection = new SqlConnection(connectionInfo))
        {

            connection.Open();
            SqlCommand myCommand = new SqlCommand("UPDATE simpleContent SET userName = @newName, infoContent = @newIntro, educContent = @newEduc, workContent = @newWork WHERE userID = @userName", connection);

            try
            {

                string username = HttpContext.Current.User.Identity.Name;
                myCommand.Parameters.AddWithValue("@userName", username.ToString());
                myCommand.Parameters.AddWithValue("@newName", newName.ToString());
                myCommand.Parameters.AddWithValue("@newIntro", newIntro.ToString());
                myCommand.Parameters.AddWithValue("@newEduc", newEduc.ToString());
                myCommand.Parameters.AddWithValue("@newWork", newWork.ToString());
                myCommand.ExecuteNonQuery();
                connection.Close();
            }
            catch
            {
                Response.Redirect("http://www.google.co.uk");
            }

            
        }
    }

The code does work as the try part of the statement is running but the changes aren't being saved to the db. Any ideas as to why?

Here is a snippet of the code I'm using on the client side:

<div id="container">
<header>
    <asp:Image ID="userImage" runat="server" AlternateText="User" CssClass="image"/>
    <h1><asp:Label ID="h1" runat="server" CssClass="intro" contenteditable="true"></asp:Label></h1>
</header>

Re: Using html5 contentEditable to save to db

I would try putting a breakpoint at the beginning of this code behind and F11 through it to see where its bombing out. One thing I can suggest is move your connection.Close(); to after the catch block since that will leave the connection open. So your code will look more like this:

string newName;
        string newIntro;
        string newEduc;
        string newWork;
         
        newName = h1.Text;
        newIntro = intro.Text;
        newEduc = educ.Text;
        newWork = employ.Text;
 
        string connectionInfo = ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString;
 
        using (SqlConnection connection = new SqlConnection(connectionInfo))
        {
 
            connection.Open();
            SqlCommand myCommand = new SqlCommand("UPDATE simpleContent SET userName = @newName, infoContent = @newIntro, educContent = @newEduc, workContent = @newWork WHERE userID = @userName", connection);
 
            try
            {
 
                string username = HttpContext.Current.User.Identity.Name;
                myCommand.Parameters.AddWithValue("@userName", username.ToString());
                myCommand.Parameters.AddWithValue("@newName", newName.ToString());
                myCommand.Parameters.AddWithValue("@newIntro", newIntro.ToString());
                myCommand.Parameters.AddWithValue("@newEduc", newEduc.ToString());
                myCommand.Parameters.AddWithValue("@newWork", newWork.ToString());
                myCommand.ExecuteNonQuery();
            }

            catch
            {
                Response.Redirect("http://www.google.co.uk");
            }

             connection.Close();
        }
    }

Re: Using html5 contentEditable to save to db

Already tried moving the connection.close();

The only thing I can think of is that its not reading the text that is being written in the labels .

Re: Using html5 contentEditable to save to db

Then F11 through it one step at a time and watch the Autos panel. That will show you what is inside your variables.

Re: Using html5 contentEditable to save to db

Wait, you're referring to username but where is the variable declaration? If you try inserting a null variable your database is probably going to pitch a fit.

Re: Using html5 contentEditable to save to db

Ah, ok I saw it, I woudl still try the F11 thing just to see what the values of your variables are.

Re: Using html5 contentEditable to save to db

F11?

I'm not sure what you mean. I hit F11 and it builds my project.

Re: Using html5 contentEditable to save to db

Sorry, I meant set a breakpoint at hte beginning of the routine. Hit F5 for debug, then F11 to step through one line at a time.

Re: Using html5 contentEditable to save to db

I've set a breakpoint at the start of the btnSave_Click function, hit F5 and then hit F11 but nothing happens

Re: Using html5 contentEditable to save to db

Yeah, it is reading the original values and not what I've changed it to.

I'm not sure as to why it is reading the original value and not what has been typed in in it's place.

Re: Using html5 contentEditable to save to db

I think the issue is that I am adding contentEditable="true" to an ASP Label which you can't really do.

I've tried doing this:

But I'm not sure how to get the h1Test assigned to a string variable in the code-behind file

Re: Using html5 contentEditable to save to db

A label is not an editable control. use a text box.

Re: Using html5 contentEditable to save to db

contentEditable isn't "supported" by an ASP control. Which is why I think it isn't reading the changed value.

I think it has to be html controls but I'm not sure how I would use them in the code-behind.

Re: Using html5 contentEditable to save to db

Are you trying to change these database values on the fly? If so, you're going to probably need to do an OnTextChanged event for each field. Others here may have other suggestions but without seeing your entire project, I can only fathom a guess.

Re: Using html5 contentEditable to save to db

Okay, this is what I have on my page entitled EditMyContent.aspx

<p>
<asp:Button ID="saveBtn" runat="server" Text="Save Changes"
        onclick="saveBtn_Click" />
</p>
</header>

<div id="container">
<header>
    <asp:Image ID="userImage" runat="server" AlternateText="User" CssClass="image"/>
    <h1><asp:Label ID="h1" runat="server" CssClass="intro" contentEditable="true"></asp:Label></h1>
</header>

And this is everything I have in my saveBtn_Click function in the code-behind

protected void saveBtn_Click(object sender, EventArgs e)
    {

        string newName;
        string newIntro;
        string newEduc;
        string newWork;


        newName = h1.Text;
        newIntro = intro.Text;
        newEduc = educ.Text;
        newWork = employ.Text;

        string connectionInfo = ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString;

        using (SqlConnection connection = new SqlConnection(connectionInfo))
        {

            connection.Open();
            SqlCommand myCommand = new SqlCommand("UPDATE simpleContent SET userName = @newName, infoContent = @newIntro, educContent = @newEduc, workContent = @newWork WHERE userID = @userName", connection);

            try
            {

                string username = HttpContext.Current.User.Identity.Name;
                myCommand.Parameters.AddWithValue("@userName", username.ToString());
                myCommand.Parameters.AddWithValue("@newName", newName.ToString());
                myCommand.Parameters.AddWithValue("@newIntro", newIntro.ToString());
                myCommand.Parameters.AddWithValue("@newEduc", newEduc.ToString());
                myCommand.Parameters.AddWithValue("@newWork", newWork.ToString());
                myCommand.ExecuteNonQuery();
                
            }
            catch
            {
                Response.Redirect("http://www.google.co.uk");
            }
            connection.Close();
            
        }
    }

Re: Using html5 contentEditable to save to db

But label is not editable. You have to use a textbox or something like that. Try textbox without that contentEditable tag since textbox is editable by default.