Create and List Views in a Single Razor View Using Partial Views

In ASP.NET Core, managing HTTP requests is streamlined with HttpClientFactory, which efficiently handles HttpClient instances, preventing resource leaks. Create and list records using ViewModels and controllers, and use Razor views with partials for dynamic content.

Let's create a scenario where you have a NewInformationVm ViewModel to handle both creating new records and listing existing ones.

ViewModel

public class NewInformationVm
{
    public int Id { get; set; }
    public Person Person { get; set; }
    public Student Student { get; set; }
    public List<Item> Items { get; set; }
    public NewInformationVm()
    {
        Person = new Person();
        Student = new Student();
        Items = new List<Item>();
    }
}
public class Item
{
    public int ItemId { get; set; }
    public string ItemName { get; set; }
    // other properties...
}

Controller

public class InformationController : Controller
{
    private List<Item> GetItems()
    {
        // Logic to fetch or create items
        return new List<Item>
        {
            new Item { ItemId = 1, ItemName = "Item 1" },
            new Item { ItemId = 2, ItemName = "Item 2" }
            // Add more items...
        };
    }
    public IActionResult Create()
    {
        var viewModel = new NewInformationVm
        {
            Items = GetItems()
        };
        return View(viewModel);
    }
    [HttpPost]
    public IActionResult Create(NewInformationVm model)
    {
        if (ModelState.IsValid)
        {
            // Save logic
            // Add the new item to the Items collection for demonstration
            model.Items.Add(new Item { ItemId = model.Items.Count + 1, ItemName = "New Item" });
            return View(model);
        }
        return View(model);
    }
}

Main View (Create. cshtml)

@model myprojectname.ViewModels.NewInformationVm
<h2>Create New Record</h2>
<form asp-action="Create" method="post">
    <div>
        <label>Person Name:</label>
        <input asp-for="Person.Name" />
    </div>
    <div>
        <label>Student Name:</label>
        <input asp-for="Student.Name" />
    </div>
    <button type="submit">Create</button>
</form>

<h2>Item List</h2>
@Html.Partial("_ItemList", Model)

Partial View (_ItemList.cshtml)

@model myprojectname.ViewModels.NewInformationVm
@if (Model.Items != null && Model.Items.Any())
{
    <ul>
        @foreach (var item in Model.Items)
        {
            <li>@item.ItemName</li>
        }
    </ul>
}
else
{
    <p>No items available.</p>
}

Example Cascading Dropdown lists in ASP.NET Core
 

ViewModel

public class StateSchoolVm
{
    public string SelectedState { get; set; }
    public string SelectedSchool { get; set; }
    public List<string> States { get; set; }
    public List<string> Schools { get; set; }
    public StateSchoolVm()
    {
        States = new List<string>();
        Schools = new List<string>();
    }
}

Controller

public class DropdownController : Controller
{
    private static readonly Dictionary<string, List<string>> StateSchoolData = new Dictionary<string, List<string>>
    {
        { "MAIN", new List<string> { "A", "D" } },
        { "SIDE", new List<string> { "B", "C" } }
    };
    public IActionResult Index()
    {
        var viewModel = new StateSchoolVm
        {
            States = StateSchoolData.Keys.ToList()
        };
        return View(viewModel);
    }
    [HttpPost]
    public IActionResult GetSchools(string state)
    {
        if (StateSchoolData.ContainsKey(state))
        {
            return Json(StateSchoolData[state]);
        }
        return Json(new List<string>());
    }
}

View (Index. cshtml)

@model myprojectname.ViewModels.StateSchoolVm
<div>
    <label>State:</label>
    <select id="stateDropdown">
        <option value="">Select State</option>
        @foreach (var state in Model.States)
        {
            <option value="@state">@state</option>
        }
    </select>
</div>
<div>
    <label>School:</label>
    <select id="schoolDropdown">
        <option value="">Select School</option>
    </select>
</div>
@section Scripts {
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#stateDropdown').change(function () {
                var selectedState = $(this).val();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetSchools", "Dropdown")',
                    data: { state: selectedState },
                    success: function (data) {
                        var schoolDropdown = $('#schoolDropdown');
                        schoolDropdown.empty();
                        schoolDropdown.append($('<option>').text('Select School').attr('value', ''));
                        $.each(data, function (i, school) {
                            schoolDropdown.append($('<option>').text(school).attr('value', school));
                        });
                    }
                });
            });
        });
    </script>
}

This example demonstrates how to combine create and list views in a single Razor view and how to create cascading dropdown lists using jQuery and AJAX in ASP.NET Core.