【发布时间】：2012-04-08 11:04:50
【问题描述】：
我在我的开源项目中使用JQuery UI Tabs 功能。我这样做是为了学习 MVC3（以及其他各种技术）。现在我已经完成了所有工作。问题是我在每个选项卡中的部分视图都有相关 CRUD 功能的链接。我已将这些 CRUD 视图设置为显示和编辑器模板。是这些没有获取对 Site.css 的 _Layout.cshtml 引用。
编辑开始
我在“添加视图”脚手架功能中发现，当您单击 创建为局部视图 框时，母版页功能会消失，即变灰，但在 Razor 中我想如果这是空的，它使用了_viewstart 文件，它加载了_Layout？
编辑结束
这是我的 Dashboard.cshtml 代码，其中包含 JQuery UI 选项卡逻辑：
<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，所以这里是PartialView 的_TransctionType.cshtml 代码：
@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 站点。 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 的引用，但是有没有更简洁的方法呢？我错过了什么吗？
【问题讨论】：
标签： html css asp.net-mvc-3 razor partial-views