【发布时间】:2017-10-13 02:15:38
【问题描述】:
我有一个带有控制器的模型(机器)。控制器,它在索引操作“IActionResult”中收集机器列表并将其发送到索引视图。
public async Task<IActionResult> Index(string sortOrder, string searchString)
{
ViewData["NameSortParm"] = string.IsNullOrEmpty(sortOrder) ? "nombre_desc" : "";
ViewData["DateSortParm"] = sortOrder == "Date" ? "date_desc" : "Date";
ViewData["CurrentFilter"] = searchString;
var maquinas = from s in _context.Machines
select s;
if (!String.IsNullOrEmpty(searchString))
{
maquinas = maquinas.Where(s => s.MchName.Contains(searchString));
}
switch (sortOrder)
{
case "nombre_desc":
maquinas = maquinas.OrderByDescending(s => s.MchName);
break;
case "Date":
maquinas = maquinas.OrderBy(s => s.FechaCompra);
break;
case "date_desc":
maquinas = maquinas.OrderByDescending(s => s.FechaCompra);
break;
default:
maquinas = maquinas.OrderBy(s => s.MchName);
break;
}
return View(await _context.Machines.Include(t => t.MachineTypes).AsNoTracking().ToListAsync());
}
在索引中,我将这个列表显示在一张桌子上:
@model IEnumerable<Application.Models.Machine>
@{
ViewData["Title"] = "Index";
}
<h2>Index</h2>
<p>
<a asp-action="Create">Create New</a>
</p>
<form asp-action="Index" method="get">
<div class="form-actions no-color">
<p>
Search by name: <input type="text" name="SearchString" value="@ViewData["currentFilter"]" />
<input type="submit" value="Search" class="btn btn-default" /> |
<a asp-action="Index">Volver a lista completa</a>
</p>
</div>
</form>
<table class="table">
<thead>
<tr>
<th>
<a asp-action="Index" asp-route-sortOrder="@ViewData["NameSortParm"]">@Html.DisplayNameFor(model => model.MchName)</a>
</th>
<th>
@Html.DisplayNameFor(model => model.MachineTypes.TypeDescription)
</th>
<th>
<a asp-action="Index" asp-route-sortOrder="@ViewData["DateSortParm"]">@Html.DisplayNameFor(model => model.FechaCompra)</a>
</th>
<th>
@Html.DisplayNameFor(model => model.CostoMaq)
</th>
<th>
@Html.DisplayNameFor(model => model.PUnit)
</th>
<th>
@Html.DisplayNameFor(model => model.FechaPUnit)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.MchName)
</td>
<td>
@Html.DisplayFor(modelItem => item.MachineTypes.TypeDescription)
</td>
<td>
@Html.DisplayFor(modelItem => item.FechaCompra)
</td>
<td>
@Html.DisplayFor(modelItem => item.CostoMaq)
</td>
<td>
@Html.DisplayFor(modelItem => item.PUnit)
</td>
<td>
@Html.DisplayFor(modelItem => item.FechaPUnit)
</td>
<td>
<a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
<a asp-action="Details" asp-route-id="@item.Id">Details</a> |
<a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
</td>
</tr>
}
</tbody>
</table>
如您所见,我有一个名为“Create”的 asp-action,它打开 Create 视图,用户可以在其中注册新机器。
这是来自机器控制器的 Create() 代码: 注意:Create 是一个 View,还不是 PartialView
public IActionResult Create()
{
PopulateMachineTypeDropDownList();
PopulateMachineTypeDropDownListSupplier();
PopulateMachineTypeDropDownListStore();
return View();
}
目标:
从 Index.cshtml 内部将 Create 表单作为模式调用(作为局部视图?)
为此,我编辑了 Index.cshtml 并将其转换为:
<a asp-action="Create">Create New</a>
进入这个:
<a data-toggle="modal" data-target="CreateModal">Create New</a>
此外,我在列出我们库存机器的表格末尾插入了模式代码,并尝试将 Create 视图作为 Partial View 调用。 (当然失败了)。模式代码:
<div class="modal fade" id="CreateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
@Html.RenderPartial("Create", Model)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
我相信这失败的原因有很多,在未定义为局部视图的东西上使用 RenderPartial 就是其中之一,我希望是主要原因。
问题:
我应该按照哪些步骤将 Create 视图转换为 Index.cshtml 中的局部视图并将其呈现为模态表单?
顺便说一下,这是创建视图的代码:
@model Application.Models.Machine
@{
ViewData["Title"] = "Create";
}
<h2>Create</h2>
<form asp-action="Create">
<h4>Machine</h4>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="TypeID" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="TypeID" class="form-control" asp-items="ViewBag.TypeID">
<option value="">-- Seleccione Tipo --</option>
</select>
<span asp-validation-for="TypeID" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="SupplierID" class="col-md-2 control-label"> </label>
<div class="col-md-10">
<select asp-for="SupplierID" class="form-control" asp-items="ViewBag.SupplierID">
<option value="">-- Seleccione Proveedor --</option>
</select>
<span asp-validation-for="SupplierID" class="text-danger"> </span>
</div>
</div>
<div class="form-group">
<label asp-for="StoreID" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="StoreID" class="form-control" asp-items="ViewBag.StoreID">
<option value="">-- Seleccione Tienda --</option>
</select>
<span asp-validation-for="StoreID" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="MchName" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="MchName" class="form-control" />
<span asp-validation-for="MchName" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="FechaCompra" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="FechaCompra" class="form-control" />
<span asp-validation-for="FechaCompra" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="CostoMaq" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="CostoMaq" class="form-control" />
<span asp-validation-for="CostoMaq" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="PUnit" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="PUnit" class="form-control" />
<span asp-validation-for="PUnit" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="FechaPUnit" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="FechaPUnit" class="form-control" />
<span asp-validation-for="FechaPUnit" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</form>
<div>
<a asp-action="Index">Back to List</a>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
【问题讨论】:
标签: asp.net-core bootstrap-modal partial-views