如何将当前模型发送到UIHint视图

本文关键字:UIHint 视图 模型 | 更新日期: 2023-09-27 17:50:36

简介:

我有一个网格,它有一个名为Value的字段,该字段可以由用户编辑。

在我的模型上,我有一个带有PossibleValues的IEnumerable列表,如果用户尝试编辑时PossibleValues=Empty(网格上的Value字段(,我默认情况下应该显示一个文本框,但如果PossibleValue有Values,我必须显示一个包含所有Possible Values的DropDownList。

问题:

使用编辑模式的UIHint,我可以显示dropDownList,但我不知道如何将当前模型发送到Overrided View。。。

代码:

型号:

public class FamilyParameter
{
    public FamilyParameter()
    {
        PossibleValues = new List<string>();
    }
    [DisplayName("Value")]
    [UIHint("_FamilyParameterValue")]
    public string Value { get; set; }
    public IEnumerable<string> PossibleValues { get; set; }
    }
}

查看:共享/编辑器模板/_FamilyParameterValue.chtml

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

如何将当前模型发送到UIHint视图

我已经解决了!!

也许不是最好的方法,但效果100%好:

工作原理:

在我的UIHint视图上,我创建了一个简单的Div。每次用户在我的网格上进入Edition Mode时,我都会执行一个带有ajax post操作的Javascript,该操作将返回一个url。然后我将执行url以加载PartialView,一个带有DropDownList,另一个带有TextBox。

希望它能有所帮助!

完整代码:

查看:共享/编辑器模板/_FamilyParameterValue.chtml

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

我注意到你使用的是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的属性,那么您可以在那里定义编辑器的名称(确保在编辑器中控件的名称与要绑定的属性相同(,并且网格将为它生成正确的视图。