Populate Form Fields after Submit ASP.NET Core 3.1 MVC

user_10500481 0
Viewed 1621

I am trying to repopulate my input fields after the form has been submitted (with HttpPost). Is there a simple way to do this? I have a dropdown and a text box that get populated with data from the database. They each have their own functions in the controller that handle the flow of data. My goal is to have the last created data appear in the input fields after submit.

My Model

public int ID { get; set; }
public string bookName { get; set; }
public string Author { get; set; }

My View

<form method="post" asp-controller="Home" asp-action="Home" role="post">
    <div class="form-group">
        <label asp-for="bookName"></label>
        <select name="bookName" asp-items="@(new SelectList(ViewBag.message, "ID", "bookName"))">
</select>
    </div>
    <div class="form-group">
        <label asp-for="Author"></label>
        <input asp-for="Author" class="form-control" />
    </div>
    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</form>

My Controller

        public void GetBooksDDL()
        {
            List<BookModel> bookName = new List<BookModel>();
            bookName = (from b in _context.BookModel select b).ToList();
            bookName.Insert(0, new BookModel { ID = 0, bookName = "" });
            ViewBag.message = bookName;
        }

        [HttpPost("[action]")]
        [Route("/Home")]
        [Produces("application/json")]
        public async Task<IActionResult> Home()
        {
            if (textbox != "")
            {
                //do all the submit actions
                //after all of the actions are complete return the view:
                GetBooksDDL();
                return View();
            }else
            {
                return Error;
            }
        }

I understand that I could pass in the model in the View(), but the values are always null. I tried to pass in my (BookModel model) as an argument in the HttpPost, but I get a 415 status.

asp.net-core razor model-view-controller input c#
1 Answers

I am trying to repopulate my input fields after the form has been submitted (with HttpPost).

For simple input fields,just return View(model).For SelectList,you need set the value again.

Here is a simple demo like below:

Model:

public class Test
{
    public int Id { get; set; }
    public string Name { get; set; }
    public Category Category { get; set; }
}
public class Category
{
    public int Id { get; set; }
    public string CName { get; set; }
}

View:

@model Test
<h1>Edit</h1>

<h4>Test</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="Id" />
            <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>
                <label asp-for="Category"></label>
                <select asp-for="Category.Id" asp-items="@ViewBag.Category"></select>
                <span asp-validation-for="Category.Id" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Controller:

public class TestsController : Controller
{
    private readonly YourDbContext _context;
    private readonly List<Category> categories;
    public TestsController(YourDbContext context)
    {
        _context = context;
        categories = _context.Category.ToList();
    }
    // GET: Tests/Edit/5
    public async Task<IActionResult> Edit(int? id)
    {
        var test = await _context.Test.FindAsync(id);
        ViewBag.Category = new SelectList(categories, "Id", "CName", test.Category.Id);
        if (test == null)
        {
            return NotFound();
        }
        return View(test);
    }

    // POST: Tests/Edit/5
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Edit(int id, Test test)
    {
        //do your stuff...
        //...
        //repopulate the selectlist
        ViewBag.Category = new SelectList(categories, "Id", "CName", test.Category.Id);
        return View(test);
    }
}

Result: enter image description here

Update:

Home.cshtml:

@model BookModel

<form method="post" asp-controller="Home" asp-action="Home" role="post">
    <div class="form-group">
        <label asp-for="bookName"></label>
        <select name="bookName" asp-items="@ViewBag.message">
        </select>
    </div>
    <div class="form-group">
        <label asp-for="Author"></label>
        <input asp-for="Author" class="form-control" />
    </div>
    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</form>

HomeController:

public IActionResult Home()
{
    GetBooksDDL();
    return View();
}
public void GetBooksDDL(string bookname = "")
{
    List<BookModel> bookName = new List<BookModel>();
    //for easy testing,I just manually set the value
    bookName = new List<BookModel>() {
        new BookModel(){  ID=1, bookName="aaa",Author="aaa"},
        new BookModel(){  ID=2, bookName="bbb",Author="bbb"},
        new BookModel(){  ID=3, bookName="ccc",Author="ccc"}
    };
    bookName.Insert(0, new BookModel { ID = 0, bookName = "" });
    ViewBag.message = new SelectList(bookName, "ID", "bookName", bookname);
}

[HttpPost("[action]")]
[Produces("application/json")]
public async Task<IActionResult> Home(BookModel bookModel)
{            
        //do all the submit actions
        //after all of the actions are complete return the view:
        GetBooksDDL(bookModel.bookName);
        return View(bookModel);
        
}

Result: enter image description here

user_113988100
Related