自定义HTMLHelper，部分视图或其他解决方案应用DRY原则

我有一个MVC3只读视图，其中包含一个显示Item属性的表。

对于项目的许多属性，我们跟踪供应商对项目所做的更改。例如，供应商可能会将一个名为"Color"的属性从"Blue"的值更新为"Red"。在这个视图中，表格列出了在表格行中跟踪的每个属性，其中一列显示了"旧值"one_answers"新值"。下一列显示当前变更的状态(等待批准、批准或拒绝)。但是，对于Admin用户，该列将包含链接('Approve'、'Reject'或'Reset to waiting Approval')。

我的标记和Razor代码非常重复，而且难以控制。我想为此创建一个HTMLHelper，或者可能是一个局部视图，我可以使用它来移动所有的代码，然后将其用于每个Item属性。

下面是用于一个属性的代码示例。此代码将重复用于另外10个左右的属性。

我使用一些jquery和ajax的动作。例如，当一个更改被拒绝时，用户必须输入拒绝更改的原因。

    <tr id="rowId-color">
        <td>@Html.LabelFor(model => model.Color)</td>
        <td>@Html.DisplayFor(model => model.Color)</td>
        @if (Model.ChangeLog != null && Model.ChangeLog.Item("Color") != null) {
            var change = Model.ChangeLog.Item("Color");
            var changeStatus = (ItemEnumerations.ItemChangeStatuses)change.ItemChangeStatusID;
            <td>@change.OldValueDisplay</td>
            <td id="tdstatusId-@change.ItemChangeID">                                                                                
                @if (changeStatus == ItemEnumerations.ItemChangeStatuses.AwaitingApproval && User.IsInRole("TVAPMgr")) {
                                            @Ajax.ActionLink("Approve", "Approve", new { itemChangeID = change.ItemChangeID }, new AjaxOptions { HttpMethod = "POST", Confirm = "Approve this change?", OnSuccess = "actionCompleted" })
                                            @Html.Raw("|")
                                            <a href="#dialog" name="reject" data-id="@change.ItemChangeID" >Reject</a>
                }
                else if ((changeStatus == ItemEnumerations.ItemChangeStatuses.Rejected || changeStatus == ItemEnumerations.ItemChangeStatuses.Approved) && User.IsInRole("TVAPMgr")) { 
                    @Ajax.ActionLink("Reset to Awaiting Approval", "Reset", new { itemChangeID = change.ItemChangeID }, new AjaxOptions { HttpMethod = "POST", Confirm = "Reset this change to Awaiting Approval?", OnSuccess = "actionCompleted" })
                }
                else {
                    @changeStatus.ToDisplayString()
                }
            </td> 
            <td  id="tdreasonId-@change.ItemChangeID">@Html.DisplayFor(m => m.ChangeLog.Item(change.ItemChangeID).RejectedReason)</td>
        }
        else {
            <td colspan="3">No Change</td>
        }
    </tr>

这听起来更像是ItemChangeModel类型的DisplayTemplate，这样你就可以这样做:

 <tr id="rowId-color">
    <td>@Html.LabelFor(model => model.Color)</td>
    <td>@Html.DisplayFor(model => model.Color)</td>
    @Html.DisplayFor(m => m.ChangeLog.Item("Color"))
</tr>

对于每个ChangeLog单元格，显示模板就像一个带有ItemChangeModel类型模型的迷你视图。所以你的视图文件应该是这样的:

@model ItemChangeModel
@if(Model != null) {
<td>@Html.DisplayFor(m => m.OldValueDisplay)</td>
<td id="tdstatusId-@Model.ItemChangeID">
@switch((ItemEnumerations.ItemChangeStatuses) Model.ItemChangeStatusID) {
    case ItemEnumerations.ItemChangeStatuses.AwaitingApproval:
        if(User.IsInRole("TVAPMgr")) {
            @Ajax.ActionLink("Approve", "Approve", new { itemChangeID = change.ItemChangeID }, new AjaxOptions { HttpMethod = "POST", Confirm = "Approve this change?", OnSuccess = "actionCompleted" })
            @Html.Raw("|")
            <a href="#dialog" name="reject" data-id="@change.ItemChangeID" >Reject</a>
        }
        break;
    case ItemEnumerations.ItemChangeStatuses.Rejected:
    case ItemEnumerations.ItemChangeStatuses.Approved:
        if(User.IsInRole("TVAPMgr")) { 
                @Ajax.ActionLink("Reset to Awaiting Approval", "Reset", new { itemChangeID = change.ItemChangeID }, new AjaxOptions { HttpMethod = "POST", Confirm = "Reset this change to Awaiting Approval?", OnSuccess = "actionCompleted" })
        } else {
                @changeStatus.ToDisplayString()
        }
        @break;
 }
  </td> 
  <td  id="tdreasonId-@change.ItemChangeID">@Html.DisplayFor(m => m.RejectedReason)          </td>
} else {
    <td colspan="3">No Change</td>
}

(很难在编辑框中编码，这可能需要一些清理，但我想你会明白的)

你将这个显示模板(文件名为ItemChangeModel.cshtml)添加到ViewsSharedDisplayTemplates文件夹中，它将在该类型上进行DisplayFor调用时使用。

在注释中指出，你不能在DisplayFor中使用方法，但你可以将其更改为索引属性:

public class ChangeLog
{
    public ItemChangeModel this[string key] { get { return Item("Color"); } }
}

然后使用:

@Html.DisplayFor(m => m.ChangeLog["Color"])

您没有显示或解释您的域和视图模型的外观，但我怀疑您在这里使用的不是适合此视图特定需求的视图模型。一个更好的视图模型应该有一个要批准的属性列表，该列表将显示在表中。

无论如何，一种可能的方法是编写一个自定义HTML帮助器，使您的视图看起来像这样:

<tr id="rowId-color">
    @Html.DisplayFor(x => x.Color)
    @Html.ChangeLogFor(x => x.Color)
</tr>
...

和帮助器可能是类似于:

的东西

public static class HtmlExtensions
{
    public static IHtmlString ChangeLogFor<TProperty>(
        this HtmlHelper<MyViewModel> html, 
        Expression<Func<MyViewModel, TProperty>> ex
    )
    {
        var model = html.ViewData.Model;
        var itemName = ((MemberExpression)ex.Body).Member.Name;
        var change = model.ChangeLog.Item(itemName);
        if (change == null)
        {
            return new HtmlString("<td colspan="3">No Change</td>");
        }
        var isUserTVAPMgr = html.ViewContext.HttpContext.User.IsInRole("TVAPMgr");
        var changeStatus = (ItemChangeStatuses)change.ItemChangeStatusID;
        var sb = new StringBuilder();
        sb.AppendFormat("<td>{0}</td>", html.Encode(change.OldValueDisplay));
        sb.AppendFormat("<td id="tdstatusId-{0}">", change.ItemChangeID);
        var ajax = new AjaxHelper<MyViewModel>(html.ViewContext, html.ViewDataContainer);
        if (changeStatus == ItemChangeStatuses.AwaitingApproval && isUserTVAPMgr)
        {
            sb.Append(
                ajax.ActionLink(
                    "Approve", 
                    "Approve", 
                    new { 
                        itemChangeID = change.ItemChangeID 
                    }, 
                    new AjaxOptions { 
                        HttpMethod = "POST", 
                        Confirm = "Approve this change?", 
                        OnSuccess = "actionCompleted" 
                }).ToHtmlString()
            );
            sb.Append("|");
            sb.AppendFormat("<a href="#dialog" name="reject" data-id="{0}">Reject</a>", change.ItemChangeID);
        }
        else if ((changeStatus == ItemChangeStatuses.Rejected || changeStatus == ItemChangeStatuses.Approved) && isUserTVAPMgr)
        {
            sb.Append(
                ajax.ActionLink(
                    "Reset to Awaiting Approval", 
                    "Reset", 
                    new { 
                        itemChangeID = change.ItemChangeID 
                    }, 
                    new AjaxOptions { 
                        HttpMethod = "POST", 
                        Confirm = "Reset this change to Awaiting Approval?", 
                        OnSuccess = "actionCompleted" 
                    }
                ).ToHtmlString()
            );
        }
        else
        {
            sb.Append(changeStatus.ToDisplayString());
        }
        sb.AppendLine("</td>");
        sb.AppendFormat(
            "<td id="tdreasonId-{0}">{1}</td>", 
            change.ItemChangeID, 
            html.Encode(model.ChangeLog.Item(change.ItemChangeID).RejectedReason)
        );
        return new HtmlString(sb.ToString());
    }
}

更好的方法是重新调整视图模型以适应该视图的需求，并简单地使用显示模板。

相关内容

最新更新

热门标签：