locked
usercontrol run javascript inside page RRS feed

  • Question

  • User-909867351 posted

    HI

    I have one javascript function inside asp page

    <script type="text/javascript">
               function openModal() {
                   $('#promoDia').modal('show');
               }
        </script>

    I have one user control with one buttom and I want to run this script from the usercontrol

    If I run it on my webpage I do the following:

    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop44", "openModal();", true);

    How to run it inside the usercontrol?

    Thank you

    Tuesday, November 27, 2018 3:42 PM

Answers

  • User-271186128 posted

    Hi mariolopes,

    Both your code and PatriceSc's code works well on my side, but I think it is better to change the JavaScript function as below:

                function openModal() {
                    $("[id*='myModal']").modal();
                }

    Because, if you are using asp.net web control in the certain controls, the web control's ID property might be changed.

    Please refer to the following code:

    code in web page:

        <form id="form1" runat="server">
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <div class="container">
    
                <!-- Modal -->
                <div class="modal fade" id="myModal" role="dialog">
                    <div class="modal-dialog">
    
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Modal Header</h4>
                            </div>
                            <div class="modal-body">
                                <p>Some text in the modal.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
    
                    </div>
                </div>
    
            </div>
            <script type="text/javascript">
                function openModal() {
                    $("[id*='myModal']").modal();
                }
            </script>
            <uc1:WebUserControl1 runat="server" ID="WebUserControl1" />
        </form>

    Code in WebUserControl1:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="webapps.Webpages.WebUserControl1" %>
    
    <h2>Activate Modal with JavaScript</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" runat="server" class="btn btn-info btn-lg" onclick="" id="myBtn">Open Modal</button>
    
    <asp:Button ID="btnShow" runat="server" OnClick="btnShow_Click" Text="Show Modal" />

    and:

        public partial class WebUserControl1 : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop44", "openModal();", true);
            }
    
            protected void btnShow_Click(object sender, EventArgs e)
            {
                Page.ClientScript.RegisterStartupScript(this.GetType(), "Pop44", "openModal()", true);
            }
        }

    Beside, you could also use the JQuery method to show the popup modal:

            <script type="text/javascript">
                //Also you could use JQuery click event to show the popup modal.
                $(document).ready(function () {
                    $("[id*='myBtn']").click(function () {
                        $("#myModal").modal();
                    });
                });
            </script>

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 28, 2018 2:50 AM

All replies

  • User753101303 posted

    Hi,

    If I remember you have a Page control property to get to the page from the user control. So it would be :

    Page.ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop44", "openModal();", true);
    Tuesday, November 27, 2018 4:47 PM
  • User-271186128 posted

    Hi mariolopes,

    Both your code and PatriceSc's code works well on my side, but I think it is better to change the JavaScript function as below:

                function openModal() {
                    $("[id*='myModal']").modal();
                }

    Because, if you are using asp.net web control in the certain controls, the web control's ID property might be changed.

    Please refer to the following code:

    code in web page:

        <form id="form1" runat="server">
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <div class="container">
    
                <!-- Modal -->
                <div class="modal fade" id="myModal" role="dialog">
                    <div class="modal-dialog">
    
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Modal Header</h4>
                            </div>
                            <div class="modal-body">
                                <p>Some text in the modal.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
    
                    </div>
                </div>
    
            </div>
            <script type="text/javascript">
                function openModal() {
                    $("[id*='myModal']").modal();
                }
            </script>
            <uc1:WebUserControl1 runat="server" ID="WebUserControl1" />
        </form>

    Code in WebUserControl1:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="webapps.Webpages.WebUserControl1" %>
    
    <h2>Activate Modal with JavaScript</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" runat="server" class="btn btn-info btn-lg" onclick="" id="myBtn">Open Modal</button>
    
    <asp:Button ID="btnShow" runat="server" OnClick="btnShow_Click" Text="Show Modal" />

    and:

        public partial class WebUserControl1 : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop44", "openModal();", true);
            }
    
            protected void btnShow_Click(object sender, EventArgs e)
            {
                Page.ClientScript.RegisterStartupScript(this.GetType(), "Pop44", "openModal()", true);
            }
        }

    Beside, you could also use the JQuery method to show the popup modal:

            <script type="text/javascript">
                //Also you could use JQuery click event to show the popup modal.
                $(document).ready(function () {
                    $("[id*='myBtn']").click(function () {
                        $("#myModal").modal();
                    });
                });
            </script>

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 28, 2018 2:50 AM
  • User-909867351 posted

    PatriceSc

    Got error with Page.ScriptManager

    Wednesday, November 28, 2018 11:50 AM