Кнопка изменения цвета при нажатии на страницу Razor

ProgramBox

Кнопка изменения цвета при нажатии на страницу Razor

Post author:admin
Запись опубликована:6 августа, 2022
Post category:Вопросы по программированию

#javascript #html #css #asp.net-core #blazor

#javascript #HTML #css #asp.net-ядро #blazor

Вопрос:

Это кнопка, которая должна менять цвет при нажатии. Это со страницы Razor. Я пробовал код javascript, но при вводе он выдает ошибку, и я тоже пробовал код css (focus amp; active), не сработал. Я новичок в этом коде. Пожалуйста, помогите. Я просто хочу что-то вроде этого

 <div class="row">
  <div class="column" style="width:30%">
    <div class="btn-group">
      <button type="button" class="btn btn-primary" style="outline-color:red" @onclick="() => UpdateTheChart(11)">@Language.T35</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(12)">@Language.T36</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(13)">@Language.T37</button>
    </div>
  </div>
  <div class="column" style="width:70%">
    <div class="btn-group">
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(21)">@Language.T138</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(22)">@Language.T38</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(23)">@Language.T39</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(24)">@Language.T40</button>
    </div>
  </div>
</div>
</div>

Развернуть фрагмент

Это полный код здесь. Я новичок в этом коде. Пожалуйста, скажите мне, как поместить код js без ошибок (ошибка без компонента)

  @page "/results"
@inject Blazored.LocalStorage.ISyncLocalStorageService localStore
@inject IJSRuntime JSRuntime;
@inject Toolbelt.Blazor.I18nText.I18nText I18nText

<h1>@Language.T8</h1>

<div>
    <div class="row">
        <div class="column" id="chartColumn" style="width:80%;text-align:center">
            <canvas id="myChart"></canvas>
        </div>
        <div class="column" style="width:20%;text-align:center;font-size:1.5vw">
            <br />
            <br />
            <br />
            <br />
            <span>
                @ResultInText <br />
            </span>
            <h1 style="font-weight:bolder">@FilterSavings</h1>
            <br />
            <br />
            <span>
                @WasteTextPaper<br />
                @WasteTextPlastic
            </span>
            @if (SelectedChartCategory == 13)
            {
                <br />
                <br />
                <br />
                <br />
                <br />
            }
            <span style="font-size:0.4vw">@DisclaimerText</span>
        </div>
    </div>
    <hr />

    <div class="row">
        <div class="column" style="width:30%">
            <b>@Language.T33</b>
        </div>
        <div class="column" style="width:70%">
            <b>@Language.T34</b>
        </div>
    </div>

    <div class="row">
        <div class="column" style="width:30%">
            <div class="btn-group">
                <button type="button" class="btn btn-primary" style="outline-color:red" @onclick="() => UpdateTheChart(11)">@Language.T35</button>
                <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(12)">@Language.T36</button>
                <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(13)">@Language.T37</button>
            </div>
        </div>
        <div class="column" style="width:70%">
            <div class="btn-group">
                <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(21)">@Language.T138</button>
                <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(22)">@Language.T38</button>
                <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(23)">@Language.T39</button>
                <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(24)">@Language.T40</button>
            </div>
        </div>
    </div>
</div>


@code {//handles initialization
    I18nText.Language Language = new I18nText.Language();
    List<float> retResultMHC = null;
    List<float> retResultCom = null;
    string retResultMHCProduct = "";
    string retResultCOMProduct = "";
    double retResultCostSavings = 0;
    double retResultTimeSavings = 0;
    double retResultWasteReduction = 0;
    double retResultWastePaper = 0;
    double retResultWastePlastic = 0;
    string retResultWasteFlag = "";
    string retResultCostFlag = "";
    string retResultTimeFlag = "";
    string FilterSavings = "";
    string WasteTextPaper = "";
    string WasteTextPlastic = "";
    string retCurrency = "";
    string DisclaimerText = "";
    string ResultInText = "Cost savings for all patients during a year";
    int SelectedChartCategory = 11;
    int SelectedChartPeriod = 24;
    int CalChartPeriod = 1;
    string SelectedResultFlag = "savings";
    string PeriodUOM = "year";

    protected override void OnInitialized()
    {
        InitializeLocalStorage();
        if (retResultMHC != null amp;amp; retResultCom != null)
        {
            UpdateTheChart(11);
        }
    }

    protected override async Task OnInitializedAsync()
    {
        Language = await I18nText.GetTextTableAsync<I18nText.Language>(this);
        ResultInText = Language.T118   Language.T127;
    }

    private void InitializeLocalStorage()
    {
        retResultMHCProduct = localStore.GetItemAsString("Result-MHC-Product");
        retResultCOMProduct = localStore.GetItemAsString("Result-COM-Product");
        retResultMHC = localStore.GetItem<List<float>>("Result-MHC");
        retResultCom = localStore.GetItem<List<float>>("Result-COM");
        retResultCostSavings = localStore.GetItem<double>("Result-Cost-Savings");
        retResultTimeSavings = localStore.GetItem<double>("Result-Time-Savings");
        retResultWasteReduction = localStore.GetItem<double>("Result-Waste-Reduction");
        retResultCostFlag = localStore.GetItemAsString("Result-Cost-Flag");
        retResultTimeFlag = localStore.GetItemAsString("Result-Time-Flag");
        retResultWasteFlag = localStore.GetItemAsString("Result-Waste-Flag");
        retResultWastePaper = localStore.GetItem<double>("Result-Waste-Paper");
        retResultWastePlastic = localStore.GetItem<double>("Result-Waste-Plastic");
        retCurrency = localStore.GetItemAsString("CurrencyKey");
    }
}

@code{//handles chart
    private IJSObjectReference _jsModule;

    //this will be the live code
    private async Task UpdateTheChart(int clickedButton)
    {
        //assign the selected parameters
        if (clickedButton == 11 || clickedButton == 12 || clickedButton == 13)
            SelectedChartCategory = clickedButton;
        else
            SelectedChartPeriod = clickedButton;

        if (SelectedChartPeriod == 21)
        {
            PeriodUOM = Language.T124;
            CalChartPeriod = 365;
        }
        else if (SelectedChartPeriod == 22)
        {
            PeriodUOM = Language.T125;
            CalChartPeriod = 52;
        }
        else if (SelectedChartPeriod == 23)
        {
            PeriodUOM = Language.T126;
            CalChartPeriod = 12;
        }
        else if (SelectedChartPeriod == 24)
        {
            PeriodUOM = Language.T127;
            CalChartPeriod = 1;
        }
        else
        {
            PeriodUOM = Language.T127;
            CalChartPeriod = 1;
        }

        ResultInText = "";
        //things to do before showing the selected chart
        if (SelectedChartCategory == 11)
        {
            if (retResultCostFlag == "savings")
                ResultInText = Language.T118   PeriodUOM;
            else
                ResultInText = Language.T119   PeriodUOM;
                        
            WasteTextPaper = "";
            WasteTextPlastic = "";

            FilterSavings = string.Format(retCurrency   "{0:n0}", retResultCostSavings / CalChartPeriod);
            DisclaimerText = "";
        }
        else if (SelectedChartCategory == 12)
        {
            if (retResultCostFlag == "savings")
                ResultInText = Language.T120   PeriodUOM;
            else
                ResultInText = Language.T121   PeriodUOM;

            WasteTextPaper = "";
            WasteTextPlastic = "";

            FilterSavings = string.Format("{0:n0}", retResultTimeSavings / CalChartPeriod)   " "   Language.T134;
            DisclaimerText = "";
        }
        else if (SelectedChartCategory == 13)
        {
            if (retResultCostFlag == "reduction")
                ResultInText = Language.T122   PeriodUOM;
            else
                ResultInText = Language.T123   PeriodUOM;

            WasteTextPaper = Language.T128   string.Format("{0:n2}", retResultWastePaper / CalChartPeriod)   " "   Language.T135;
            WasteTextPlastic = Language.T129   string.Format("{0:n2}", retResultWastePlastic / CalChartPeriod)   " "   Language.T135;

            FilterSavings = string.Format("{0:n2}", retResultWasteReduction / CalChartPeriod)   " "   Language.T135;
            DisclaimerText = Language.T136;
        }

        //calling js to make the chart
        _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/MakeChart.js");
        if (SelectedChartCategory == 11)
        {
            await _jsModule.InvokeVoidAsync("showChartCost", CalChartPeriod, Language.T131, Language.T132, Language.T133);
        }
        else if (SelectedChartCategory == 12)
        {
            await _jsModule.InvokeVoidAsync("showChartTime", CalChartPeriod, Language.T130);
        }
        else
        {
            await _jsModule.InvokeVoidAsync("ShowChartPic");
        }
    }
}

Ответ №1:

Вы уверены, что хотите использовать Javascript? Вы можете использовать переменные для обновления свойств в Blazor:

 <button style="background-color:@bgcolor" @onclick=SetColor>Click</button>

@code
{
   string bgcolor {get; set;} = "00f"; // (starting value)

   void SetColor(){
       bgcolor = "#fd7"; (will update instantly)
       StateHasChanged();  // may not be required, but I'm at work right now, so can't check
   }
}

Лучше было бы использовать переменную для установки КЛАССА объекта:

 <button class="@buttonclass" @onclick=SetColor>Click</button>
    
    @code
    {
       string buttonclass{get; set;} = "btn btn.primary"; // (starting value)
    
       void SetColor(){
           buttonclass= "btn btn.secondary";
           StateHasChanged();  // may not be required, but I'm at work right now, so can't check
       }
    }

Кроме того, похоже, что у вас много повторяющихся записей. В Blazor рассмотрите возможность создания списка со всеми вашими различными языками и сделайте это в своей разметке:

 <div>
    @foreach (item in LanguageItems){
        <button class="btn btn-primary" >@item.Language</button>
    }
</div>
@code
{
     List<MyLanguageClass> LanguageItems {get; set;}
     protected override async Task OnInitializedAsync(){
          // Loadup your list of items from a database or whatever
     }
}

1. Я попробовал первый и второй код. Это не сработало. У него нет ошибки. первый код: изменение цвета при нажатии кнопки, но он не возвращается к нормальному цвету при нажатии другой кнопки. 2-й код код bootsrap не работает. Спасибо за вашу помощь,

2. Извините, это должны были быть концептуальные примеры, а не полнофункциональный готовый код — просто чтобы вы могли увидеть, как все подключено в Blazor без использования Javascript. Я неправильно написал «btn-primary» как «btn.primary», поэтому, надеюсь, если вы правильно назовете классы, второй пример будет работать. Однако цвета все равно не будут сброшены — для этого нужно добавить логику.

Ответ №2:

Я использую css (.btn: focus), и он может работать.Вот демонстрация:

 <div>
    <div class="row">
        <div class="column" style="width:30%">
            <div class="btn-group">
                <button type="button" class="btn btn-primary">Language.T35</button>
                <button type="button" class="btn btn-primary">Language.T36</button>
                <button type="button" class="btn btn-primary">Language.T37</button>
            </div>
        </div>
        <div class="column" style="width:70%">
            <div class="btn-group">
                <button type="button" class="btn btn-primary">Language.T138</button>
                <button type="button" class="btn btn-primary">Language.T38</button>
                <button type="button" class="btn btn-primary">Language.T39</button>
                <button type="button" class="btn btn-primary">Language.T40</button>
            </div>
        </div>
    </div>
</div>
<style>
    .btn:focus {
        background-color: #ff6e40;
    }
</style>

Результат:

Ответ №3:

ОК. Итак, что вы можете сделать в javascript, это написать «document.getElementById(«идентификатор кнопки»).backgroundColor =»любой цвет, который вам нужно установить в кнопке»»

Ответ №4:

 <button onclick="updateColor(this)">click me</button>

внутри javascript

 function updateColor(btn){
    btn.style.backgroundColor = 'red';
    btn.style.color = 'white';
}

Я объясню, что здесь происходит.

Внутри кнопки onclick атрибут принимает функцию (или инструкцию javascript), и вы можете передать нажатую кнопку внутри аргументов как this .

затем вы можете изменить выбранный элемент в функции javascript.

Редактировать:

для использования JavaScript вы используете тег script следующим образом…

 <script>
    // your JavaScript code
</script>

просто поместите указанный выше тег скрипта в конец тела.

Нехорошо писать весь код JavaScript внутри тега html script.

Таким образом, вместо этого вы можете просто добавить src в скрипт тег и ссылку на отдельный файл javascript, например…

 <script src="./yourpath/filename.js"></script>

1. Я не знаю, как добавить javascipt без ошибок и об onclick, у меня уже есть onclick для моей кнопки для функции. Так как же это? Я обновлю и предоставлю полный код страницы.

2. @nur253 я отредактировал свой ответ…. Я надеюсь, что это решило вашу проблему

3. @nur253 и я не знаю c #, поэтому я сделал все возможное, чтобы помочь вам

Метки: Кнопка изменения цвета при нажатии на страницу Razor