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

Question

I am new to ASP.NET Core MVC but I do have some experience working with ASP.NET webforms. I am creating an ASP.NET Core MVC project for practice in this I have a controller which has [http post] Create and Http Get Create action methods.

When user is on the Create page after entering the data user can click the submit button and once the data is saved, the view for http post Create() is render (reloading same view) and I am trying to show the data that user has filled prior to submit but data is not binding to the input controls. I am passing the same model to the view which was sent to be saved. During the debug and I am able to see the expected value under the Locals window in Visual Studio.

I want to understand what I am doing wrong or what changes I should be doing in order to work. If I need to take the different approach then why this the approach (mentioned below in code) I am taking is not correct?

Below is the code and explanation in the comments.

    [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);
    }

Below is the Create view 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>

Yes after your suggested updates I ran the code and it worked fine. Thanks. Now moving to Jquery grid in MVC. — Faisal
– Faisal, Commented Nov 3, 2020 at 15:20

Yinqiu · Accepted Answer · 2020-11-02 06:02:40Z

I tested your code and found that it runs very well in my project.

Except for TimeDue, the field is not successfully bound, the rest of the fields are bound successfully.

I don’t know if you have the same problem. The TimeDue is not successful binding is because you set the Value in the view.

Please delete the value in this field in the view:

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

Result:

By the way,your User is null only because your User is not successfully bound, you can modify your loop code as follows:

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

Then in your Create action:

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

Result:

Edit:

My codes:

Controller:

  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);
    }

View:

<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" [email protected][i].Id />
        <input type="hidden" name="User[@i].Name" [email protected][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>

Thanks Yinqiu, I am seeing the expected result after the changes you suggested. Both issues combined wasn't letting the values appear on the form.
I will give you all of my code, you can see my updated answer.
Thanks Yinqui, sorry I didn't realize I can select the check mark for accepted answer. I have marked it answered . I tried to upvote, I am not allowed yet.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related