Строка цвета ASP MVC в Html.Raw

#asp.net-mvc #razor

Вопрос:

Я хочу сравнить две строки. Существуют ли различия в каждом из них index , я хочу покрасить это конкретное char в красный (если не совпадает) или зеленый (если оно совпадает).

             <li>
                @for (int i = 0; i < item.AnswersList.Count; i  )
                {
                    var answerArray = item.AnswersList[i].Output.ToArray();
                    var outputArray = item.OutputList[i].Output.ToArray();

                    for (int j = 0; j < answerArray.Length; i  )
                    {
                        if (answerArray[j] == outputArray[j])
                        {
                            @Html.Raw( How to print colorful char here?);
                        }
                    }
                }
            </li>

Этот цвет string должен быть в одной строке в <li> теге.

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

Я внес это изменение в свой код:

 <div style="color: green;">
     @Html.Raw(outputArray[j])
</div>

Но я получаю такой вывод:

Как сделать это одним словом в <li> теге?

Ответ №1:

Попробуйте следующее:

 <li style="display: flex;>
   @for (int i = 0; i < item.AnswersList.Count; i  )
   {
      var answerArray = item.AnswersList[i].Output.ToArray();
      var outputArray = item.OutputList[i].Output.ToArray();

      for (int j = 0; j < answerArray.Length; i  )
      {
         if (answerArray[j] == outputArray[j])
         {
            <span style="color: green;">
              ...
            </span>
         }
      }
   }
</li>

1. Но он будет печатать каждый символ в другом <li> теге. я хочу иметь строку в одном <li> теге с каждым символом, окрашенным

2. Конечно, это работает хорошо, но span дает мне пробелы для каждого символа. Могут ли мои массивы содержать пробелы, строки и т.д., Поэтому это неприемлемо, потому что каждый интервал дает мне пробелы между

3. если span дает вам дополнительные поля или отступы, адаптируйте свои правила css. Контейнеры Div — это типы блоков, а промежутки отображаются в строке. Стиль зависит от вас. Запустите консоль разработки, найдите правило, которое добавляет поведение, и адаптируйте или переопределите ut.

4. Я могу упаковать это for в div, но как css будет выглядеть отсутствие пробелов между разделами?

5. Я отредактировал свой ответ с помощью <li style="display: flex;">

Ответ №2:

Я надеюсь, что вам это нужно:

        <li>
            @for (int i = 0; i < item.AnswersList.Count; i  )
            {
                var answerArray = item.AnswersList[i].Output.ToArray();
                var outputArray = item.OutputList[i].Output.ToArray();

                for (int j = 0; j < answerArray.Length; i  )
                {
                    bool isMatch = answerArray[j] == outputArray[j];
                    <div style="color: @(isMatch ? "green" : "red");">
                        @Html.Raw(outputArray[j])
                    </div>
                }
            }
        </li>

UPD: Если вам нужны все символы в одной строке, используйте span вместо div .

UPD2: Попробуйте это (интервал, но без новой строки):

 <span style="color: @(isMatch ? "green" : "red");margin:0;padding:0">@Html.Raw(outputArray[j])</span>

1. span дает мне дополнительные пробелы между каждым span . В моем char array у меня есть слова, пробелы и т.д. Span освобождает пространство для каждого символа. Как с этим бороться?

2. Один из способов справиться с этим — добавить стиль CSS для ваших divs: ul>li>div: display: inline-block;

Ответ №3:

Это должно работать идеально. Это просто вопрос того, чтобы убедиться, что вы не оставляете пробелов вокруг своих <span> тегов, например:

 <li>
    @for (int i = 0; i < item.AnswersList.Count; i  )
    {
        var answerArray = item.AnswersList[i].Output.ToArray();
        var outputArray = item.OutputList[i].Output.ToArray();

        for (int j = 0; j < answerArray.Length; i  )
        {
            if (answerArray[j] == outputArray[j])
            {<span style="color:green">@Html.Raw(outputArray[j])</span>}
            else
            {<span style="color:red">@Html.Raw(outputArray[j])</span>}
        }
    }
</li>