[FatalTouch]

Well I am new to this forums and programming also.
These are my questions.

1.Does Asp.net controls ID stay the same while rendering to HTML?

2.If i have a master page , how am i supposed to use javascript on content pages "As they dont have body or anything".

3.Is there any special type of coding needed to include javascript into asp.net pages?.

4. Is there any way that i can use an external js script file into asp.net like we do in php?.(i.e just specifying the script location..)


Hoping my programming skills will get much better through these forums.

Regards

Mohit Mittal

This post has been edited by FatalTouch: 08 October 2011 - 08:03 AM

[FatalTouch]

Bump.. imma give an example..
This is my javascript

var $ = function (id) {
    return document.getElementById(id);
}
var clickreset = function () {
    $("TextBox3").value = "";
    $("TextBox4").value = "";
    $("TextBox5").value = "";
    $("TextBox6").value = "";
    $("TextBox7").value = "";
    $("TextBox8").value = "";
}



window.onload = function () {
    $("reset").onclick = clickreset;
}

and this is some of my html code from content page that the js is used on

<tr>
                        <td style="width: 113px">
                            <asp:Label ID="Label6" runat="server" Text="E-Mail ID"></asp:Label>
                        </td>
                        <td style="width: 128px">
                            <asp:TextBox ID="TextBox3" runat="server" EnableViewState="False"></asp:TextBox>
                        </td>
                        <td>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                                ControlToValidate="TextBox3" ErrorMessage="*"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" 
                                ControlToValidate="TextBox3" ErrorMessage="Invalid Email" 
                                ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 113px">
                            <asp:Label ID="Label7" runat="server" Text="Password"></asp:Label>
                        </td>
                        <td style="width: 128px">
                            <asp:TextBox ID="TextBox4" runat="server" EnableViewState="False" 
                                TextMode="Password"></asp:TextBox>
                        </td>
                        <td>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                                ControlToValidate="TextBox4" ErrorMessage="*"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 113px">
                            <asp:Label ID="Label8" runat="server" Text="Confirm Password"></asp:Label>
                        </td>
                        <td style="width: 128px">
                            <asp:TextBox ID="TextBox5" runat="server" EnableViewState="False" 
                                TextMode="Password"></asp:TextBox>
                        </td>
                        <td>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
                                ControlToValidate="TextBox5" ErrorMessage="*"></asp:RequiredFieldValidator>
                            <asp:CompareValidator ID="CompareValidator1" runat="server" 
                                ControlToCompare="TextBox4" ControlToValidate="TextBox5" 
                                ErrorMessage="Password Does Not Match"></asp:CompareValidator>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 113px">
                            <asp:Label ID="Label9" runat="server" Text="First Name"></asp:Label>
                        </td>
                        <td style="width: 128px">
                            <asp:TextBox ID="TextBox6" runat="server" EnableViewState="False"></asp:TextBox>
                        </td>
                        <td>
                            &nbsp;</td>
                    </tr>
                    <tr>
                        <td style="width: 113px">
                            <asp:Label ID="Label10" runat="server" Text="Last Name"></asp:Label>
                        </td>
                        <td style="width: 128px">
                            <asp:TextBox ID="TextBox7" runat="server" EnableViewState="False"></asp:TextBox>
                        </td>
                        <td>
                            &nbsp;</td>
                    </tr>
                    <tr>
                        <td style="width: 113px; height: 29px;">
                            <asp:Label ID="Label11" runat="server" Text="Captcha"></asp:Label>
                        </td>
                        <td style="width: 128px; height: 29px;">
                            <asp:TextBox ID="TextBox8" runat="server" EnableViewState="False"></asp:TextBox>
                        </td>
                        <td class="style3">
                            <asp:Image ID="Image2" runat="server" Height="25px" Width="75px" />
                        </td>
                    </tr>

so what i basically showed u was an example of a clear button which is not working for me atm..

[keakTheGEEK]

FatalTouch, on 08 October 2011 - 07:54 AM, said:

1.Does Asp.net controls ID stay the same while rendering to HTML?

Depends on a few things. By default, asp.net will add the Id of the containing server control to its child controls when the page gets rendered. so if you have a textbox server control inside of a panel server control, then the id of the textbox would be PanelID_TextboxID in the rendered web page. In ASP.net 4.0 you can take advantage of the clientidmode property.

2.If i have a master page , how am i supposed to use javascript on content pages "As they dont have body or anything".

The body tag should be located in the master page. You can add the runat="server" attribute to your body tag if you need to reference it in the code behind file (.cs/.vb).

3.Is there any special type of coding needed to include javascript into asp.net pages?.

You may need to program your javascript differently in certain situations, especially if you need to add scripts dynamically. Here are a few examples on ways you can include javascript in your pages:

Using Javascript Along with ASP.NET
See Javascript section on this link

4. Is there any way that i can use an external js script file into asp.net like we do in php?.(i.e just specifying the script location..)

You can reference external scripts in asp.net just like you would in any normal web page with a script tag

<script type="text/javascript" src="MyScript.js"></script>

It's also common to add a content place holder in the head tag of your master page so that you can change the script source on different pages...

Hope this helps.

[FatalTouch]

Well after trying to figure it out for about couple of hours i just decided to hard code...
this is how my js looks after modification..

var $ = function (id) {
    return document.getElementById(id);
}
var clickreset = function () {
    $("ctl00_ContentPlaceHolder1_TextBox4").value = "";
    $("ctl00_ContentPlaceHolder1_TextBox3").value = "";
    $("ctl00_ContentPlaceHolder1_TextBox5").value = "";
    $("ctl00_ContentPlaceHolder1_TextBox6").value = "";
    $("ctl00_ContentPlaceHolder1_TextBox7").value = "";
    $("ctl00_ContentPlaceHolder1_TextBox8").value = "";
    $("ctl00_ContentPlaceHolder1_TextBox9").value = "";
}



window.onload = function () {
    $("reset").onclick = clickreset;
}

is is okay if i stick to hard coding? because i don't think i will have any problem understanding which id's are being referred to..

It seems to be working properly..

This post has been edited by FatalTouch: 09 October 2011 - 07:02 AM

[keakTheGEEK]

You should be fine. The main thing that you would need to be aware of is if you change the layout of your page and move the text boxes inside another asp.net server control. That would break your script because the clientid of each text box element would change to include the new parent elements id.


Another way to do this is to generate the script in your server side code using the text boxes .clientID property and register the script using ClientScriptManager.RegisterStartupScript Method. You would have something similar to this in your page load event:

string scriptText = String.Format(@"var clickreset = function () {
    $({0}).value = "";
    $({1}).value = "";
    $({2}).value = "";
    $({3}).value = "";
    $({4}).value = "";
    $({5}).value = "";
    $({6}).value = "";
}",TextBox4.ClientID,TextBox3.ClientID,TextBox5.ClientID,TextBox6.ClientID,TextBox7.ClientID,TextBox8.ClientID,TextBox9.ClientID);

ClientScript.RegisterStartupScript(this.GetType(), 
        "ResetText", scriptText);

Definitely not the most desirable way to do it, but it would be a little more robust to take advantage of the page's ClientScriptManager class. Here is some documentation from MSDN on how to use it effectively (the sample I provided is just a guidline on using the .ClientID property).

[Nakor]

A nice little trick for getting an element is to use jquery's selectors to lookup an element whose id ends with the id you created

$('input[id$="TextBox1"]').val();

Of course, that's only if you are using jQuery. This way you don't have to worry about finding the entire client ID and it doesn't matter if you end up changing the page around. If you are not currently usinhg jQuery in your projects I would highly suggest looking into it.

This post has been edited by Nakor: 10 October 2011 - 06:07 PM

[FatalTouch]

Nakor, on 10 October 2011 - 03:21 PM, said:

A nice little trick for getting an element is to use jquery's selectors to lookup an element whose id ends with the id you created

$('input[id$="TextBox1"]').val();

Of course, that's only if you are using jQuery. This way you don't have to worry about finding the entire client ID and it doesn't matter if you end up changing the page around. If you are not currently usinhg jQuery in your projects I would highly suggest looking into it.

After im done with javascript i'll surely look into it.
Thanks for the advice though.

[Frinavale]

You could also write the ClientID of the element into the function by calling the Response.Write method in your asp code....

var $ = function (id) {
    return document.getElementById(id);
}
var clickreset = function () {
    $("<% Response.Write(TextBox4.ClientID %>").value = "";
   /*...../*/
}

window.onload = function () {
    $("reset").onclick = clickreset;
}

Or you could use the asp short hand for Response.Write (<%= %>) like so:

var $ = function (id) {
    return document.getElementById(id);
}
var clickreset = function () {
    $("<%=TextBox4.ClientID %>").value = "";
   /*...../*/
}

window.onload = function () {
    $("reset").onclick = clickreset;
}

-Frinny

(I like keakTheGEEK's solution better)

This post has been edited by Frinavale: 17 October 2011 - 09:55 AM

[h4nnib4l]

If you're sufficiently descriptive in your ID's and won't end up with multiple controls with the same ID, you can set ClientIDMode="Static" on your control(s). This will keep ASP from adding on parent id's to the control. Otherwise, you can go the "long" way and run your code, view the source in the browser, and copy the ID from that. I was once a child of the long way, but I have seen the light...