0

介绍：

我有一个带有字段调用值的网格，该字段可以由用户编辑。

在我的模型上，我有一个带有可能值的 IEnumerable 列表，如果用户尝试编辑时可能值 = 空（网格上的值字段），我应该默认显示一个文本框，但如果可能值有值，我将不得不显示一个具有所有可能值的下拉列表。

问题：

在编辑模式下使用 UIHint 我可以显示一个下拉列表，但我不知道如何将当前模型发送到覆盖视图...

编码：

模型：

public class FamilyParameter
{
    public FamilyParameter()
    {
        PossibleValues = new List<string>();
    }

    [DisplayName("Value")]
    [UIHint("_FamilyParameterValue")]
    public string Value { get; set; }

    public IEnumerable<string> PossibleValues { get; set; }

    }
}

查看：Shared/EditorTemplates/_FamilyParameterValue.cshtml

@model Bpt.Domain.FamilyParameter
@Html.Telerik().DropDownList().Name("demo");

视图：主要

<div style="height:270px" >
    <table>
        <tr>
            <td width="100%"> 
                <br />

                @(Html.Telerik().Grid<FamilyParameter>()
                    .Name("GridParam")
                    .DataKeys(keys => keys.Add(param => param.Code))
                    .HtmlAttributes(new { style = "width: 420px;" })
                    .NoRecordsTemplate("No existen resultados...")
                    .DataBinding(
                        dataBinding => dataBinding.Ajax()
                            .Select("_EditMaterial_SelectParameters", Controllers.Valoration,Model)
                            .Update("_EditMaterial_UpdateParameters", Controllers.Valoration,Model)
                        )
                    .Columns(columns =>
                    {
                        columns.Bound(param => param.Code).Width("75px").HtmlAttributes(new { style = "text-align: left;" }).ReadOnly();
                        columns.Bound(param => param.Description).Width("200px").HtmlAttributes(new { style = "text-align: left;" }).ReadOnly();
                        columns.Bound(param => param.Value).Width("65px").HtmlAttributes(new { style = "text-align: left;" });
                        columns.Command(commands =>
                                        commands.Edit().ButtonType(GridButtonType.Image)
                            ).Width(60);
                    })
                    .Editable(editing => editing.Mode(GridEditMode.InLine))
                    .Scrollable(scrolling => scrolling.Height(140))
                    .Footer(false)
                    .Sortable()
                    .Resizable(resizing => resizing.Columns(true))
                    .Reorderable(reorder => reorder.Columns(true))
                )

            </td>
        </tr>
    </table>
</div>
4

2 回答 2

0

我已经解决了！！

也许不是最好的方法，但效果 100% 很好：

这个怎么运作：

在我的 UIHint 视图中，我创建了一个简单的 Div。每次用户在我的网格上进入编辑模式时，我都会执行一个带有 ajax 发布操作的 Javascript，这将返回一个 url。然后我将执行 url 以加载一个带有 DropDownList 和另一个带有 TextBox 的 PartialView。

希望能帮助到你！

完整代码：

查看：Shared/EditorTemplates/_FamilyParameterValue.cshtml

<div id="divFamilyParameterValue"> </div>

控制器：

  public ActionResult FamilyPArameterValueDdl(string id)
        {
            var tmpParameter = DetailHvmModel.HvmModel.CurrentArticle.Family.Parameters.Where(e => e.Code == id).FirstOrDefault();
            return PartialView("_FamilyPArameterValueDdl",tmpParameter);
        }
    public ActionResult FamilyPArameterValueTextBox(string id)
    {
        var tmpParameter = DetailHvmModel.HvmModel.CurrentArticle.Family.Parameters.Where(e => e.Code == id).FirstOrDefault();
        return PartialView("_FamilyPArameterValueTextBox", tmpParameter);
    }

    public ActionResult _EditMaterial_EditParameters(string id)
    {

        var tmpParameter = DetailHvmModel.HvmModel.CurrentArticle.Family.Parameters.Where(e => e.Code == id).FirstOrDefault();
        string FamilyParameterValueView;
        // get the parameter that will edit 

        if(tmpParameter.PossibleValues.Any())
        {
              FamilyParameterValueView = Url.Action("FamilyPArameterValueDdl");
        }
        else
        {
             FamilyParameterValueView = Url.Action("FamilyPArameterValueTextBox");
        }


        return Json(new { familyParameterValueView = FamilyParameterValueView });
    }

视图：主要

<div style="height:270px" >
    <table>
        <tr>
            <td width="100%"> 
                <br />

                @(Html.Telerik().Grid<FamilyParameter>()
                      .Name("GridParam")
                      .DataKeys(keys => keys.Add(param => param.Code))
                      .HtmlAttributes(new { style = "width: 420px;" })
                      .NoRecordsTemplate("No existen resultados...")
                      .DataBinding(
                          dataBinding => dataBinding.Ajax()
                                             .Select("_EditMaterial_SelectParameters", Controllers.Valoration,Model)
                                             .Update("_EditMaterial_UpdateParameters", Controllers.Valoration,Model)
                      )
                      .Columns(columns =>
                          {
                              columns.Bound(param => param.Code).Width("75px").HtmlAttributes(new { style = "text-align: left;" }).ReadOnly();
                              columns.Bound(param => param.Description).Width("200px").HtmlAttributes(new { style = "text-align: left;" }).ReadOnly();
                              columns.Bound(param => param.Value).Width("65px").HtmlAttributes(new { style = "text-align: left;" });
                              columns.Command(commands =>
                                              commands.Edit().ButtonType(GridButtonType.Image)
                                  ).Width(60);
                          })
                      .Editable(editing => editing.Mode(GridEditMode.InLine))
                      .Scrollable(scrolling => scrolling.Height(140))
                      .Footer(false)
                      .Sortable()
                              .ClientEvents(e => e.OnEdit("OnEditGridParam"))
                      .Resizable(resizing => resizing.Columns(true))
                      .Reorderable(reorder => reorder.Columns(true))
                      )

            </td>
        </tr>
    </table>
</div>

<script type="text/javascript">

    function OnEditGridParam(e) {
        var item = { id: e.dataItem.Code };
        $.ajax({
            url: "/Valoration/_EditMaterial_EditParameters",
            type: "POST",
            async: false,
            data: item,
            success: function (data, status, xhr) {

                $.post(data.familyParameterValueView, item, function (partial) { $('#divFamilyParameterValue').html(partial); });   

            },
            error: function (xhr, status, err) {
                alert(err);
            }
        }); 


    }

</script>

查看：_FamilyParameterValueDdl.cshtml

@model Bpt.Domain.FamilyParameter

@(Html.DropDownListFor(e => e.Value, new SelectList(Model.PossibleValues), new { style="font-size:12px;" }))

查看：_FamilyParameterValueTextBox.cshtml

@model Bpt.Domain.FamilyParameter

@Html.TextBoxFor(e => e.Value)
于 2013-01-04T15:25:07.300 回答
0

我注意到您使用的是 Telerik，我使用的是 Kendo，并且语法看起来相同，这是我使用的网格。

@(Html.Kendo().Grid(Model)
  .Name("grdDocumentManager")
  //Column Binding
  .Columns(columns =>
               {
                   columns.Bound(dm => dm.DocumentNote).Title("Note").Width("20px").ClientTemplate("#if(trim(DocumentNote) != \"\"){#" +
                                                    "<img src=\"/content/i_discuss.gif\" title=\"View Notes\" onclick=\"javascript:showWindow(#=DocumentId#, '#=CaseId#');\" width=\"16\" height=\"16\" border=\"0\" style=\"cursor:pointer;\">#}" +
                                                "else{#" +
                                                    "<img src=\"/content/i_rate.gif\" title=\"Add Note\" onclick=\"javascript:showWindow(#=DocumentId#, '#=CaseId#');\" width=\"16\" height=\"16\" border=\"0\" style=\"cursor:pointer;\">" +
                                                "#}#");
                   columns.Bound(dm => dm.DocumentId).Hidden(true);
                   columns.Bound(dm => dm.CaseId).Width("50px");
                   columns.Bound(dm => dm.PresidingJudge).ClientGroupHeaderTemplate("Presiding Judge: #=value#").Width("20px");
                   columns.Bound(dm => dm.MagistrateJudge).ClientGroupHeaderTemplate("Magistrate Judge: #=value#").Width("20px");
                   columns.Bound(dm => dm.CaseType).Width("20px");
                   columns.Bound(dm => dm.StatusValue).Width("20px").ClientTemplate("#=Status#").EditorTemplateName("StatusEditor").Title("Status");
                   columns.Bound(dm => dm.UserName).Width("20px").EditorTemplateName("UserNameEditor");
                   columns.Bound(dm => dm.CreationDate).Width("50px").Format("{0:g}");
                   columns.Bound(dm => dm.PageCount).Width("20px");
                   columns.Command(command => command.Edit()).Width(200);
               }
  )
  .Editable(e => e.Mode(GridEditMode.InLine))
  .DataSource(ds => ds.Ajax()
                    .Model(m => {
                                    m.Id(dm => dm.DocumentId);
                                    m.Field(dm => dm.CaseId).Editable(false);
                                    m.Field(dm => dm.CaseType).Editable(false);
                                    m.Field(dm => dm.CreationDate).Editable(false);
                                    m.Field(dm => dm.DocumentNote).Editable(false);
                                    m.Field(dm => dm.MagistrateJudge).Editable(false);
                                    m.Field(dm => dm.PresidingJudge).Editable(false);
                                    m.Field(dm => dm.PageCount).Editable(false);

                    })
                    .Update(update => update.Action("DocumentUpdate","Admin"))


             )
  )

如果您在列绑定上注意到它有一个名为 EditorTemplate 的属性，您可以在其中定义编辑器的名称（确保在编辑器中控件的名称与被绑定的属性名称相同）并且网格将生成正确的视图为了它。

于 2013-01-23T18:57:16.070 回答