0

オープンソースプロジェクトでJQueryUIタブ機能を使用しています。私はMVC3（および他のさまざまなテクノロジー）を学ぶためにこれを行っています。今、私はそれをすべて機能させています。問題は、各タブ内の部分ビューに、関連するCRUD機能からのリンクがあることです。これらのCRUDビューをディスプレイおよびエディターテンプレートとして設定しました。_Layout.cshtmlSite.cssへの参照を取得していないこれら。

編集開始

「ビューの追加」スキャフォールディング機能で、[部分ビューとして作成]ボックスをクリックすると、マスターページ機能が表示されなくなる、つまりグレー表示されることがわかりましたが、Razorでは、これが空の場合は_viewstartファイルを使用すると思いました。レイアウト？

編集終了

JQueryUIタブロジックを使用した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を含むフォルダーがあります。これらのビューには_LayoutSite.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によって参照されるスタイルシートがすべてレンダリングされます。マスターは、このフラット化された（部分）ビューの階層に適用されます。

出力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>

次に、タブごとにアクションが定義された1つのコントローラーがあります。

于 2012-04-08T11:47:30.500 に答える