Javascript 创建局部视图以在索引页中创建新视图

我有一个普通的索引页面，其中显示数据库中的内容列表。我的索引中有一个create按钮，现在可以重定向到另一个页面来创建一个新项目

首先，我尝试使用部分视图，但页面仍然重定向到另一个没有布局的页面。然后我尝试使用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" />
}

<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")

@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")

}

更新：创建Post方法

    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);
    }

---

您到底想做什么，我的意思是，如果您想在单击按钮时显示Create from，那么只需创建一个Layout=null的partail视图，即“_Create”（无需操作），现在只需在您要切换的div中渲染此部分视图：

<div id="Create" style="display:none">
  @Html.Partial("_Create")
</div>

@Html.Partial（“\u Create”）

---

在提交创建请求时，如果您想刷新索引页，那么您可以在创建视图中使用Ajax.BeginForm，也可以通过jquery Ajax发布。

当我使用我的代码时，我可以在视图中获得创建页，但是我无法将值发布到创建操作方法以将其保存到数据库请提供操作和控制器名称为begin form to post Itan，只是为了澄清问题中给出的按钮是将值保存到数据库。我还有另一个按钮，它调用创建局部视图，该视图具有

id=btn

，但在调用创建局部视图之前会抛出错误请使用您的代码并尝试显式地添加BeginForm方法操作名称和控制器名称给我一分钟时间来尝试您所说的。我已经尝试过了。它抛出一个Exception，告诉部分视图需要与索引不同的类型。索引需要Ienumerable，而Create需要model为什么你说我不需要Create的action方法？因为它只是一个平面html视图，你不需要get操作，你只需要一个post操作就可以了。我用@Stephen Muecke的评论得到了它。我无法在部分视图中传递模型

索引

视图中的模型是

IEnumerable

，但

创建

视图中的模型是

LsystemFamily

。您需要将正确的模型传递给partial（例如，

@Html.partial（“\u Create”，new LsystemFamily（））

我无法将paramaeter

new LsystemFamily

作为

Html.partial

Its

new LsystemFamily（）

中的参数添加，这是肯定的。我无法添加

新的LsystemFamily

。我的智能感知没有显示系统家族。我可以添加

Model.First（）

来让它工作。但是我会让所有的文本字段填充模型的值使用完全限定的名称-

new TEDALS\u Ver01.Models.LsystemFamily（）

或使用TEDALS\u Ver01.Models添加一个

在视图中
<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            $('#Create').toggle();

        });
    });
</script>

 <script type="text/javascript">
        $(document).ready(function () {
            $('.btn').click(function () {
                $('#Create').toggle();

            });
        });
    </script>