如何将当前模型发送到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>
我已经解决了!!
也许不是最好的方法,但效果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的属性,那么您可以在那里定义编辑器的名称(确保在编辑器中控件的名称与要绑定的属性相同(,并且网格将为它生成正确的视图。