InvalidOperationException: Error Being displayed due to incorrect List form being submitted

Question

I've been learning how to use the Xero API with my ASP Core MVC Project.

I have made a model for the Contact.cs which is declared as so:

 public class Contact
    {
        public string ContactID { get; set; }
        public string ContactStatus { get; set; }
        public string Name { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string EmailAddress { get; set; }
        public string SkypeUserName { get; set; }
        public string BankAccountDetails { get; set; }
        public string TaxNumber { get; set; }
        public string AccountsReceivableTaxType { get; set; }
        public string AccountsPayableTaxType { get; set; }
        public List<Address> Addresses { get; set; }
        public List<Phone> Phones { get; set; }
        public DateTime UpdatedDateUTC { get; set; }
        public bool IsSupplier { get; set; }
        public bool IsCustomer { get; set; }
        public string DefaultCurrency { get; set; }
    }

I then have my ContactViewModel.cs for a singular Contact which is as follows:

public class ContactViewModel
    {
        public bool isCustomer { get; set; }
        public bool isSupplier { get; set; }
    }

Finally, I have my ContactsViewModel.cs for the list of Contacts:

public class ContactsViewModel
    {
        public ContactViewModel[] Contacts { get; set; }


    }

I am trying to make an API call from the Contacts endpoint, but I do not want all the values displayed. My targetted output would look like so:

Contact 1 - Retailer
Contact 2 - Customer
Contact 3 - Retailer
... Etc

I have generated a Contacts razor view page that has the following code:

@model IEnumerable<XeroOAuth2Sample.Models.Contact>

@{
    ViewData["Title"] = "Contacts";
}

<h1>Contacts</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ContactID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ContactStatus)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FirstName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.LastName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.EmailAddress)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SkypeUserName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.BankAccountDetails)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TaxNumber)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AccountsReceivableTaxType)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AccountsPayableTaxType)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.UpdatedDateUTC)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.IsSupplier)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.IsCustomer)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DefaultCurrency)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ContactID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ContactStatus)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.EmailAddress)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SkypeUserName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.BankAccountDetails)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.TaxNumber)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.AccountsReceivableTaxType)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.AccountsPayableTaxType)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.UpdatedDateUTC)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.IsSupplier)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.IsCustomer)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DefaultCurrency)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>
        </tr>
}
    </tbody>
</table>

I am trying to display that output when users go to the localhost:5000/home/contacts page.

Within my HomeController.cs I have the following code:

[HttpGet]
[Authorize]
public IActionResult Contacts()
{
    var model = new Contact();

    return View(model);
}

But for some reason, I am being greeted with the following error

What is the cause for this? And how could I pass the List of users in a better way if the way I've done it is wrong?

Thank you all in advance

score 1 · Accepted Answer · answered Feb 28 '20 at 16:34

1

It looks like you're passing a single instance of the object instead of the array you declared. Try this following:

[HttpGet]
[Authorize]
public IActionResult Contacts()
{
    var model = new Contact();
    var contacts = new Contact[] { model };
    return View(contacts);
}

answered Feb 28 '20 at 16:34

John

1,240
9
13

Oh wow, this is now displaying the page and the table, even though it's empty. – zadders Feb 28 '20 at 16:41
You'll need to modify your controller to the xero api to populate your view model. – John Feb 28 '20 at 16:44
What do you mean? how would I go about doing this? – zadders Feb 28 '20 at 16:45
You'll need to consult their api documentation: https://developer.xero.com/documentation/api/contacts It also looks like that have some C# code samples: https://developer.xero.com/documentation/libraries/using-the-xero-api-with-c – John Feb 28 '20 at 16:47

InvalidOperationException: Error Being displayed due to incorrect List form being submitted

1 Answers1