Question

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

使用4个属性创建模型（首先使用代码）

我去控制器并通过脚手架生成视图。

这工作正常！当我运行页面并点击创建按钮我导航到新页面时，我需要创建的字段（这是默认行为），我的问题是，如果有一种方法，当我点击创建时我将保持在同一页面上在表格中添加新的空行即内联创建我只有一页创建只是在表格中打开新行，带有文本框和复选框，右侧有保存按钮。

这是我的简单模型和由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; }
    }
}

这是视图

@{
    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建议我尝试以下内容，我需要你的帮助

我在索引页面添加了在创建操作中生成的代码，并将类表单从垂直更改为内联。

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

目前我想念两件事

点击按钮

2.当我运行页面时，我在链接代码中感到错误（model =＆gt; 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 =＆gt; model.name，htmlAttributes：new {@class =“control-label col-md-2”}）

1：'System.Collections.Generic.IEnumerable'不包含'name'的定义，也没有扩展方法'name'接受类型'System.Collections.Generic.IEnumerable emp01.Models.emp＆gt;类型的第一个参数。 “可以找到（你错过了使用指令或程序集引用吗？）

对于我添加的按钮

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

图片：

enter image description here

内联创建表新的可创建行

1 个答案: