如何在控件vb.net中将参数从javascript传递到隐藏字段

Question

i have a control that has two asp:HiddenField

  <asp:HiddenField runat="server" ID="tabTitle" />
  <asp:HiddenField runat="server" ID="tabMenu" />

this control load in a page called Alarms

the control on the alarms page look like this

     <alarm:SubscriptionPanel ID="pnlSubscription" runat="server" />

what iam trying to do is passing value from page alarms to the control hidden fields and there is a function at the control code behind that reads the hidden fields values

Question is how can i pass javascript values to hidden field in controls on page load

thanks in advance

Answer 1

You can use JQuery for it like this

Example :

$("input[type=hidden][id='<%=tabTitle.ClientID%>']").val("Hello World"); 
$("input[type=hidden][id='<%=tabMenu.ClientID%>']").val("Hello World"); 

Answer 2

If you are using ASP.NET 4.0 your best bet is to set the ClientIDMode property on those controls to static and then simply use javascript to populate the hidden elements using plain ol' document.getElementById() . Something like this:

<asp:HiddenField runat="server" ID="tabTitle" ClientIDMode="Static" />


//since the id mode in the hidden element is static; 
//you should be able to do this safely:
document.getElementById('tabTitle').value = myvalue;

If you are not on ASP.NET 4.0; jQuery will help here since you can find an element using partial matching as HatSoft showed you in his answer but with a slight difference:

$("input[type=hidden][id*='tabTitle']").val("Hello World");

Note the id*= part. This gets all input elements whose ids contain the word tabTitle

Answer 3

Besides the approach commented by @Icarus, you could expose a JavaScript function from your control.

The problem you would face if you use ClientIDMode=Static in that, you would be restricted to add only one alarm:SubscriptionPanel control to your page

If you are planning to use only one control on each page, then the easiest approach is the one commented by @Icarus , however I would consider it as a temporal approach

This alternative encapsulates the logic where it really belongs, inside the custom control:

Output

ASCX

<div id="<%: this.ClientID %>">
    <asp:HiddenField runat="server" ID="hidden1" Value="one" />
    <asp:HiddenField runat="server" ID="hidden2" />
    <asp:Button Text="Post me" runat="server" OnClick="postme_Click" />
    <asp:Label runat="server" ID="lbl"></asp:Label>
    <script type="text/javascript">
        $(function () {
            var myObj = {
                setHidden1: function (myValue) {
                    $("#<%: this.hidden1.ClientID %>").val(myValue);
                },
                getHidden1: function () {
                    return $("#<%: this.hidden1.ClientID %>").val();
                },
                helloWorld: function () {
                    alert("hellow world");
                }
            };
            $("#<%: this.ClientID %>").data("data", myObj);
        });
    </script>
</div>

ASCX code behind

    protected void postme_Click(object sender, EventArgs e)
    {
        this.lbl.Text = "Posted: " + this.hidden1.Value;
    }

ASPX

    <script type="text/javascript">
        $(function () {
            $("#myPageButton").click(function () {
                $("#<%: this.myControl.ClientID %>").data("data").setHidden1("plop");
                $("#<%: this.myControl2.ClientID %>").data("data").setHidden1("plop2");
            });
        });
    </script>
    <input type="button" id="myPageButton" value="Set Hidden value" />
    <uc1:EncapsulateJavaScriptLogicInUserControl ID="myControl" 
        runat="server" />
    <uc1:EncapsulateJavaScriptLogicInUserControl ID="myControl2" 
        runat="server" />
    <uc1:EncapsulateJavaScriptLogicInUserControl ID="myControl3" 
        runat="server" />

---

I just found another way, that looks even more object oriented, however, it requires you to use the Microsoft AJAX library.

ASCX

Change: $("#<%: this.ClientID %>").data("data", myObj);

Into: $.extend($get("<%: this.ClientID %>"), myObj);

ASPX

Change:

$("#<%: this.myControl.ClientID %>").data("data").setHidden1("plop");
$("#<%: this.myControl2.ClientID %>").data("data").setHidden1("plop2");

Into:

$get("<%: this.myControl.ClientID %>").setHidden1("plop");
$get("<%: this.myControl2.ClientID %>").setHidden1("plop2");

With this approach you remove the use of the .data jQuery function