Создание EditorTemplate MVC3 - PullRequest
       4

Создание EditorTemplate MVC3

2 голосов
/ 29 февраля 2012

Я хотел бы создать шаблон редактора для плагина jquery star rating. Это мой первый проект mvc3 и новый для jquery, и я не уверен, как его настроить. Что я хочу сделать, так это позволить пользователю оценивать учителя по звездам. Так, например, если я нажму 3 звезды, как я могу передать 3 со всей остальной информацией, которая передается, чтобы я мог сохранить это число в БД. После того, как будет сделано частичное представление, как я буду ссылаться на него в реальном представлении, где оно мне нужно? Спасибо за любой совет.

           @using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Teachers Ratings Wall</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.StarRating)
    </div>
    <div class="editor-label">
        @*@Html.EditorFor(model => model.StarRating)*@
        @Html.ValidationMessageFor(model => model.StarRating)

        <input name="star1" type="radio" class="star" />
        <input name="star1" type="radio" class="star" />
        <input name="star1" type="radio" class="star" />
        <input name="star1" type="radio" class="star" />
        <input name="star1" type="radio" class="star" />

    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.PostComment)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PostComment)
        @Html.ValidationMessageFor(model => model.PostComment)
    </div>
     <p>
        <input type="submit" value="Create" />
    </p>
   </fieldset>

Итак, в частичном представлении, я бы просто имел:

     @model SpeakOut.Model.TeachersRatingsWall
    <script src="../../Scripts/jquery.rating.js" type="text/javascript"></script>
     <script src="../../Scripts/jquery.rating.pack.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.MetaData.js" type="text/javascript"></script>
      <link href="../../Content/jquery.rating.css" rel="Stylesheet" type="text/css" />

    <input name="star1" type="radio" class="star" />
    <input name="star1" type="radio" class="star" />
    <input name="star1" type="radio" class="star" />
    <input name="star1" type="radio" class="star" />
    <input name="star1" type="radio" class="star" />

1 Ответ

3 голосов
/ 29 февраля 2012

Вы можете создать шаблон редактора для свойства StarRating, который должен находиться в одном из двух мест:

  • ~ / Views / Shared / EditorTemplates /
  • ~ / Просмотров // EditorTemplates /

Оттуда вы можете использовать UIHintAttribute и украсить свойство вашей модели (если это уникальный тип), вы можете назвать шаблон на основе типа, или вы можете назвать его как-нибудь полностью Пользовательский и ссылки на шаблон, когда вы идете, чтобы отобразить редактор.

Ради демонстрации я назову это «StarRating», что означает, что я могу либо применить [UIHint("StarRating")] к свойству, либо использовать @Html.EditorFor(x => x.StarRating, "StarRating"), чтобы он применил этот шаблон.

Далее идет создание фактического шаблона. Учитывая, что, похоже, вы уже включили необходимые сценарии, нужно просто настроить вывод. Итак, у нас есть шаблон:

~ / Views / Shared / EditorTemplates / StarRating.cshtml

@model Int32

@* I don't know how high a rating you want, but I'll assume a 1-5 rating *@
@for (Int32 rating = 1; rating <= 5; r++)
{
  @Html.RadioButtonFor(x => x, rating, new { @class = "star" })
}

Обновление

Теперь, когда я знаю, что это int, я бы, вероятно, украсил вашу модель с помощью UIHint, затем просто позвонил бы EditorFor в обычном режиме, а MVC позаботится обо всем остальном. e.g.:

YourViewModel.cs

[UIHint("StarRating")]
[Range(1, 5, ErrorMessage = "Invalid rating")]
public Int32 StarRating { get; set; }

~ / Views / MyController / MyForm.cshtml

@Html.EditorFor(model => model.StarRating)

~ / Views / Shared / EditorTemplates / StarRating.cshtml

@model Int32
@for (Int32 rating = 1; rating <= 5; r++)
{
  @Html.RadioButtonFor(model => model, rating, new { @class = "star" })
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...