创建分部视图以在索引页中新建
本文关键字:索引 新建 视图 创建 | 更新日期: 2023-09-27 18:19:19
我有一个普通的索引页面,其中显示了数据库中的内容列表。我的索引中有一个创建按钮,到目前为止,该按钮重定向到另一个页面以创建新项目。
首先,我尝试了部分视图以使其正常工作,但页面仍然重定向到另一个没有布局的页面。然后我尝试使用 Jquery 隐藏/显示包含 Create 的 HTML 代码的div。但我无法将值发布到正确的操作方法。
到目前为止,我还没有尝试过的所有东西。我想我的索引视图不会引起很大的兴趣。
使用 Jquery 时的索引视图
<div> Displaying the index View</div>
<div id="Create" style="display:none">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.LsystemFamily.FamilyName, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.LsystemFamily.FamilyName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LsystemFamily.FamilyName, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.LsystemFamily.DescriptionEN, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.LsystemFamily.DescriptionEN, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LsystemFamily.DescriptionEN, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.LsystemFamily.DescriptionDE, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.LsystemFamily.DescriptionDE, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LsystemFamily.DescriptionDE, "", new { @class = "text-danger" })
<input type="submit" value="Create" class="btn btn-default" />
}
Jquery
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$('#Create').toggle();
});
});
</script>
控制器(返回部分视图时(
public ActionResult Create()
{
return View("_Create");
}
返回分部视图时的索引视图
<div>
Index View
@Html.ActionLink("Create","Create","Controller");
</div>
@Html.Partial("_Create")
在所有这些情况下,我的Create
都没有按照我想要的方式显示。
根据答案,我尝试添加部分视图,然后切换div。 但是我收到以下错误
类型为"System.InvalidOperationException"的异常发生在 System.Web.Mvc.dll但未在用户代码中处理
其他信息:传递到字典中的模型项是 类型 'System.Data.Entity.Infrastructure.DbQuery'1[TEDALS_Ver01.Models.LsystemFamily]', 但是此字典需要类型的模型项 "TEDALS_Ver01.Models.LsystemFamily"。
更新 : 索引视图
@using (Html.BeginForm())
{
<p>
Search @Html.TextBox("SearchString")
<input type="submit" class="btn btn-default" value="Search" />
</p>
}
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$('#Create').toggle();
});
});
</script>
<table class="table">
<tr>
<th>
Family Name
</th>
<th>
System Count
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td data-toggle="tooltip" title="@item.DescriptionDE" data-placement="right">
@Html.ActionLink(item.FamilyName, "ViewSystems", "LsystemFamilies", new { id = @item.LsystemFamilyID},null)
</td>
<td data-toggle="tooltip" title="Number of Systems in @item.FamilyName" data-placement="right">
@Html.DisplayFor(modelItem => item.LsystemCount)
</td>
<td>
@*@Html.ActionLink("Add System", "Create", "Lsystems", new { id = item.LsystemFamilyID }, null)|*@
@Html.ActionLink("Edit", "Edit", new { id = item.LsystemFamilyID }) |
@Html.ActionLink("Details", "Details", new { id = item.LsystemFamilyID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.LsystemFamilyID })|
</td>
</tr>
}
</table>
<input type="button" id="btn" class="btn btn-default" value="Create">
</div>
<div id="Create" style="display:none">
@Html.Partial("_Create")
</div>
@section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$('#Create').toggle();
});
});
</script>
@Scripts.Render("~/bundles/jqueryval")
}
更新:创建发布方法
public ActionResult Create([Bind(Include = "LsystemFamilyID,FamilyName,LsystemCount,DescriptionEN,DescriptionDE,CreatedOn,ModifiedOn,CreatedBy,ModifiedBy")] LsystemFamily lsystemFamily)
{
lsystemFamily.CreatedOn = DateTime.Now;
lsystemFamily.CreatedBy = User.Identity.Name;
lsystemFamily.ModifiedOn = DateTime.Now;
lsystemFamily.ModifiedBy = User.Identity.Name;
lsystemFamily.LsystemCount = 0;
if (ModelState.IsValid)
{
if (db.LsystemFamily.Any(x => x.FamilyName.Equals(lsystemFamily.FamilyName)))
{
ModelState.AddModelError("FamilyName", "Family Name already Exists");
return PartialView("_Create",lsystemFamily);
}
db.LsystemFamily.Add(lsystemFamily);
db.SaveChanges();
return RedirectToAction("Index");
}
return PartialView("_Create",lsystemFamily);
}
你到底想做什么,我的意思是如果你想在按钮单击时显示创建,那么只需创建一个布局 = null 的 partail 视图,即"_Create"(不需要对它进行操作(,现在只需在您正在切换的div 中渲染此部分视图:
<div id="Create" style="display:none">
@Html.Partial("_Create")
</div>
在提交创建请求时,如果您想刷新索引页面,那么您可以在视图中使用 Ajax.BeginForm_create也可以通过 jquery ajax 发布它。
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$('#Create').toggle();
});
});
</script>
您正在尝试按 ID 访问#btn
,但您将其设置为类。 btn
是一个类名。所以 JQuery 找不到你的按钮。像这样做
<script type="text/javascript">
$(document).ready(function () {
$('.btn').click(function () {
$('#Create').toggle();
});
});
</script>