Creating a EditorTemplate MVC3

2019-07-15 05:11发布

问题:

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

回答1:

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