Как изменить цвет кнопок ссылок и связать их с якорями в C#

Question

Я хочу динамически создавать кнопки ссылок и связывать их с якорями в повторителе. Вот что я попробовал:

            int listItemIds = 1;
            List<CompanyModel1> companies1 = new List<CompanyModel1>();
            for (int ar = 0; ar < arrProcess.Length; ar++)
            {
                LinkButton lnk = new LinkButton();
                lnk.ID = "lnk" + listItemIds;
                lnk.Text = arrProcess[ar];
                lnk.Attributes.Add("onClick", "return false;"); //This is to prevent the page to reload
                lnk.Click += new System.EventHandler(this.colorClick); 
                lnk.CommandArgument = Convert.ToString(ar); //LinkButton CommandArgument
                lnk.CommandName = Convert.ToString(ar); //LinkButton CommanName
                lnk.Command += new CommandEventHandler(lb_Command);//
                listItemIds++;
                PlaceHolder1.Controls.Add(lnk); // Adding the LinkButton in PlaceHolder

а также

 protected void colorClick(object o, EventArgs e)
    {
        LinkButton lnk = (LinkButton)o;
        lnk.Style["font-weight"] = "bold";

        //Process clicked link. for example jump to anchors
    }

В моем файле aspx я создал заполнитель, чтобы заполнить кнопку ссылки на:

 <div>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>

Я хочу предотвратить перезагрузку страницы, чтобы результат, который я связал с ретранслятором, все еще был там. Но я не вижу кнопки ссылки для изменения. Я хочу изменить цвет и стиль шрифта, чтобы мы знали, что на него нажимают. Более того, я хочу, чтобы при щелчке он прыгал к якорям. Но я не знаю, как создать эти якоря. У вас есть идеи по этому поводу? Спасибо!

Answer 1

Если вы удалите строку ниже из вашего кода, это должно работать.

lnk.Attributes.Add("onClick", "return false;");

Если ваша страница загружается, проверьте IsPostBack, который также необходимо удалить.

Рабочий код:

protected void Page_Load(object sender, EventArgs e)
    {

        string[] arrProcess = new[] { "link 1", "link 2", "link 3" };
        int listItemIds = 1;
        // List<CompanyModel1> companies1 = new List<CompanyModel1>();
        for (int ar = 0; ar < arrProcess.Length; ar++)
        {
            LinkButton lnk = new LinkButton();
            lnk.ID = "lnk" + listItemIds;

            lnk.Text = arrProcess[ar];
            //lnk.Attributes.Add("onClick", "var btn = document.getElementById('"+lnk.ID+"');btn.innerHTML = 'Default Text';btn.innerHTML.style.fontWeight = 'bold';return false;"); //This is to prevent the page to reload
            lnk.Click += new System.EventHandler(this.colorClick);
            lnk.CommandArgument = Convert.ToString(ar); //LinkButton CommandArgument
            lnk.CommandName = Convert.ToString(ar); //LinkButton CommanName
            //lnk.Command += new CommandEventHandler(lnk_Command);
            listItemIds++;
            PlaceHolder1.Controls.Add(lnk); // Adding the LinkButton in PlaceHolder
            PlaceHolder1.Controls.Add(new LiteralControl("<br />"));
        }

    }



    protected void colorClick(object o, EventArgs e)
    {
        LinkButton lnk = (LinkButton)o;
        lnk.Style["font-weight"] = "bold";

        //Process clicked link. for example jump to anchors
    }

Обновить:

Вы можете остановить пост на всю страницу обратно, используя панель обновления, как показано ниже. Это все равно вызовет загрузку страницы, но ее частичный обратный вызов.

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div>
            <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
        </div>

    </ContentTemplate>

</asp:UpdatePanel>

Также на главную страницу нужно добавить менеджер скриптов.

Answer 2

ХОРОШО. Я получил то, что вы хотите сейчас. выполните следующие шаги.

Мы должны изменить ваш бэкэнд. Я использую гиперссылку, а не кнопку ссылки.

protected void Page_Load(object sender, EventArgs e)
    {

        string[] arrProcess = new[] { "link 1", "link 2", "link 3" };
        int listItemIds = 1;
        // List<CompanyModel1> companies1 = new List<CompanyModel1>();
        for (int ar = 0; ar < arrProcess.Length; ar++)
        {
            HyperLink lnk = new HyperLink();
            lnk.ID = "lnk" + listItemIds;
            lnk.ClientIDMode = ClientIDMode.Static;
            lnk.NavigateUrl = "#";
            lnk.Text = arrProcess[ar];
            lnk.Attributes.Add("onClick", "changeControlStyle('" + lnk.ClientID + "');"); //This is to prevent the page to reload
            listItemIds++;
            PlaceHolder1.Controls.Add(lnk); // Adding the LinkButton in PlaceHolder
            //PlaceHolder1.Controls.Add(new LiteralControl("<br />"));
        }


    }

Затем я добавил метод javascript на страницу. это будет использовать в коде позади.

<script type="text/javascript">
    function changeControlStyle(id) {
        document.getElementById(id).style.fontWeight = "bold";
    }
</script>
<div>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>

Answer 3

Вы должны использовать событие OnClientClick. И сервер, чтобы получить его.

lnk.Attributes.Add("OnClientClick","window.open('Command.aspx','width=400,Height=400,top=200,left=200'); return false;");

Этот пример открывает ссылку. Вы можете изменить его цвет.

Обновление 1: для вызова без перезагрузки страницы используйте это.

JQuery код:

$.ajax({
  type: "POST",
  url: "_Default.aspx/GetDate",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg) {
    // Do something interesting here.
  }
});

код asp.net:

public partial class _Default : Page 
{
  [WebMethod]
  public static string GetDate()
  {
    return DateTime.Now.ToString();
  }
}