1

我对 MVC3 相当陌生，正在用它构建一个 SQL 2008 R2、EF4 网站。在过去的 36 小时里，我尝试将 Telerik 的 MVC 扩展添加到项目中，以期使用 DatePicker、Menu 等。我相信我的配置和安装都很好，我还做了一些小测试（面板栏示例） '已经完成似乎证实了这一点，我对 _layout.cshtml 文件的编辑似乎也很好。

我被困的地方是尝试将 Datepicker ( http://demos.telerik.com/aspnet-mvc/razor/datepicker ) 的 Razor 代码示例集成到我现有的项目中。我想在我的应用程序配置文件页面中的“出生日期”(DOB) 字段中添加一个 Datepicker。Profile 在数据库中有一个表、一个模型 (profile.cs)、一个控制器 (ProfileController.cs) 和 Views/Profile 目录中的一些视图（索引、编辑等）所有示例似乎都专注于创建全新的项目、新的模型、新的控制器等，由于我相对缺乏经验，我对如何使用现有项目中概述的演示代码有些困惑。

我假设我可以将这个部分类放入我的 ProfileController 中。

public partial class DatePickerController : Controller
{
    public ActionResult FirstLook(FirstLookModelView viewModel)
    {
        viewModel.DatePickerAttributes.SelectedDate = viewModel.DatePickerAttributes.SelectedDate ?? DateTime.Today;
        viewModel.DatePickerAttributes.MinDate = viewModel.DatePickerAttributes.MinDate ?? new DateTime(1900, 1, 1);
        viewModel.DatePickerAttributes.MaxDate = viewModel.DatePickerAttributes.MaxDate ?? new DateTime(2099,
            12, 31);
        viewModel.DatePickerAttributes.ShowButton = viewModel.DatePickerAttributes.ShowButton ?? true;
        viewModel.DatePickerAttributes.OpenOnFocus = viewModel.DatePickerAttributes.OpenOnFocus ?? false;
        return View(viewModel);
    }
}

而且我可以将 View 元素放入我的 Edit.cshtml 我的 @Html.EditorFor(model => model.DOB) 现在所在的位置

@(Html.Telerik().DatePicker()
        .Name("DatePicker")
        .HtmlAttributes(new { id = "DatePicker_wrapper" })
        .Min(Model.DatePickerAttributes.MinDate.Value)
        .Max(Model.DatePickerAttributes.MaxDate.Value)
        .ShowButton(Model.DatePickerAttributes.ShowButton.Value)
        .Value(Model.DatePickerAttributes.SelectedDate.Value)
)

@using (Html.Configurator("The date picker should...")
              .PostTo("FirstLook", "DatePicker")
              .Begin())
   { 
    <ul>
        <li>
            @Html.CheckBox("DatePickerAttributes.ShowButton", Model.DatePickerAttributes.ShowButton.Value)
            <label for="DatePickerAttributes_ShowButton">show a popup button</label>
        </li>
   <snip>

但是我对将模型的代码部分放在哪里感到相当困惑......

public class FirstLookModelView
{
    public FirstLookModelView()
    {
        DatePickerAttributes = new DatePickerAttributes();
    }
    public DatePickerAttributes DatePickerAttributes { get; set; }
}

这会进入我当前的模型 Profile.cs 吗？任何指导将不胜感激。

PS 我也在 Telerik 论坛上问：http ://www.telerik.com/community/forums/aspnet-mvc/documentation/difficulty-with-existing-project-and-adding-telerik-mvc-to-它.aspx

4

1 回答 1

1

感谢我的一位好朋友帮助我，以及 Telerik 的一些支持，我得到了答案。可能只是我，或者他们的 MVC 支持示例实际上令人困惑。任何第一次尝试使用 Telerik 的 MVC 的人，即 MVC 新手，我希望这对你有所帮助。

我将假设您已经按照教程设置 Telerik MVC 以在您的项目中工作，并且现在是我，第一次努力实现他们的工具之一。

第一步，不要将此处的代码示例 (http://demos.telerik.com/aspnet-mvc/razor/datepicker) 像“view”“controller”和“_layout.cshtml”作为您需要的最终代码实施。单击“编辑模板”（至少对于此 DatePicker 示例），您将在 Razor 示例中看到更多代码：http: //demos.telerik.com/aspnet-mvc/razor/datepicker/edittemplate

您必须将我的示例调整为您的实际代码，但我将坚持使用我在原始问题中发布的示例代码。在您的模型（Profile.cs）文件中，修改 datetime 字段：

    [UIHint("MyCustomEditorTemplate")]
    public Nullable<System.DateTime> DOB { get; set; }

提示：在模型文件顶部的 Using 中，添加以下内容：

      using System.ComponentModel.DataAnnotations;

我对公共部分类 DatePickerController 的问题的代码片段：控制器和公共类 FireLookModelView 进入 ProfileController （或者更确切地说，你的控制器。）

现在创建一个新的控制器，名为 DatePickerController.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MySite.Controllers
{
public class DatePickerController : Controller
{

}
public class DatePickerAttributes
{
    public DateTime? SelectedDate
    {
        get;
        set;
    }

    public DateTime? MinDate
    {
        get;
        set;
    }

    public DateTime? MaxDate
    {
        get;
        set;
    }

    public bool? ShowButton
    {
        get;
        set;
    }

    public bool? OpenOnFocus
    {
        get;
        set;
    }
}

public class TimePickerAttributes
{
    public DateTime? SelectedDate
    {
        get;
        set;
    }

    public DateTime? MinTime
    {
        get;
        set;
    }

    public DateTime? MaxTime
    {
        get;
        set;
    }

    public bool? ShowButton
    {
        get;
        set;
    }

    public int? Interval
    {
        get;
        set;
    }

    public bool? OpenOnFocus
    {
        get;
        set;
    }
}

public class DateTimePickerAttributes
{
    public DateTime? SelectedDate
    {
        get;
        set;
    }

    public DateTime? MinDate
    {
        get;
        set;
    }

    public DateTime? MaxDate
    {
        get;
        set;
    }

    public int? Interval
    {
        get;
        set;
    }
}
}

在您的视图下，在 Shared 目录中，创建一个名为 EditorTemplates 的新子目录。在那里创建一个空文件，命名为 DateTime.cshtml：

@model DateTime?

@(Html.Telerik().DateTimePicker()
    .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
    .HtmlAttributes(new { id = ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty) + "_wrapper" })
    .Value(Model > DateTime.MinValue? Model : DateTime.Today)
)

现在转到您希望日期选择器出现的页面，在我的例子中是：Views/Profile/Edit.cshtml：

将 HTML.EditorFor 替换为：

@Html.Telerik().DatePickerFor(model => model.DOB)

..这些实际上是您需要（我相信）使用 Telerik MVC 设置您的第一个实际工作工具的所有部分。希望这对找到这个的人有所帮助！

埃德

于 2012-05-30T21:06:06.663 回答