如何從 ASP.NET Core MVC 中的視圖創建 object

Question

這是我第一次使用 web 開發並決定使用 ASP.NET Core MVC。

當我從視圖中為 model 創建新項目時，我還希望能夠創建主 model 正在使用的 model。

我的例子：

Model Contract包含一個List<Variable>類型的 object 。 當我從視圖創建Contract時，我希望能夠從給定合同的同一視圖創建變量。

這是從核心腳手架生成的代碼

    <form asp-action="Create">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Content" class="control-label"></label>
        <textarea oninput="auto_grow(this)" , style="width:90%; min-height: 500px; resize: vertical; overflow: auto" asp-for="Content" class="form-control">
            
        </textarea>
        <span asp-validation-for="Content" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Descrption" class="control-label"></label>
        <input asp-for="Descrption" class="form-control" />
        <span asp-validation-for="Descrption" class="text-danger"></span>
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

如您所見，除了 List[Variable] 之外，還顯示了合同 model 的其他參數，我不確定添加它的最佳方法是什么。

public class Contract
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int Id { get; set; }

    [Required]
    public string Name { get; set; }

    [Required]
    public string Content { get; set; }

    public List<Variable> Variable { get; set; }

    public string Descrption { get; set; }
}

如果有遺漏的細節，我很抱歉。 隨時提出問題，我很樂意提供

Answer 1

您可以在表單中使用表格來顯示您的變量，並在表單發布時，將帶有變量的合同發布到操作。這是一個演示：

Controller：

public IActionResult TestContract()
        {
           
            return View();
        }
        public IActionResult Create(Contract c)
        {
            //passing Contract with List<Variable> to the action,you can do something you want here
            return Ok();
        }

多變的：

public class Variable
    {
        public int VariableId { get; set; }
        public string VariableName { get; set; }

    }

看法：

    <form asp-action="Create" id="myform">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Content" class="control-label"></label>
        <textarea oninput="auto_grow(this)" , style="width:90%; min-height: 500px; resize: vertical; overflow: auto" asp-for="Content" class="form-control">
            
        </textarea>
        <span asp-validation-for="Content" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Descrption" class="control-label"></label>
        <input asp-for="Descrption" class="form-control" />
        <span asp-validation-for="Descrption" class="text-danger"></span>
    </div>
    <div>
        <table id="myTable">
            <thead>
                <tr>
                    <th scope="col">VariableId</th>
                    <th scope="col">VariableName</th>

                </tr>
            </thead>
            <tbody>
               
            </tbody>
        </table>
    </div>
    
    <div class="row final-mile__step-control">
        <div class="col justify-content-center">
            <button type="button" onclick="Add()">Add Variable</button>
        </div>
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>
<script>
        function Add() {
            $('#myTable > tbody').append('<tr><td><input name="VariableId" class="form-control" required="required" placeholder="VariableId" /><span class="field-validation-valid text-danger" data-valmsg-for="VariableId" data-valmsg-replace="true"></span></td>' +
                '<td> <input name="VariableName" class="form-control"  required="required"  placeholder="VariableName" /><span class="field-validation-valid text-danger" data-valmsg-for="VariableName" data-valmsg-replace="true"></span></td>' +
                '<td><input type="button" onclick="Delete(this)" value="Delete" /></td ></tr > ');
        };
        function Delete(d) {
            $(d).closest("tr").remove();
        };
        $('#myform').submit(function () {
            var count = 0;
            $('#myTable tbody tr').each(function () {
                $(this).find("input[name='VariableId']").attr("name", "Variable[" + count + "].VariableId");
                $(this).find("input[name='VariableName']").attr("name", "Variable[" + count + "].VariableName");
                count++;
            });
            return true; // return false to cancel form action
        });
        $(".submit").on('click', function () {
            var list = [];
            $('#myTable tbody tr').each(function () {
                var obj = {};
                obj.FirstName = $(this).find("td").find("input[name='FirstName']").val();
                obj.LastName = $(this).find("td").find("input[name='LastName']").val();
                obj.Dob = $(this).find("td").find("input[name='Dob']").val();
                list.push(obj);
            });
            $.ajax({
                type: "POST",
                url: '@Url.Action("TestEmployee", "Test1")',
                contentType: "application/json",
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                data: JSON.stringify(list)
            }).done(function (data) {

            });

        });
    </script>

結果：