CODEWITHSUNDEEP
javascriptjqueryasp.netpostback
BVernon
BVernon

Reputation: 3747

How to set text value of TextBox before posting?

I have a hidden TextBox and populate it with a clientside script before posting, however on the server side it shows that the Text value for the TextBox is an empty string.

Here's my entire aspx page:

<!-- Include Fancytree skin and library -->
<link href="Scripts/FancyTree/skin-win8/ui.fancytree.min.css" rel="stylesheet" />
<script src="Scripts/FancyTree/jquery.fancytree-all.js"></script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="GetIds" runat="server" OnClientClick=GetSelection() OnClick="GetIds_Click"/>
        <asp:TextBox ID="DepartmentSelection" Visible ="false" runat="server" />
        <div id="tree"></div>
    </form>
</body>
</html>

<!-- Initialize the tree when page is loaded -->
<script type="text/javascript">
    // Load FancyTrees
    var depTree;

    $(function () {
        loadTree("#tree", "TestPage.aspx/GetDepartmentTreeData");
    })

    function loadTree(elementId, dataUrl)
    {
        $(elementId).fancytree({
            checkbox: true,
            selectMode: 3,
            source: PostContext(dataUrl, JSON.stringify({ selected: false, hierarchyLevels: [] })),
            lazyLoad: function (event, data) {
                data.result = PostContext(dataUrl,
                    JSON.stringify({
                        selected: data.node.selected,
                        hierarchyLevels: data.node.data.HierarchyLevels
                    }))
            }
        });

        depTree = $(elementId).fancytree("getTree");
    }

    function GetSelection() {
        var arr = [];
        var t = depTree.getSelectedNodes(true);

        $.each(t, function (index, value) {
            arr.push(value.data);
        });

        var j = JSON.stringify(arr);
        $("#DepartmentSelection").val(j);
    }

    function PostContext(url, data) {
        return {
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: url,
            data: data
        }
    }
</script>

I have verified that the GetSelection function is running before the postback occurs, but when the GetIds_Click event fires on the server side the DepartmentSelection.Text value is still an empty string as mentioned. What am I doing wrong?

Also is there a better way to accomplish sending data back to the server on post back? I'm basically just trying to let the server know which checkboxes in a tree view were selected.

Upvotes: 0

Views: 592

Answers (2)

Andrei
Andrei

Reputation: 56688

  1. Visible="false" means text box won't be rendered to the page at all. That means from client point of view it does not exist and there is now way to find it with javascript of course. You can either set something like display: none to the styling to the text box, or opt to use asp:Hidden field.

  2. DepartmentSelection is a server side ID, on the client side it will be different. You can use ClientID to find out the client side value, or set TextBox's ID mode to Static so that ID is the same on client and on server.

  3. That of course depends on the tree view you are using, but it should be posting something on its own. Have you verified request info for the values from the tree view control?

Upvotes: 2

suff trek
suff trek

Reputation: 39777

If ASP.NET control is marked as Visible ="false" - it is not rendered to client at all, so there's no "DepartmentSelection" on client side and most likely $("#DepartmentSelection").val(j) is throwing error in the console.

Instead of doing Visible ="false" - you can hide the textbox by assigning style='display:none'.

But even better approach - instead of using asp:TextBox - use asp:HiddenField. It doesn't need any visibility attributes, because it is always hidden - and you can assign values on client-side and read them in server-side code.

Upvotes: 3

Related Questions