asp.net-mvc - 是否可以通过单击按钮生成相同表单的新实例？

问题描述

我正在我的动物收容所网络应用程序中处理一个用例，客户可以同时注册一只或多只动物。理想情况下，我希望左下角的按钮在单击时生成相同表单的另一个实例，以便可以一次将多个动物注册保存到数据库中。

新动物注册.cshtml：

@model NewAnimalRegistrationViewModel

<html>
<head>
    <title>Register an animal</title>
    <link rel="stylesheet" href="~/css/style.css"/>
</head>
<body>
<div class="container py-5">
    <div class=" row">
        <div class="col-md-10" mx-auto>
            <div asp-validation-summary="All"></div>
            <h1>Animal registration</h1>
            <p>
                We are happy to hear that you are interested in placing your animal in our shelter. Please fill in the fields below and our system will
                check if there is room for your animal.
            </p>
            <form asp-action="RegistrationForm" method="post">
                <div class="form-group row mt-5">
                    <div class="col-sm-6">
                        <label asp-for="Name">Name</label>
                        <input asp-for="Name" class="form-control"/>
                    </div>
                </div>
                <div class="form-group row mt-5">
                    <div class="col-sm-4">
                        <label asp-for="Gender" class="mr-3">Gender</label>
                        <select class="form-group" asp-for="Gender" asp-items="@ViewBag.Genders"></select>
                    </div>
                    <div class="col-sm-4">
                        <label asp-for="Type" class="mr-3">Animal type</label>
                        <select class="form-group" asp-for="Type" asp-items="@ViewBag.AnimalTypes"></select>
                    </div>
                    <div class="col-sm-4">
                        <label>Neutered</label>
                        <div class="form-check">
                            <input asp-for="IsNeutered" class="form-check-input" type="radio" value="true">
                            <label class="form-check-label" asp-for="IsNeutered">
                                Yes
                            </label>
                        </div>
                        <div class="form-check">
                            <input asp-for="IsNeutered" class="form-check-input" type="radio" value="false">
                            <label class="form-check-label" asp-for="IsNeutered">
                                No
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group mt-5">
                    <label asp-for="Reason">Why are you deciding to put this animal up for adoption?</label>
                    <textarea class="form-control" asp-for="Reason" rows="6"></textarea>
                </div>
                <div class="float-right">
                    <a asp-controller="Home" asp-action="Index" class="btn btn-primary px-4">Cancel</a>
                    <button class="btn btn-primary px-4">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

有没有办法在 .NET Core MVC 中做到这一点？如果是，我是否会简单地收到所有动物登记的列表，通过它我可以简单地循环并将它们全部添加到数据库中？

标签： asp.net-mvcasp.net-corerazor.net-core

解决方案

我根据你的描述做了一个demo，你可以参考一下：

模型：

public class NewAnimalRegistrationViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Gender { get; set; }
    public string Type { get; set; }
    public bool IsNeutered { get; set; }
    public string Reason { get; set; }

}

索引.cshtml：

@model NewAnimalRegistrationViewModel

<html>
<head>
    <title>Register an animal</title>
</head>
<body>
    <div class="container py-5">
        <div class=" row">
            <div class="col-md-10" mx-auto>
                <div asp-validation-summary="All"></div>
                <h1>Animal registration</h1>
                <p>
                    We are happy to hear that you are interested in placing your animal in our shelter. Please fill in the fields below and our system will
                    check if there is room for your animal.
                </p>
                <form asp-action="RegistrationForm" method="post">
                

                    <div class="float-right">
                        <a asp-controller="Home" asp-action="Index" class="btn btn-primary px-4">Cancel</a>
                        <button class="btn btn-primary px-4">Save</button>
                    </div>
                </form>

                <a id="add" href='#' class="text-danger">register another animal</a>
            </div>
        </div>
    </div>


</body>
</html>

@section scripts{
    <script>
        var count = 0;
        $(function () {
            var actionUrl = "/Home/AddRegistrationForm?count=" + count;
            $.get(actionUrl).done(function (data) {
                $('body').find('.float-right').before(data);
            });
        })

        $("#add").on("click", function (e) {
            e.preventDefault();
            count++;
            var actionUrl = "/Home/AddRegistrationForm?count=" + count;
            $.get(actionUrl).done(function (data) {
                $('body').find('.float-right').before(data);
            });
        })
    </script>

}

_RegisterPartial.cshtml：

@model NewAnimalRegistrationViewModel
@{ 
    int i = ViewBag.Count;

}

<h3>Anaimal @i</h3>

<div class="form-group row mt-5">
    <div class="col-sm-6">
        <label asp-for="Name">Name</label>
        <input asp-for="Name" name="[@i].Name" class="form-control" />
    </div>
</div>
<div class="form-group row mt-5">
    <div class="col-sm-4">
        <label asp-for="Gender" class="mr-3">Gender</label>
        <select class="form-group" asp-for="Gender" name="[@i].Gender" asp-items="@ViewBag.Genders"></select>
    </div>
    <div class="col-sm-4">
        <label asp-for="Type" class="mr-3">Animal type</label>
        <select class="form-group" asp-for="Type" name="[@i].Type" asp-items="@ViewBag.AnimalTypes"></select>
    </div>
    <div class="col-sm-4">
        <label>Neutered</label>
        <div class="form-check">
            <input asp-for="IsNeutered" name="[@i].IsNeutered"  class="form-check-input" type="radio" value="true">
            <label class="form-check-label" asp-for="IsNeutered">
                Yes
            </label>
        </div>
        <div class="form-check">
            <input asp-for="IsNeutered" name="[@i].IsNeutered" class="form-check-input" type="radio" value="false">
            <label class="form-check-label" asp-for="IsNeutered">
                No
            </label>
        </div>
    </div>
</div>
<div class="form-group mt-5">
    <label asp-for="Reason">Why are you deciding to put this animal up for adoption?</label>
    <textarea class="form-control" asp-for="Reason" name="[@i].Reason" rows="6"></textarea>
</div>

控制器：

public IActionResult Index()
{
    return View();
}

[HttpGet]
public IActionResult AddRegistrationForm(int count)
{
    ViewBag.Count = count;
    ViewBag.Genders = new List<SelectListItem> 
    { 
        new SelectListItem{ Text = "Female", Value="Female"},
        new SelectListItem{ Text = "Male", Value="Male"}
    };

    ViewBag.AnimalTypes = new List<SelectListItem>
    {
        new SelectListItem{ Text = "Cat", Value="Cat"},
        new SelectListItem{ Text = "Dog", Value="Dog"}
    };
    return PartialView("_RegisterPartial");
}

[HttpPost]
public IActionResult RegistrationForm(List<NewAnimalRegistrationViewModel> model)
{
    return View();
}

结果：

asp.net-mvc - 是否可以通过单击按钮生成相同表单的新实例？

问题描述

解决方案

推荐阅读