如何使添加的按钮转到页面上的不同部分？

Question

I have this simple page that is meant to create a button and a new section, when both are created the button should take you to that new section in the page, but the page refreshes and never takes you there, here's what i have:

.aspx

    <br />

    <div runat="server" id="panel1" class="panel panel-success">

        <div class="panel-heading">
            <h2>Add a panel</h2>
        </div>

        <div class="panel-body">
            <div class="row">
                <div class="col-md-5">
                    <label>Name: </label>
                    <input runat="server" id="name" class="form-control" type="text" />
                    <br />
                    <label>Some text: </label>
                    <textarea runat="server" id="textarea" class="form-control" rows="5"></textarea>
                    <br />
                    <asp:Button runat="server" class="btn btn-success" id="Add" Text="Add Section + Button"/>
                </div>

                <div class="col-md-5">
                    <h3>Buttons will be here:</h3>
                    <div runat="server" id="BtnDiv">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <br />
    <h3>Panels Will be here: </h3>
    <hr />
    <div runat="server" id="div1" class="panel">

    </div>

c#

 public partial class TESTgo : System.Web.UI.Page
    {
        static int count = 1;
        protected void Page_Load(object sender, EventArgs e)
        {
            Add.Click += Add_Click;
        }

        private void Add_Click(object sender, EventArgs e)
        {
            string NameBtn = name.Value;
            string text = textarea.Value;

            BtnDiv.InnerHtml += "<button class='btn btn-default' href='#Section" + count + "'>Go to Section " + count + "</button>";
            div1.InnerHtml += "<div id='Section" + count + "' class='panel panel-warning'>";
            div1.InnerHtml += "<div class='panel-heading'> " + NameBtn + "</div>";
            div1.InnerHtml += "<div class='panel-body'><h3>" + NameBtn + "</h3>";
            div1.InnerHtml += "<p>" + text + "</p>";
            div1.InnerHtml += "</div></div>";

            count += 1;
        }
    }

Any Help, suggestions and edits are welcome, Thanks in advance.

Answer 1

You can either:

Use attribute

<button type="button"></button> 

to prevent the default behavior of submission. You can use javascript too and add an onclick event listener with event.preventDefault() at the beggining of the function.

OR

Thinking of the classnames you might be using bootstrap, so instead of using button you might wanna use anchor tags for referencing ID elements on your page without submission like this:

BtnDiv.InnerHtml += "<a class='btn btn-default' href='#Section" + count + "'>Go to Section " + count + "</a>";

Answer 2

HTML buttons do not have href attributes. Change it to an anchor tag, or use the onclick event handler of the button.

BtnDiv.InnerHtml += "<button class='btn btn-default' href='#Section" + count + "'>Go to Section " + count + clicking "</button>";

becomes... . BtnDiv.InnerHtml += "<a class='btn btn-default' href='#Section" + count + "'>Go to Section " + count + "</a>";

or...

BtnDiv.InnerHtml += "<button class='btn btn-default' onclick='goto(\\"Section" + count + "\\");'>Go to Section " + count + "</button>";

(you would still have to implement goto(segment) in this example, likely setting location.href = *${url}${segment}* <- replace *s with backticks here, markdown restriction)

---

Side note, and this is only a preference, but I would recommend a different quote scheme...

BtnDiv.InnerHtml += $"<button class=\\"btn btn-default\\" onclick=\\"('Section{count}');\\">Go to Section {count}</button>";

It is more common to wrap HTML attributes in double quotes, and JS strings in single quotes..