创建EditorTemplate MVC3 [英] Creating a EditorTemplate MVC3

查看:152
本文介绍了创建EditorTemplate MVC3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想创造一个jQuery的星级插件一个editortemplate。这是我的第一个MVC3项目,新的jQuery,我不知道如何设置一个。我想要做的就是允许用户通过星评价一个老师。因此,例如,如果我点击3星级我怎么能在与在这样我就可以保存在数据库,这个数字传递的信息的所有其余部分通过3。局部视图作出后,我将如何然后引用它在实际视图,我需要它?感谢您的任何意见。

  @using(Html.BeginForm()){
@ Html.ValidationSummary(真)
<&字段集GT;
    <传奇>教师评价墙面LT; /传说>    < D​​IV CLASS =编辑标记>
        @ Html.LabelFor(型号=> model.StarRating)
    < / DIV>
    < D​​IV CLASS =编辑标记>
        @ * @ Html.EditorFor(型号=> model.StarRating)* @
        @ Html.ValidationMessageFor(型号=> model.StarRating)        <输入名称=star1类型=无线电级=明星/>
        <输入名称=star1类型=无线电级=明星/>
        <输入名称=star1类型=无线电级=明星/>
        <输入名称=star1类型=无线电级=明星/>
        <输入名称=star1类型=无线电级=明星/>    < / DIV>    < D​​IV CLASS =编辑标记>
        @ Html.LabelFor(型号=> model.PostComment)
    < / DIV>
    < D​​IV CLASS =主编场>
        @ Html.EditorFor(型号=> model.PostComment)
        @ Html.ValidationMessageFor(型号=> model.PostComment)
    < / DIV>
     &所述p为H.;
        <输入类型=提交值=创建/>
    &所述; / P>
   < /字段集>

因此​​,在局部视图,将我只是有:

  @model SpeakOut.Model.TeachersRatingsWall
    <脚本SRC =../../脚本/ jquery.rating.js类型=文/ JavaScript的>< / SCRIPT>
     <脚本SRC =../../脚本/ jquery.rating.pack.js类型=文/ JavaScript的>< / SCRIPT>
    <脚本SRC =../../脚本/ jquery.js和类型=文/ JavaScript的>< / SCRIPT>
    <脚本SRC =../../脚本/ jquery.MetaData.js类型=文/ JavaScript的>< / SCRIPT>
      <链接HREF =../../内容/ jquery.rating.css相对=样式类型=文/ CSS/>    <输入名称=star1类型=无线电级=明星/>
    <输入名称=star1类型=无线电级=明星/>
    <输入名称=star1类型=无线电级=明星/>
    <输入名称=star1类型=无线电级=明星/>
    <输入名称=star1类型=无线电级=明星/>


解决方案

您可以创建适用于 StarRating 属性的editortemplate,应该驻留在两个地方之一:


  • 〜/查看/共享/ EditorTemplates /

  • 〜/浏览次数// EditorTemplates /

从那里,你可以使用<一个href=\"http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.uihintattribute.aspx\"相对=nofollow> UIHintAttribute 和装饰模型的属性(如果它是一个独特的类型),你可以基于类型的模板名称,或你可以调用它的东西完全自定义的,当你去显示编辑参考的模板。

有关演示起见,我将它称为StarRating,这意味着我可以适用 [UIHint(StarRating)] 来的财产或使用 @ Html.EditorFor(X =&GT; x.StarRating,StarRating)。将它应用此模板

接下来是创建实际的模板。鉴于它看起来像你已经包括脚本(S)必要的,它只是一个自定义输出的问题。所以,在这里我们有模板:

〜/查看/共享/ EditorTemplates / StarRating.cshtml

  @model的Int32@ *我不知道有多高,你想有一个评价,但我会假设一个1-5得分* @
@for(的Int32得分= 1;评价&LT; = 5; R ++)
{
  @ Html.RadioButtonFor(X =&GT; X,等级,新的{@class =明星})
}


更新

现在,我知道这是一个int,我可能会装饰与您的模型 UIHint 然后只需拨打 EditorFor 通常情况下,和MVC将采取其他的事情。例如:

YourViewModel.cs

  [UIHint(StarRating)]
[范围(1,5,的ErrorMessage =无效的评级)]
公众的Int32 StarRating {搞定;组; }

〜/查看/ myController的/ MyForm.cshtml

  @ Html.EditorFor(型号=&GT; model.StarRating)

〜/查看/共享/ EditorTemplates / StarRating.cshtml

  @model的Int32
@for(的Int32得分= 1;评价&LT; = 5; R ++)
{
  @ Html.RadioButtonFor(型号=&GT;型号,等级,新的{@class =明星})
}

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

解决方案

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

这篇关于创建EditorTemplate MVC3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆