ASP.NET 核心 MVC 应用程序：我想在提交和呈现相同数据后显示相同的视图但遇到问题

Question

我是 ASP.NET 核心 MVC 的新手，但我确实有一些使用 ASP.NET 网络表单的经验。我正在创建一个 ASP.NET Core MVC 项目来练习，我有一个控制器，它有 [http post] Create 和 Http Get Create 操作方法。

当用户在输入数据后进入创建页面时，用户可以单击提交按钮，一旦数据被保存，http post Create() 的视图就会呈现（重新加载相同的视图）并且我我试图显示用户在提交之前填写的数据，但数据未绑定到输入控件。我将相同的模型传递给发送保存的视图。在调试期间，我能够在 Visual Studio.

中的 Locals window 下看到预期值

我想了解我做错了什么或者我应该做哪些改变才能工作。如果我需要采用不同的方法，那么为什么我采用的这种方法（在下面的代码中提到）不正确？

下面是注释中的代码和解释。

    [HttpGet]
    public async Task<IActionResult> Create()
    {
        // I am creating a viewModel object because wanted to include the logic for List<users> for dropdown.
        var createView = await _chloramine.ChloramineSaveViewModel(); 
        return View(createView);
    }

    [HttpPost]
    // At page submit this Action method is called and data is saved. 
    public  async Task<IActionResult> Create(ChloramineLogEditSaveViewModel clEditSaveViewModel)
    {
        _chloramine.CreateChloramineLog(clEditSaveViewModel);  
        
        // After data is saved I am adding a user list to the model because I was getting Object null error. 
        clEditSaveViewModel.User = await _chloramine.GetUser();

        // Passing the same model object which was received in order to show what was filled or selected by the user. 
        return View(clEditSaveViewModel);
    }

下面是创建视图 html。

@model EquipmentMVC.Models.ChloramineLogEditSaveViewModel

@{
     ViewData["Title"] = "Create";
}

<hr />
<div>

<form  asp-action="Create">
    <div class="form-group row">
        @foreach (var item in Model.User)
        {
            @Html.HiddenFor(model => item)
        }

        <label asp-for="TimeDue" class="col-sm-2 col-form-label control-label"></label>

        <div class="col-sm-8">

            <input asp-for="TimeDue" value="" class="form-control" />
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="PostPrimaryCarbanTankTp1" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-8">
            <div class="form-check">
                <label class="form-check-label">

                    <input class="form-check-input" asp-for="PostPrimaryCarbanTankTp1" />
                </label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="Comments" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-8">
            <input asp-for="Comments" class="form-control" />
        </div>

    </div>
    <div class="form-group row">
        <label asp-for="IsCompleted" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-8">
            <div class="form-check">
                <input class="form-check-input" asp-for="IsCompleted" />
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Technician</label>
        <div class="col-sm-8">
            <select asp-for="Selected" asp-items=@(new SelectList(Model.User,"Id","Name"))>
                <option value="">Select...</option>
            </select>
            @*<span asp-validation-for="Selected" class="text-danger"></span>*@
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">RN</label>
        <div class="col-sm-8">
            <select asp-for="RnSelected" asp-items=@(new SelectList(Model.User,"Id","Name"))>
                <option value="">Select...</option>
            </select>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label"></label>
        <div class="col-sm-8">
            <input type="submit" value="Create" class="btn btn-secondary" />
        </div>
    </div>
    <div><span asp-validation-for="TimeDue" class="text-danger"></span></div>
    <div><span asp-validation-for="Comments" class="text-danger"></span></div>
    <div><span asp-validation-for="IsCompleted" class="text-danger"></span></div>
</form>
</div>

Answer 1

我测试了你的代码，发现它在我的项目中运行得很好。

除TimeDue字段未绑定成功外，其余字段绑定成功

不知道你有没有遇到同样的问题。 TimeDue绑定不成功是因为你在视图中设置了Value.

请删除视图中该字段的值：

 <input asp-for="TimeDue" class="form-control" />

结果：

对了，你的User是null只是因为你的User没有绑定成功，你可以修改你的循环代码如下：

 @for (int i = 0; i < Model.User.Count(); i++)
    {
        <input type="hidden" name="User[@i].Id" value=@Model.User[i].Id />
        <input type="hidden" name="User[@i].Name" value=@Model.User[i].Name />
    }

然后在您的 Create 操作中：

[HttpPost]
    public IActionResult Create(ChloramineLogEditSaveViewModel clEditSaveViewModel)
    {
       
        return View(clEditSaveViewModel);
    }

结果：

编辑：

我的代码：

控制器：

  public IActionResult Create()
    {
        var model = new ChloramineLogEditSaveViewModel
        {
            Id = 1,
            Comments = "aaaa",
            PostPrimaryCarbanTankTp1 = "fjsdgk",
            TimeDue = "bbbbbb",
            IsCompleted=true,
            RnSelected="gggg",
            Selected="sgs",
            User=new List<User>
            {
                new User{
                Id=1,
                Name="aa"
                },
                new User
                {
                   Id=2,
                   Name="bb"
                }
            }
        };
        return View(model);
    }
    [HttpPost]
    public IActionResult Create(ChloramineLogEditSaveViewModel clEditSaveViewModel)
    {
       
        return View(clEditSaveViewModel);
    }

查看：

<form asp-action="Create">
  <div class="form-group row">
    @for (int i = 0; i < Model.User.Count(); i++)
    {
        <input type="hidden" name="User[@i].Id" value=@Model.User[i].Id />
        <input type="hidden" name="User[@i].Name" value=@Model.User[i].Name />
    }


    <label asp-for="TimeDue" class="col-sm-2 col-form-label control-label"></label>

    <div class="col-sm-8">

        <input asp-for="TimeDue" class="form-control" />
    </div>
</div>
<div class="form-group row">
    <label asp-for="PostPrimaryCarbanTankTp1" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-8">
        <div class="form-check">
            <label class="form-check-label">

                <input class="form-check-input" asp-for="PostPrimaryCarbanTankTp1" />
            </label>
        </div>
    </div>
</div>
<div class="form-group row">
    <label asp-for="Comments" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-8">
        <input asp-for="Comments" class="form-control" />
    </div>

</div>
<div class="form-group row">
    <label asp-for="IsCompleted" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-8">
        <div class="form-check">
            <input class="form-check-input" asp-for="IsCompleted" />
        </div>
    </div>
</div>

<div class="form-group row">
    <label class="col-sm-2 col-form-label">Technician</label>
    <div class="col-sm-8">
        <select asp-for="Selected" asp-items=@(new SelectList(Model.User,"Id","Name"))>
            <option value="">Select...</option>
        </select>
    </div>
</div>

<div class="form-group row">
    <label class="col-sm-2 col-form-label">RN</label>
    <div class="col-sm-8">
        <select asp-for="RnSelected" asp-items=@(new SelectList(Model.User,"Id","Name"))>
            <option value="">Select...</option>
        </select>
    </div>
</div>

<div class="form-group row">
    <label class="col-sm-2 col-form-label"></label>
    <div class="col-sm-8">
        <input type="submit" value="Create" class="btn btn-secondary" />
    </div>
</div>
<div><span asp-validation-for="TimeDue" class="text-danger"></span></div>
<div><span asp-validation-for="Comments" class="text-danger"></span></div>
<div><span asp-validation-for="IsCompleted" class="text-danger"></span></div>
</form>

ASP.NET 核心 MVC 应用程序：我想在提交和呈现相同数据后显示相同的视图但遇到问题

ASP.NET Core MVC app : I want to show the same view after submit and render the same data but having problems

view

asp.net-core-mvc