Category Archives: HiidenField

HiidenField

How to set the x, y positions of the dynamic control

I have retreived the position of the dynamic controls into hiddenfields (present in usercontrol) using javascript on the content page. Now I am willing to store their postions in to the viewstate (in user control)  before
base.SaveViewState(); and get the position of the controls from viewstate after
base.LoadViewState(savedState); so that they may not loose their positions.

Any help will be appreciable.

Hi,

Could you describe more details?

Do you mean the popup control positon?

Sorry for the delay in the response.

Details:

I’m creating draggable panels making the use of Ajax DargPanelExtender.

DragPanelExtender & the Panel which i’m making draggable are in a usercontrol within a update panel.

Now, on the content page (.aspx page) I have a button & a Update panel. Within this update panel I’m adding usercontrol from code behind. (Note: Button is outside the update panel)

The draggable panels(usercontrol) added on the content page is working fine.

Earlier when I was creating the successive draggable panels on the click event of the button the previous draggable panels were disapperaring (or loosing) so
I am re-creating the draggable panels(usercontrol) on OnInIt event which is also working fine.

On the Usercontrol I’m also having two hiidenfields for storing the x & y positions
of the usercontrol respectively.

I’m retrieving the x & y positions of the usercontrol into the hiddenfields (present in the usercontrol) using javascript which I have registered
on the aspx.cs page using RegisterClientScriptBlock. Which is also working fine
I’m able to get the position of each usercontrol into the hiddenfields on onmousedown event( being fired while drag and drop) .
Checked via populating the x & y positions present in the hiddenfields
into a alert box.

Now, issue is that while I’m re-creating the usercontrols saved in a Generic type I want to set the Left and Top property of the control using the values present in the hiddenfields corresponding to each usercontrol as in
the code below so that they may retain their positions on the AsyncPostBack

          string hdfposX_val = "(" + controlToAdd.ID + "_hdfPosX"+").Value";
          controlToAdd.Attributes.Add("style", "position:absolute;left:" +hdfposX_val+ "px" + ";");

which is not working.

(Note : each usercontrol and its containing hiddenfield controls are having unique ids viz.

usercontrol-> controlToAdd.ID = "usercontrol_" + Guid.NewGuid().ToString();

usercontrol_hiddenfield_position_X-> " + controlToAdd.ID + "_hdfPosX"+"

usercontrol_hiddenfield_position_Y-> " + controlToAdd.ID + "_hdfPosY"+")

Any help from your side will be appreciable.

May be from my previous reply you not able to get what I’m trying to convey so I’m posting my whole code so that you can get the exact pisture of what I’m doing. (Please also go through my immediate previous reply so that you can co-relate both)

.aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="final.aspx.cs" Inherits="final" Async="true" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Src="~/ufinal.ascx" TagName="ufinal" TagPrefix="uf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    html, body
    {
      height: 100%;
    }
  </style>
 
</head>
<body>
  <form id="form1" runat="server">
  <asp:Label ID="lblTime" runat="server"></asp:Label>
  <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true">
  </cc1:ToolkitScriptManager>
  <asp:Button ID="btn" runat="server" Text="Add Control" OnClick="btnAdd_OnClick" />
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </ContentTemplate>
<%–          <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btn" />
      </Triggers>–%>
  </asp:UpdatePanel>
  </form>
</body>
</html>

.aspx.cs page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.EnterpriseServices;
using System.Text;
public partial class final : System.Web.UI.Page
{
  Dictionary<string, string> myControlList;
    protected void Page_Load(object sender, EventArgs e)
    {
      lblTime.Text = DateTime.Now.ToString();
    }
    protected override void OnInit(EventArgs e)
    {
      base.OnInit(e);

      if (!IsPostBack)
      {
        myControlList = new Dictionary<string, string>();
        Session["myControlList"] = myControlList;
      }
      else
      {
        myControlList = (Dictionary<string, string>)Session["myControlList"];

        foreach (var registeredControlID in myControlList.Keys)
        {
          UserControl controlToAdd = new UserControl();
          controlToAdd = (UserControl)controlToAdd.LoadControl(myControlList[registeredControlID]);
          controlToAdd.ID = registeredControlID;
          string hdfposX_val = "(" + controlToAdd.ID + "_hdfPosX"+").Value";
          controlToAdd.Attributes.Add("style", "position:absolute;left:" +hdfposX_val+ "px" + ";");
          PlaceHolder1.Controls.Add(controlToAdd);
        }
      }
    }

    protected void btnAdd_OnClick(object sender, EventArgs e)
    {
      UserControl controlToAdd = new UserControl();
      controlToAdd = (UserControl)controlToAdd.LoadControl("ufinal.ascx");
      controlToAdd.ID = "usercontrol_" + Guid.NewGuid().ToString();

      StringBuilder strScript = new StringBuilder();
      strScript.Append("<script type=text/javascript>n");
      strScript.Append("function getPosition(obj) {n");
      strScript.Append("var X = new Number();n");
      strScript.Append("var Y = new Number();n");
      strScript.Append("var xaxis = findPosX(obj);n");
      strScript.Append("var yaxis = findPosY(obj);n");
      strScript.Append("var hdfPosX = document.getElementById(‘" + controlToAdd.ID + "’+’_hdfPosX’);n");
      strScript.Append("var hdfPosY = document.getElementById(‘" + controlToAdd.ID + "’+’_hdfPosY’);n");
      strScript.Append("hdfPosX.value = xaxis;n");
      strScript.Append("hdfPosY.value = yaxis;n");
      strScript.Append("var posX = hdfPosX.value;n");
      strScript.Append("var posY = hdfPosY.value;n");
      strScript.Append("alert(‘x-axis: ‘ + posX + ‘ y-axis: ‘ + posY);n}n");
      strScript.Append("function findPosX(obj) {n");
      strScript.Append("var curLeft = 0;n");
      strScript.Append("if (obj.offsetParent)n");
      strScript.Append("while (1) {n");
      strScript.Append("curLeft += obj.offsetLeft;n");
      strScript.Append("if (!obj.offsetParent)n");
      strScript.Append("break;n");
      strScript.Append("obj = obj.offsetParent;n}n");
      strScript.Append("else if (obj.X)n");
      strScript.Append("curLeft += obj.X;n");
      strScript.Append("return curLeft;n}n");
      strScript.Append("function findPosY(obj) {n");
      strScript.Append("var curTop = 0;n");
      strScript.Append("if (obj.offsetParent)n");
      strScript.Append("while (1) {n");
      strScript.Append("curTop += obj.offsetTop;n");
      strScript.Append("if (!obj.offsetParent)n");
      strScript.Append("break;n");
      strScript.Append("obj = obj.offsetParent;n}n");
      strScript.Append("else if (obj.Y)n");
      strScript.Append("curTop += obj.Y;n");
      strScript.Append("return curTop;n}n");
      strScript.Append("</script>");
      Page.ClientScript.RegisterClientScriptBlock(GetType(), "", strScript.ToString());

      PlaceHolder1.Controls.Add(controlToAdd);
      myControlList.Add(controlToAdd.ID, controlToAdd.AppRelativeVirtualPath);
    }

}

.ascx page (usercontrol)

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ufinal.ascx.cs" Inherits="ufinal" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
    <cc1:DragPanelExtender runat="server" TargetControlID="PnlContainer" DragHandleID="PnlHeader">
    </cc1:DragPanelExtender>
    <asp:Panel ID="PnlContainer" runat="server" CssClass="dragContainer" onmouseup="javascript:getPosition(this);">
      <asp:Panel ID="PnlHeader" runat="server" CssClass="dragHeader">
        Click and Drag Here To Move Me
      </asp:Panel>
    </asp:Panel>
    <input type="hidden" runat="server" id="hdfPosX" name="Position X" />
    <input type="hidden" runat="server" id="hdfPosY" name="Position Y" />
   </ContentTemplate>
</asp:UpdatePanel>

.ascx.cs page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ufinal : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected override void LoadViewState(object savedState)
    {
      base.LoadViewState(savedState);
    }
    protected override object SaveViewState()
    {
      return base.SaveViewState();
    }
}