Динамическое построение детали в виде Razor - получение проблемы с конечным тегом

Question

Я динамически создаю часть представления Razor на основе количества записей в списке моделей.

Во время разработки я получаю маленькую красную точку перед этим конечным элементом в этом случае, если:

     @if (lastOne == 'n')
     {
        </div> @* Finishes the row. *@
      }

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

Как мне решить эту проблему? Как мне построить это динамически, если я получу это?

Во время выполнения, как и ожидалось, я получаю: Обнаруженный конечный тег "div" с нет соответствующего начального тега. Ваши начальные / конечные теги правильно сбалансированы?

Вот файл .cs html (представление):

    <h2>Test</h2>

    @model GbngWebClient.Models.UserProfileForMaintVM

   @using (Html.BeginForm("UpdateUserProfile", "UserProfiler", FormMethod.Post))
   {
      <div style="margin-top:10px;"></div>

      <div class="panel panel-default">
         <div class="panel-heading aboutyou">It's All About You!</div>
         <br />
         <h5 class="single">General</h5>

         <div class="panel-body">
            <div class="row">
                <div class="col-md-2">
                    @Html.LabelFor(model => model.UserProfileSingleVM.WhoIAmDescr)
                    @Html.TextAreaFor(model => model.UserProfileSingleVM.WhoIAmDescr, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.UserProfileSingleVM.WhoIAmDescr, "", new { @class = "text-danger" })
                </div>
                <div class="col-md-2">
                    @Html.LabelFor(model => model.UserProfileSingleVM.ThinkingDescr)
                    @Html.TextAreaFor(model => model.UserProfileSingleVM.ThinkingDescr, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.UserProfileSingleVM.ThinkingDescr, "", new { @class = "text-danger" })
                </div>
            </div>
            <br />
        </div>

        <div class="panel-body">
            @{
               var lastOne = 'n';
               var colCount = 1;
            }

            @for (var i = 0; i < Model.UserProfileMultiList25.Count; i++)
            {
                if (colCount == 1)
                {
                    <div class="row">
                }

                <div class="col-md-3">
                   @Html.LabelFor(Model => Model.UserProfileMultiList25[i].Description))
                   @Html.CheckBoxFor(Model => Model.UserProfileMultiList25[i].SelectedSwitch, new { @class = "form-control" })
                </div>

                if (colCount == 3)
                {
                    </div> @* Finishes the row. *@
                    colCount = 1;
                    lastOne = 'y';
                }
                else
                {
                  colCount += 1;
                }
            }

            @if (lastOne == 'n')
            {
                </div> @* Finishes the row. *@
            }

       </div> @* Finishes the panel. *@

       <div class="panel-body">
           <div class="row">
               <div class="form-group">
                   <div class="col-md-offset-0 col-md-12">
                       @* Submit button. *@
                       <input type="submit" value="Save" class="btn btn-info" />
                   </div>
               </div>
           </div>
         </div>
     </div>
   }

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/bootstrap")
   @Styles.Render("~/Content/css")

---

Он работает, но не окружает его:

 <div class="row">....</div>.

Получает выполненную работу:

        @for (var i = 0; i < Model.UserProfileMultiList25.Count; i++)
        {
            <div class="col-md-3">
                <div>
                    @Html.CheckBoxFor(Model => Model.UserProfileMultiList25[i].SelectedSwitch, new { @class = "form-control" })
                    <label>
                        @Html.DisplayFor(Model => Model.UserProfileMultiList25[i].Description)
                        @Html.HiddenFor(Model => Model.UserProfileMultiList25[i].SelectionId)
                        @Html.HiddenFor(Model => Model.UserProfileMultiList25[i].ProfileCategoryId)
                    </label>
                </div>
            </div>
        }

Answer 1

Вы объявляете colCount внутри вашего l oop, и каждый раз оно инициализируется до 1. Я предполагаю, что вы хотите сделать, это объявить и инициализировать его за пределами l oop, так что это фактический счетчик:

@{
    var lastOne = 'n';
    var colCount = 1;
}

@for (var i = 0; i < Model.UserProfileMultiList25.Count; i++)
{
    if (colCount == 1)
    {
        <div class="row">
    }

    <div class="col-md-3">
        @Html.LabelFor(Model => Model.UserProfileMultiList25[i].Description))
        @Html.CheckBoxFor(Model => Model.UserProfileMultiList25[i].SelectedSwitch, new {      @class = "form-control" })
    </div>

    if (colCount == 3)
    {
        </div> @* Finishes the row. *@
        colCount = 1;
        lastOne = 'y';
    }
    else
    {
        colCount++;
    }
}

@if (lastOne == 'n')
{
    </div> @* Finishes the row. *@
}