Getting and setting values between code behind and JavaScript

Posted on 2013-09-19
Medium Priority
Last Modified: 2013-09-25
Hello experts,
I'm trying to create a sortable list that the client can edit and rearrange for content management on their Web site. The application is running on .NET 3.5, with VB and the content is nested within a masterpage.

I'm using JQuery sortable to let the user edit a TextBox within an unordered list to determine the order of the items.

It's my intention to populate the textboxes and HiddenFields with data from the database (which is working) and then use the sortable JQuery to update the values of the hidden fields in the proper order (Client Side), which I can then save to the database by accessing the HiddenField values (server side).

I'm able to get the sortable list to return the data in the order I want if I use an alert box to show me what's happening but either I'm not updating the HiddenField values or the server doesn't know what's happening Client side.

Anyway here's my code...


<asp:HiddenField ID="HiddenField1" Value="" runat="server" />
<asp:HiddenField ID="HiddenField2" Value="" runat="server" />
<asp:HiddenField ID="HiddenField3" Value="" runat="server" />
<asp:HiddenField ID="HiddenField4" Value="" runat="server" />
<asp:HiddenField ID="HiddenField5" Value="" runat="server" />

<ul class="sortable" runat="server" id="ULSortlist">
    <li class="ui-state-default" id="liFact1" runat="server"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <asp:TextBox ID="txtFact1" runat="server" MaxLength="500" />
    <li class="ui-state-default" id="liFact2" runat="server"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <asp:TextBox ID="txtFact2" runat="server" MaxLength="500" />
    <li class="ui-state-default" id="liFact3" runat="server"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <asp:TextBox ID="txtFact3" runat="server" MaxLength="500" />
    <li class="ui-state-default" id="liFact4" runat="server"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <asp:TextBox ID="txtFact4" runat="server" MaxLength="500" />
    <li class="ui-state-default" id="liFact5" runat="server"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <asp:TextBox ID="txtFact5" runat="server" MaxLength="500" />

Open in new window

//initialize the sortable list
$(function () {

$(function () {
    //declare a counter and a variable to hold elements
    var i = 1;
    var HiddenField;
    //on sortable list change do the following....
        connectWith: ".connectedSortable",
        update: function () {
            //iterate through the textboxes and place their values in the correct hidden field
            $(".sortable").find("input").each(function () {
                HiddenField = document.getElementById("ctl00_ContentPlaceHolder1_HiddenField" + i);
                HiddenField.value = $(this).val();
            i = 1;

Open in new window

note: uncomment the alert to see it return the proper order

CSS & Scripts for easy copy/paste/test
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <style type="text/css">
        .sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
        .sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; line-height:18px; vertical-align:middle;}
        .sortable li span { position: absolute; margin-left: -1.3em; }
        li input
            width: 100%;

Open in new window

Also note that this is nested in a MasterPage when making ID suggestions. I feel like I've been able to get the server to recognize a hidden field updated with JavaScript before but I don't remember how I did it and that code has been overwritten since then so I can't reference it. Right now I'm referencing the HiddenFields with:

 objCmd.Parameters.AddWithValue("@Fact1", HiddenField1.Value.Trim)
        objCmd.Parameters.AddWithValue("@Fact2", HiddenField2.Value.Trim)
        objCmd.Parameters.AddWithValue("@Fact3", HiddenField3.Value.Trim)
        objCmd.Parameters.AddWithValue("@Fact4", HiddenField4.Value.Trim)
        objCmd.Parameters.AddWithValue("@Fact5", HiddenField5.Value.Trim)

Open in new window

But it seems like I would need to post this data to the server somehow.

Thanks in advance for the help!
Question by:Paulconsulting
  • 2
  • 2
LVL 35

Accepted Solution

Robert Schutt earned 2000 total points
ID: 39508299
it seems like I would need to post this data to the server somehow
yes, you would. Do you want to update this each time the user does something or would it be acceptable to just add a button to the form?

If you want to update each time it would seem more useful to use an AJAX post to a new page, outside of the normal website-flow so to speak, with the sole purpose of updating these fields in the database.

When I add a button to post the changes "on demand", it seems to work without problems:
LVL 35

Assisted Solution

by:Robert Schutt
Robert Schutt earned 2000 total points
ID: 39508321
Actually there seems to be an easier way: at the end of your update function (after line 23 in your posted javascript code above) add this:

Open in new window

then in your code behind, change the Page_Load:
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Me.IsPostBack Then
            ' update your database here
            ' ...
            'objCmd.Parameters.AddWithValue("@Fact1", HiddenField1.Value.Trim)
            'objCmd.Parameters.AddWithValue("@Fact2", HiddenField2.Value.Trim)
            'objCmd.Parameters.AddWithValue("@Fact3", HiddenField3.Value.Trim)
            'objCmd.Parameters.AddWithValue("@Fact4", HiddenField4.Value.Trim)
            'objCmd.Parameters.AddWithValue("@Fact5", HiddenField5.Value.Trim)

            ' put the texts back in the page in the right order
            txtFact1.Text = HiddenField1.Value.Trim
            txtFact2.Text = HiddenField2.Value.Trim
            txtFact3.Text = HiddenField3.Value.Trim
            txtFact4.Text = HiddenField4.Value.Trim
            txtFact5.Text = HiddenField5.Value.Trim
        End If
    End Sub

Open in new window


Assisted Solution

Paulconsulting earned 0 total points
ID: 39510274
Thanks for the help Robert,

I found the problem. I didn't understand that all of the page_load code runs when you submit a form and was repopulating my data before it had a chance to save (Hence the confusion about how does the server know what I'm putting in the Hidden Fields client-side). I placed the getData() routine inside the --If Page.IsPostBack = False Then-- condition and now it works like a charm.

The more you know...

Thanks again for the assist! I appreciate your expert-ness!

Author Closing Comment

ID: 39520488
Problem was unrelated to the code I submitted. Hopefully this answer will help someone else who gets stuck with a similar problem.

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question