0

我在我的开源项目中使用JQuery UI 选项卡功能。我这样做是为了学习 MVC3（以及其他各种技术）。现在我已经完成了所有工作。问题是我在每个选项卡中的部分视图都有相关 CRUD 功能的链接。我已将这些 CRUD 视图设置为显示和编辑器模板。它没有获取_Layout.cshtml对 Site.css 的引用。

编辑开始

我在“添加视图”脚手架功能中发现，当您单击“创建为部分视图”框时，母版页功能会消失，即变灰，但在 Razor 中，我认为如果这是空的，它会使用_viewstart加载的文件布局？

编辑结束

这是我的带有 JQuery UI 选项卡逻辑的Dashboard.cshtml代码：

   <script type="text/javascript">
    $(document).ready(function() {
        $("#tabs").tabs();
        getContentTab (1);
    });

    function getContentTab(index) {
        var url='@Url.Content("~/SiteAdmin/AjaxGetTab")/' + index;
        var targetDiv = "#tabs-" + index;
        var ajaxLoading = "<img id='ajax-loader' src='@Url.Content("~/Content")/ajax-     loader.gif' align='left' height='28' width='28'>";

        $(targetDiv).html("<p>" + ajaxLoading + " Loading...</p>"); 
        $.ajax({
          type: 'get',
          url: url,
          cache: false,
          success: function(result) {
            $(targetDiv).html(result);
          }
        });           


    }


   <div id="tabs">
        <ul>
            <li><a href="#tabs-1" onclick="getContentTab(1);">Transaction Type</a>  </li>
            <li><a href="#tabs-2" onclick="getContentTab(2);">Direction Type</a></li>
            <li><a href="#tabs-3" onclick="getContentTab(3);">User Type</a></li>
            <li><a href="#tabs-4" onclick="getContentTab(4);">Currency Type</a></li>
        </ul>
        <div id="tabs-1">

        </div>
        <div id="tabs-2">

        </div>
        <div id="tabs-3">

        </div>
        <div id="tabs-4">

        </div>
    </div>

如果您需要知道我如何决定创建选项卡和创建列表对象，这是我的 AjaxGetTab 操作方法：

     /// <summary>
    /// AJAX action method to obtain the correct Tab to use.
    /// </summary>
    /// <param name="index">Tab number</param>
    /// <returns>Partial View</returns>
    public ActionResult AjaxGetTab(int id)
    {
        string partialViewName = string.Empty;
        object model = null;

        //--Decide which view and model to pass back.
        switch (id)
        {
            case 1:
                partialViewName = "_TransactionType";
                model = db.TransactionTypes.ToList();
                break;
            case 2:
                partialViewName = "_DirectionType";
                model = db.DirectionTypes.ToList();
                break;
            case 3:
                partialViewName = "_UserType";
                model = db.UserTypes.ToList();
                break;
            case 4:
                partialViewName = "_CurrencyType";
                model = db.CurrencyTypes.ToList();
                break;
            case 5:
                partialViewName = "_tabError";
                break;

        }


        return PartialView(partialViewName,model);
    }

目前我正在研究TransactionType所以这里是_TransctionType.cshtml代码PartialView：

@model IEnumerable<Accounts.Models.TransactionType>
<p>
@Html.ActionLink("Create New", "CreateTransactionType")
</p>
<table>
<tr>
    <th>
        Record Status
    </th>
    <th>
        Description
    </th>
    <th>
        Created Date
    </th>
    <th>
        Amended Date
    </th>
    <th></th>
</tr>
@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.RecordStatus)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Description)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.CreatedDate)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.AmendedDate)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.id }) |
        @Html.ActionLink("Details", "Details", new { id=item.id }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.id })
    </td>
</tr>

}

现在“编辑”和删除ActionLink有一个EditorTemplate，详细信息有一个DisplayTemplate文件夹，其中包含所需的TransactionType.cshtml它_Layout没有应用 Site.css 的这些视图。以下是“编辑”代码库中的示例代码：

_EditTransactionType.cshtml：

@model Accounts.Models.TransactionType
@using (Html.BeginForm())
{
    @Html.EditorForModel()

    <p>
        <input type="submit" value="Save" />
    </p>

 }

这是位于/Views/SiteAdmin/EditorTemplate的TransactionType.cshtml：

    @model Accounts.Models.TransactionType
    <fieldset>
    <legend>Transaction Type</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.RecordStatus)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.RecordStatus)
        @Html.ValidationMessageFor(model => model.RecordStatus)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Description)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Description)
        @Html.ValidationMessageFor(model => model.Description)
    </div>
    </fieldset>

现在我可以在每个模板中添加对 Site.css 的引用，但是有没有更简洁的方法呢？我错过了什么吗？

4

2 回答 2

1

_ViewStart 仅适用于渲染的视图，这取决于您如何渲染视图。EG 使用 RenderPartial 或从控制器返回 PartialView 仅返回您所定位的 PartialView 的内容（和嵌套部分）。

如果 _LayoutFile 应用于每个视图和每个局部视图，那么您最终会得到如下页面：

<html>
  <head />

  <body>      
    <html>
      <head />     
      <body>
        <!-- Actual Partial View Content -->
      </body>
    </html>    
  </body>
</html>

渲染页面时，所有 _layout、要渲染的视图、任何部分视图和任何嵌套部分或编辑器/显示模板都被构建到单个页面中并返回给客户端，因此 _Layout 引用的任何样式表master 将应用于这个现在扁平的（部分）视图层次结构。

您是否检查了输出 HTML 以确保符合预期？视图可能不是问题。

于 2012-04-08T14:36:31.733 回答
0

我真的不明白为什么您使用 jqueryui 选项卡如此复杂地添加 onclick 然后添加开关等。

 <div id="tabs">
        <ul>
            <li><a href="@Url.Action("TransactionType", "YourController")"><span>Transaction Type</span></a></li>
            <li><a href="@Url.Action("DirectionType", "YourController")"><span>Direction Type</span></a></li>
            <li><a href="@Url.Action("UserType", "YourController")"><span>User Type</span></a></li>
            <li><a href="@Url.Action("CurrencyType", "YourController")"><span>Currency Type</span></a></li>
       </ul>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#tabs').tabs({
            spinner: '<img src="../../Content/Images/tabsppinner.gif" alt="" /> @Loading...'
        }); 
    });
</script>

然后，您将只有一个控制器，其中包含为每个选项卡定义的操作。

于 2012-04-08T11:47:30.500 回答