IEnumerable Error on View with Partial Load

Question

I am trying to create a view in my application that performs basic CRUD commands in ASP.NET Core to teach myself some new skills. I am however stuck and would appreciate some assistance please.

I would like to have each "component" of the application sitting in a partial view for maintenance going forward. I initially had my Index view use a declaration of type IEnumerable (for the for each loop):

@model IEnumerable<Project.Web.Models.Sample.SampleModel>

Which worked perfect for returning the list and rendering the page but then when trying to have my Modal window partially loaded into the page and insert data using the "CreateSample" function on the controller it was not picking up the function and failed the insert (no form action found). If I then try to add:

@model Project.Web.Models.Sample.SampleModel

to the CreateModal view page it throws an error and wont even let me render the page, I presume because its being partial loaded the app is seen as having two SampleModel declarations. If I create this page completely separate and not partially loaded with the normal @model declaration it works.

I have the basic setup going so far and have included my code for each below.

Model - SampleModel

public class SampleModel
    {
        public int Id { get; set; }
        public string SampleText { get; set; }
    }

Controller - SampleController

public class SampleController : Controller
    {
        public const string ControllerName = "Sample";
        //Open Database Connection
        private _DBContext DBDatabase = new _DBContext ();

        public ActionResult Index()
        {
            var Model = DBDatabase.Sample.Select(s => new SampleModel
            {
                Id = s.Id,
                SampleText = s.SampleText
            }).ToList();

            return PartialView(Model);
        }

        [ActionName("_CreateModal")]
        public ActionResult InsertNewRecord()
        {
            var Model = DBDatabase.Sample.Select(s => new SampleModel
            {
                Id = s.Id,
                SampleText = s.SampleText
            }).ToList();

            return PartialView("_CreateModal", Model);
        }

Views - Index, View, Create

Index - Calls Partial Views for View and Create

@using Project.Web.Controllers
@model Project.Web.Models.Sample.SampleModel
<!--html stuff here -->
@await Html.PartialAsync("_CreateModal")
<!--more html stuff here -->
@await Html.PartialAsync("_ViewData")

View - Foreach to Loop Records

@model Project.Web.Models.Sample.SampleModel

<table style="width: 100%;" id="example">
    <thead>
        <tr>
            <th>#</th>
            <th>Sample Text</th>
            <th class="text-center">Status</th>
            <th class="text-center">Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var sample in Model)
        {
            <tr>
                <th scope="row">@sample.Id</th>
                <td>@sample.SampleText</td>
                <td class="text-center">
                    <div class="badge badge-success">Active</div>
                </td>
                <td class="text-center">
                    <div role="group" class="btn-group-sm btn-group">
                        <button class="btn-shadow btn btn-primary">Edit</button>
                        <button class="btn-shadow btn btn-primary">Delete</button>
                    </div>
                </td>
            </tr>
        }
    </tbody>
</table>

Create - Insert New Record

@model Project.Web.Models.Sample.SampleModel

<form method="post" asp-action="/SampleModel/CreateSample">
                    <div class="form-group">
                        <label for="CreationTime">SampleText</label>
                        <div>
                            <input type="text" class="form-control" id="SampleText" name="SampleText" placeholder="SampleText">
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Sign up</button>
                    </div>
                </form>

Answer 1

As per Ammar's comment, you've just copy-pasted the Index Controller's data access. When building a form allowing the user to create a single new item, then the pattern is to typically pre-instantiate an empty model and pass it to the view:

[ActionName("_CreateModal")]
public ActionResult InsertNewRecord()
{
    var model = new SampleModel(); // If Id is a GUID, then you could assign one here

    return PartialView("_CreateModal", model);
}