jquery - 为表内嵌创建新的可创建行

Question

我创建了以下简单的 MVC 5 应用程序

1. create model (using code first) with 4 properties
2. I go to the controller and generate view by scaffold.

这工作正常!当我运行页面并单击创建按钮时我已导航到新页面，其中包含我需要创建的字段(这是默认行为)，我的问题是，是否有一种方法，当我单击“创建”时，我将停留在同一页面上并在开头添加新的空行，即内联创建我只有一页创建只是在带有文本框和复选框的表中打开新行，并在右侧有保存按钮。

这是我的简单模型和脚手架生成的 UI

namespace Emp01.Models
{
    public class Emp
    {
        public string name { get; set; }
        public Boolean checkBox1 { get; set; }
        public Boolean checkBox2 { get; set; }
        public Boolean checkBox3 { get; set; }
    }

    public class EmpDbContext : DbContext
    {
        public EmpDbContext()
            : base("DefaultConnection")
        {

        }
        public DbSet<Emp> Emps { get; set; }
    }
}

这是 View

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.checkBox1)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.checkBox2)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.checkBox3)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.checkBox1)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.checkBox2)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.checkBox3)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.id })
        </td>
    </tr>
}

</table>

更新

另外，像 Patil 建议我尝试以下操作，我需要你的帮助

1. 我将创建操作中生成的代码添加到索引页，并将类形式从垂直更改为内联。

2.添加带有应切换的上下文 ID 的新 div。

目前我错过了两件事

1. 当我点击按钮时，我应该如何让toogle工作

2.当我运行页面时，链接代码中出现错误(model=>model.name，因为它的当前为空，而且当您调用创建页面时，它是空的，所以我不明白为什么......)

我需要你的帮助!

<script>
    jQuery(document).ready(function () {
        jQuery(".content").hide();
    });
    $("#addmoret").click(function () {
        $(".content").toggle();
    });
</script>

@* ----------------------------------------------------------- *@


          <div class="content">
              <div class="form-inline">
                  <h4>Role</h4>
                  <hr />
                  @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                  <div class="form-group">

                      @Html.LabelFor(model => model.name, htmlAttributes: new { @class = "control-label col-md-2" })
                      <div class="col-md-10">

                          @*@Html.EditorFor(model => model.name, new { htmlAttributes = new { @class = "form-control" } })*@

                          @Html.ValidationMessageFor(model => model.name, "", new { @class = "text-danger" })
                      </div>
                  </div>

                  <div class="form-group">
                      @Html.LabelFor(model => model.checkBox1, htmlAttributes: new { @class = "control-label col-md-2" })
                      <div class="col-md-10">
                          <div class="checkbox">
                              @*@Html.EditorFor(model => model.checkBox1)*@
                              @Html.ValidationMessageFor(model => model.checkBox1, "", new { @class = "text-danger" })
                          </div>
                      </div>
                  </div>

                  <div class="form-group">
                      @Html.LabelFor(model => model.checkBox2, htmlAttributes: new { @class = "control-label col-md-2" })
                      <div class="col-md-10">
                          <div class="checkbox">
                              @*@Html.EditorFor(model => model.checkBox2)*@
                              @Html.ValidationMessageFor(model => model.checkBox2, "", new { @class = "text-danger" })
                          </div>
                      </div>
                  </div>

                  <div class="form-group">
                      @Html.LabelFor(model => model.checkBox3, htmlAttributes: new { @class = "control-label col-md-2" })
                      <div class="col-md-10">
                          <div class="checkbox">
                              @*@Html.EditorFor(model => model.checkBox3)*@
                              @Html.ValidationMessageFor(model => model.checkBox3, "", new { @class = "text-danger" })
                          </div>
                      </div>
                  </div>

更新2

@Html.LabelFor(model => model.name, htmlAttributes: new { @class = "control-label col-md-2"})

1:“System.Collections.Generic.IEnumerable”不包含“name”的定义，并且没有扩展方法“name”接受“System.Collections.Generic.IEnumerable emp01.Models.emp>类型的第一个参数” ' 可以找到(您是否缺少 using 指令或程序集引用？)

对于我添加的按钮

<button type='button' id='addmore' class="btn ui-state-default medium" value='Add More Credit ?' style="width: 200px;">Create </button>

Answer 1

我正在尝试同样的事情:唯一的问题是我使用的是一个分区，当您单击按钮时该分区会打开。正如您所看到的图像。

您可以通过下面给出的代码来实现这一点:

    <script>
        jQuery(document).ready(function () {
            jQuery(".content").hide();
        });
        $("#addmorecredit").click(function () {
            $(".content").toggle();
        });
    </script>

<button type='button' id='addmorecredit' class="btn ui-state-default medium" value='Add More Credit ?' style="width: 200px;">Add More Credit ?</button>
<br />
<br />
<div id="add-credit-form" class="content">
    <fieldset>
        <legend>Add More Credit</legend>
        <br />
        <div class="form-row form-input">
            <div class="form-label col-md-2">
                <label for="">Amount Paid (@Html.DisplayFor(m => m.SelectedCurrency))<span class="required">*</span></label>
            </div>
            <div class="form-input col-md-10">
                <div class="row">
                    <div class="col-md-3">
                        @Html.TextBoxFor(m => m.AmountPaid)
                        @Html.ValidationMessageFor(m => m.AmountPaid)
                    </div>
                </div>
            </div>
        </div>
        <div class="form-row form-input">
            <div class="form-label col-md-2">
                <label for="">Creditor Name<span class="required">*</span></label>
            </div>
            <div class="form-input col-md-10">
                <div class="row">
                    <div class="col-md-3">
                        @Html.TextBoxFor(m => m.CreditorName)
                        @Html.ValidationMessageFor(m => m.CreditorName)
                    </div>
                </div>
            </div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">Notes<span class="required">*</span></label>
            </div>
            <div class="form-input col-md-10">
                <div class="row">
                    <div class="col-md-3">
                        @Html.TextAreaFor(m => m.Notes)
                        @Html.ValidationMessageFor(m => m.Notes)
                    </div>
                </div>
            </div>
        </div>
        <button id='addcredit' class="btn ui-state-default medium">Add Credit</button>
    </fieldset>
</div>
<br />
<br />
<fieldset>
    <legend>Credit History</legend>
    <div>
        <table>
            <thead>
                <tr>
                    <th>Account Id</th>
                    <th>Creditor Name</th>
                    <th>Amount Credited</th>
                    <th>Banked?</th>
                    <th>Date Credited</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.PurchaseHistory)
                {                           
                    <tr>
                        <td>@Html.Raw(Convert.ToString(item.AccountId))</td>
                        <td>@Html.Raw(item.CreditorName)</td>
                        <td>@Html.Raw(Convert.ToString(item.Balance))</td>
                        <td>No</td>
                        <td>@Html.Raw(item.Datetime.ToString("dd/MM/yyyy hh:mm tt"))</td>
                    </tr>
                        }
            </tbody>
        </table>
    </div>
</fieldset>

图像: