c# - How do I add a "model" dropdown in a IPagedlist model?

Question

I have a page to display every log (message, time, type, customerId, Name) in a html table. Since the log is huge I am using a IPagedList in the Razor MVC and this works perfectly. I currently have 2 search boxes (for admins) and 1 for members. Where you can search by the message and customer ID.

Now the problem is that I don't want the users to just have a textbox where you only can put in a number (for example you put in customer ID 2 and get the customer T) - but instead I want a dropdown with all the current customer names connected to the customer IDs.

I have this functionality in another page I use but it only works because I return the model on the other page and because the log page returns a "IPagedListModel" instead of a "Model" I can't use this solution. How would I make this solution work for my log page as well?

HTML code

@:<p>@Html.DropDownListFor(m => m.SelectedCustomer, Model.CustomerList)</p>

Model

using System;
using System.Linq;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Data.Entity;
using System.Collections.Generic;
using PagedList;
using System.Web.Mvc;

namespace ASDMVC.Models
{
    [Table("Log")]
    public class LogModel
    {
        [Key]
        public long id { get; set; }
        public string message { get; set; }
        public DateTime timeStamp { get; set; }
        public string level { get; set; }
        public int customerId { get; set; }
        [NotMapped]
        public string Name { get; set; }
    }

    public class LogModelVM
    {
        public int SelectedCustomer { get; set; }
        public IEnumerable<SelectListItem> CustomerList { get; set; }
        public string Message { get; set; } 
        public IPagedList<LogModel> Logs { get; set; }
    }

    public class LogDBContext:DbContext
    {
        public LogDBContext() : base("MySqlConnection")
        {

        }

        public DbSet <LogModel> Log { get; set; }

        public IQueryable<LogModel> GetLogs()
        {
            return from log in Log
                   select log;
        }
    }
}

Controller

public class DbCustomerIds
{
    public List<DbCustomer> GetCustomerIds()
    {
        List<DbCustomer> Customers = new List<DbCustomer>();
        string queryString = "SELECT * FROM dbo.customers";
        SqlDataAdapter adapter = new SqlDataAdapter(queryString, System.Configuration.ConfigurationManager.ConnectionStrings["MySqlConnection"].ConnectionString);
        DataSet customers = new DataSet();
        adapter.Fill(customers, "Customers");

        foreach (DataRow item in customers.Tables[0].Rows)
        {
            DbCustomer cid = new DbCustomer();
            cid.FakeId = Convert.ToInt32(item["Id"]);
            cid.FakeName = Convert.ToString(item["Name"]);
            Customers.Add(cid);
        }
        return Customers;
    }
}

private IEnumerable<SelectListItem> GetCustomerIds()
{
    var DbCustomerIds = new DbCustomerIds();
    var customers = DbCustomerIds
                    .GetCustomerIds()
                    .Select(x =>
                            new SelectListItem
                            {
                                Value = x.FakeId.ToString(),
                                Text = x.FakeName
                            });
        return new SelectList(customers, "Value", "Text");
    }
}

[HttpPost]
    public PartialViewResult LogPartialView(string searchString, string searchString2, string currentFilter, string currentFilterz, int? page, string sortOrder)
    {
        if (Roles.IsUserInRole(WebSecurity.CurrentUserName, "Admin"))
        {
            Customer = GetCustomerIds();
            message = db.GetLogs();
            int pageSize = 10;
            int pageNumber = (page ?? 1);
            var logs = message.OrderByDescending(i => i.timeStamp).ToPagedList(pageNumber, pageSize);
            foreach (var log in logs)
                log.Name = Customer.Where(a => a.Value == log.customerId.ToString()).FirstOrDefault().Text;


        LogModelVM LMVM = new LogModelVM();
        LMVM.Logs = logs;
        LMVM.CustomerList = Customer;
        return PartialView("_LogPartialLayout", LMVM);
    }
LogModelVM LMVM = new LogModelVM();
        LMVM.Logs = logs;
        LMVM.CustomerList = Customer;
        return PartialView("_LogPartialLayout", LMVM);
}

_LogPartialLayout

@model ASDMVC.Models.LogModelVM
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@if (Roles.IsUserInRole(WebSecurity.CurrentUserName, "Admin"))
{
    <table class="table">
        <tr>
            <th id="tableth">
                message

            </th>
            <th id="tableth">
                timestamp
            </th>
            <th id="tableth">
                level
            </th>
            <th id="tableth">
                customerId
            </th>
            <th id="tableth">
                customerName
            </th>
        </tr>
        @foreach (var item in Model.Logs)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.message)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.timeStamp)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.level)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.customerId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
            </tr>
        }
    </table>
}
@if (Roles.IsUserInRole(WebSecurity.CurrentUserName, "Member"))
{
    <table class="table">
        <tr>
            <th id="tableth">
                message

            </th>
            <th id="tableth">
                timestamp
            </th>
            <th id="tableth">
                level
            </th>

        </tr>

        @foreach (var item in Model.Logs)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.message)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.timeStamp)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.level)
                </td>
            </tr>
        }
    </table>
}

Page @(Model.Logs.PageCount < Model.Logs.PageNumber ? 0 : Model.Logs.PageNumber) of @Model.Logs.PageCount
@Html.PagedListPager(Model.Logs, page => Url.Action("LogPartialView", 
    new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter, currentFilterz = ViewBag.CurrentFilterz }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.ClassicPlusFirstAndLast,
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "POST",
            UpdateTargetId = "divLogs"
        }))

Any help would be apprechiated, sorry for the long question - I just wanted to get all the information which seems relevant to the situation.

Thanks in advance.

Current error when running:

[InvalidOperationException: The model item passed into the dictionary is of type 'PagedList.PagedList`1[NowasteWebPortalMVC.Models.LogModel]', but this dictionary requires a model item of type 'NowasteWebPortalMVC.Models.LogModelVM'.]

Answer 1

Create a view model with the properties you need in the view

public class LogModelVM
{
  public int SelectedCustomer { get; set; }
  public IEnumerable<SelectListItem> CustomerList { get; set; } // suggested name change
  public string Message { get; set; } // for the message search box?
  public IPagedList<NowasteWebPortalMVC.Models.LogModel> Logs { get; set; }
  .... // add properties for sortorder etc
}

Then in the controller method, initiaize a new LogModelVM and assign the values (e.g. model.Logs = logs;), and return the view model so that in the view you can use

@model yourAssembly.LogModelVM
....
@Html.DropDownListFor(m => m.SelectedCustomer, Model.CustomerList) // why change the id attribute?
....
@Html.PagedListPager(Model.Logs, page => Url.Action(...`

You should also consider adding the other properties such as sortOrder and currentfilter rather than using ViewBag

Side note: Ensure that all associated views, including the main view also use @model yourAssembly.LogModelVM