Creating a EditorTemplate MVC3

Question

I would like to create a editortemplate for a jquery star rating plugin. This is my first mvc3 project and new to jquery and I'm not sure how to set one up. What I want to do is allow the user to rate a teacher by stars. So for example if I click 3 stars how can I pass 3 in with all the rest of the info that is being passed in so that I can save that number in the db. After the partial view is made, how would I then reference it in the actual view where I need it? Thanks for any advice.

           @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>

So in the partial view, would I just have:

     @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" />

is `Model.StarRating` an `Int32`? – Brad Christie Feb 29 '12 at 04:14 — Brad Christie, Feb 29 '12 at 04:14

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

You can create an editortemplate for the StarRating property, which should reside in one of two places:

~/Views/Shared/EditorTemplates/
~/Views//EditorTemplates/

From there, you can use UIHintAttribute and decorate the property of your model, (if it's a unique type) you can name the template based on the type, or you can call it something completely custom and reference the template when you go to display the editor.

For the sake of demo, I'm going to call it "StarRating" which means I can either apply [UIHint("StarRating")] to the property or use @Html.EditorFor(x => x.StarRating, "StarRating") to have it apply this template.

Next is creating the actual template. Given that it looks like you're already including the script(s) necessary, it's just a matter of customizing the output. So, here we have the template:

~/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" })
}

Update

Now that I know it's an int, I would probably decorate your model with UIHint then just call on EditorFor normally, and MVC will take care of the rest. 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" })
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 29 '12 at 04:26

Brad Christie

100,477
16
156
200

thx I wouldn't need to import or reference the editortemplate. – TMan Feb 29 '12 at 04:38
whats the library pakage for UIHint and Range? – TMan Feb 29 '12 at 04:46
TMan: Built-in, [System.ComponentModel.dll, System.ComponentModel.DataAnnotations](http://msdn.microsoft.com/en-us/library/cc490428.aspx) which includes both [UIHintAttribute](http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.uihintattribute.uihint.aspx) and [RangeAttribute](http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.rangeattribute.aspx) – Brad Christie Feb 29 '12 at 04:52
Yea I think this is close but it's not quite working. My model is in a different project. Project just for my models, would I need to call StarRating in UIHint differently? – TMan Feb 29 '12 at 05:09
@TMan: If you don't have access to the model, do as my second suggestion: `@Html.EditorFor(model => model.StarRating, "StarRating")` (basically instructing MVC to use the specified template) – Brad Christie Feb 29 '12 at 05:11
actually its saying the model item passed in is null but this dictionary is expecting a non-null int32 – TMan Feb 29 '12 at 05:13
@TMan: Thats when it goes to render the page? – Brad Christie Feb 29 '12 at 05:19
yea its pointing to the @Html.EditFor(model => model.StarRating) – TMan Feb 29 '12 at 05:21
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/8332/discussion-between-brad-christie-and-tman) – Brad Christie Feb 29 '12 at 05:42
I did. I will have to show you what I did when I get time. Thanks :) – TMan Mar 02 '12 at 17:12

Creating a EditorTemplate MVC3

1 Answers1

Update

Linked