I cannot fetch the data from viewmodel in ASP.NET Core MVC. My values for "input-asp-for" looks null in my view. How can I fix this problem?

Question

When I go to the view, I see some input asp-for fields as null, even though they aren't null. In ViewModel, the reference from other models are given properly, I don't know where the mistake is located. I am trying to take some data which are given in the login(name, phone, etc) as output. My data is not shown in localhost. Also my foreach section does not work.

Controller :

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Microsoft.VisualStudio.Web.CodeGenerators.Mvc.Templates.BlazorIdentity.Pages;
using NuGet.Protocol.Core.Types;
using Stripe.Climate;
using System.Diagnostics;
using System.Runtime.CompilerServices;
using static NuGet.Packaging.PackagingConstants;

namespace JewelryWeb.Areas.Customer.Controllers
{
    [Area("admin")]

    public class OrderController : Controller
    {
        private readonly IUnitOfWork _unitOfWork;
       
        public OrderController(IUnitOfWork unitOfWork)
        {
            _unitOfWork = unitOfWork;
        }

        public IActionResult Index(string status)
        {
            IEnumerable<OrderHeader> objOrderHeaders = _unitOfWork.OrderHeader.GetAll(includeProperties: "ApplicationUser").ToList();
            switch (status)
            {
                case "pending":
                    objOrderHeaders = objOrderHeaders.Where(u => u.PaymentStatus == SD.PaymentStatusDelayedPayment);
                    break;
                case "inprocess":
                    objOrderHeaders = objOrderHeaders.Where(u => u.OrderStatus == SD.StatusInProcess);
                    break;
                case "completed":
                    objOrderHeaders = objOrderHeaders.Where(u => u.OrderStatus == SD.StatusShipped);
                    break;
                case "approved":
                    objOrderHeaders = objOrderHeaders.Where(u => u.OrderStatus == SD.StatusApproved);
                    break;
                default:
                    break;
            }
            return View(objOrderHeaders);
        }

        public IActionResult Details(int orderId)
        {
            OrderVM orderVM = new()
            {
                OrderHeader = _unitOfWork.OrderHeader.Get(u => u.Id == orderId, includeProperties: "ApplicationUser"),
                OrderDetail = _unitOfWork.OrderDetail.GetAll(u => u.OrderHeaderId == orderId, includeProperties: "Product")
            };

            return View(orderVM);
        }
    }
}

ViewModel:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Jewelry.Models.ViewModels
{
    public class OrderVM
    {
        public OrderHeader? OrderHeader { get; set; }
        public IEnumerable <OrderDetail> ?OrderDetail { get; set; }
        public Product ?Product { get; set; }
        public ApplicationUser ?ApplicationUser { get; set; }
    }
}

OrderDetail Model:

using Microsoft.AspNetCore.Mvc.ModelBinding.Validation;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Jewelry.Models
{
    public class OrderDetail
    {
        public int Id { get; set; }
        [Required]
        public int OrderHeaderId { get; set; }
        [ForeignKey("OrderHeaderId")]
        [ValidateNever]
        public OrderHeader OrderHeader { get; set; }

        [Required]
        public int ProductId { get; set; }
        [ForeignKey("ProductId")]
        [ValidateNever]
        public Product Product { get; set; }
        public int Count { get; set; }
        public double Price { get; set; }
    }
}

OrderHeader Model:

using Microsoft.AspNetCore.Mvc.ModelBinding.Validation;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Jewelry.Models
{
    public class OrderHeader
    {
        public int Id { get; set; }
        public string? ApplicationUserId { get; set; }
        [ForeignKey("ApplicationUserId")]
        [ValidateNever]
        public ApplicationUser? ApplicationUser { get; set; }

        public DateTime OrderDate { get; set; }
        public DateTime ShippingDate { get; set; }
        public double OrderTotal { get; set; }
        public string? OrderStatus { get; set; }
        public string? PaymentStatus { get; set; }
        public string? TrackingNumber { get; set; }
        public string? Carrier { get; set; }
        public DateTime PaymentDate { get; set; }
        public DateOnly PaymentDueDate { get; set; }

        public string? SessionId { get; set; }
        public string? PaymentIntentId { get; set; }

        [Required]
        public string? PhoneNumber { get; set; }
        [Required]
        public string? StreetAddress { get; set; }
        [Required]
        public string? City { get; set; }
        [Required]
        public string? State { get; set; }
        [Required]
        public string? PostalCode { get; set; }
        [Required]
        public string? Name { get; set; }
        [Required]
        public int PostalCode1 { get; set; }

    }
}

View:

@model OrderVM

<form method="post">
    <br />
    <div class="container">
        <div class="card">
            <div class="card-header bg-dark text-light ml-0">
                <div class="container row">
                    <div class="col-12 d-none d-md-block col-md-6 pb-1">
                        <i class="fas fa-shopping-cart"></i> &nbsp; Order Summary
                    </div>
                    <div class="col-12 col-md-4 offset-md-2 text-right">
                        <a asp-action="Index" class="btn btn-outline-info form-control btn-sm">Back to Orders</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="container rounded p-2">
                    <div class="row">
                        <div class="col-12 col-lg-6 pb-4">
                            <div class="row">
                                <h4 class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="text-primary">PickUp Details:</span>
                                </h4>
                            </div>
                            <div class="row my-1">
                                <div class="col-3">Name</div>
                                <div class="col-9">
                                    @if(User.IsInRole(SD.Role_Admin)) 
                                    {
                                        <input asp-for="OrderHeader.Name" type="text" class="form-control" />
                                        <span asp-validation-for="OrderHeader.Name" class="text-danger"></span>
                                    }
                                    else{
                                        <input asp-for="OrderHeader.Name" readonly type="text" class="form-control" />
                                    }
                                   
                                </div>
                            </div>
                            <div class="row my-1">
                                <div class="col-3">Phone</div>
                                <div class="col-9">
                                    @if (User.IsInRole(SD.Role_Admin))
                                    {
                                        <input asp-for="OrderHeader.PhoneNumber" type="text" class="form-control" />
                                        <span asp-validation-for="OrderHeader.PhoneNumber" class="text-danger"></span>
                                    }
                                    else
                                    {
                                        <input asp-for="OrderHeader.PhoneNumber" readonly type="text" class="form-control" />
                                    }
                                </div>
                            </div>
                            <div class="row my-1">
                                <div class="col-3">Address</div>
                                <div class="col-9">
                                    @if (User.IsInRole(SD.Role_Admin))
                                    {
                                        <input asp-for="OrderHeader.StreetAddress" type="text" class="form-control" />
                                        <span asp-validation-for="OrderHeader.StreetAddress" class="text-danger"></span>
                                    }
                                    else
                                    {
                                        <input asp-for="OrderHeader.StreetAddress" readonly type="text" class="form-control" />
                                    }
                                </div>
                            </div>
                            <div class="row my-1">
                                <div class="col-3">City</div>
                                <div class="col-9">
                                    @if (User.IsInRole(SD.Role_Admin))
                                    {
                                        <input asp-for="OrderHeader.City" type="text" class="form-control" />
                                        <span asp-validation-for="OrderHeader.City" class="text-danger"></span>
                                    }
                                    else
                                    {
                                        <input asp-for="OrderHeader.City"readonly type="text" class="form-control" />
                                    }
                                </div>
                            </div>
                            <div class="row my-1">
                                <div class="col-3">State</div>
                                <div class="col-9">
                                    @if (User.IsInRole(SD.Role_Admin))
                                    {
                                        <input asp-for="OrderHeader.State" type="text" class="form-control" />
                                        <span asp-validation-for="OrderHeader.State" class="text-danger"></span>
                                    }
                                    else
                                    {
                                        <input asp-for="OrderHeader.State" readonly type="text" class="form-control" />
                                    }
                                </div>
                            </div>
                            <div class="row my-1">
                                <div class="col-3">Zip Code</div>
                                <div class="col-9">
                                    @if (User.IsInRole(SD.Role_Admin))
                                    {
                                        <input asp-for="OrderHeader.PostalCode" type="text" class="form-control" />
                                        <span asp-validation-for="OrderHeader.PostalCode" class="text-danger"></span>
                                    }
                                    else
                                    {
                                        <input asp-for="OrderHeader.PostalCode" readonly type="text" class="form-control" />
                                    }
                                </div>
                            </div>
                            <div class="row my-1">
                                <div class="col-3">Email</div>
                                <div class="col-9">
                                        <input asp-for="OrderHeader.ApplicationUser.Email" readonly type="text" class="form-control" />

                            </div>
                            </div>
                            <div class="row my-1">
                                <div class="col-3">Order Date</div>
                                <div class="col-9">
                                        <input value="@Model.OrderHeader?.OrderDate.ToShortDateString()" readonly type="text" class="form-control" />
                                </div>
                            </div>
                            <div class="row my-1">
                                <div class="col-3">Carrier</div>
                                <div class="col-9">
                                    @if (User.IsInRole(SD.Role_Admin))
                                    {
                                        <input asp-for="OrderHeader.Carrier" type="text" class="form-control" />
                                     
                                    }
                                    else
                                    {
                                        <input asp-for="OrderHeader.Carrier" readonly type="text" class="form-control" />
                                    }
                                </div>
                            </div>
                            <div class="row my-1">
                                <div class="col-3">Tracking</div>
                                <div class="col-9">
                                    @if (User.IsInRole(SD.Role_Admin))
                                    {
                                        <input asp-for="OrderHeader.TrackingNumber" type="text" class="form-control" />
                                         
                                    }
                                    else
                                    {
                                            <input asp-for="OrderHeader.TrackingNumber" readonly type="text" class="form-control" />
                                    }
                                </div>
                            </div>
                            <div class="row my-1">
                                <div class="col-3">Shipping Date</div>
                                <div class="col-9">
                                        <input value="@Model.OrderHeader?.ShippingDate.ToShortDateString()" readonly type="text" class="form-control" />

                                </div>
                            </div>

                                @if (User.IsInRole(SD.Role_Admin))
                                {
                                    <div class="row my-1">
                                        <div class="col-3">Session ID</div>
                                        <div class="col-9">
                                                <input asp-for="OrderHeader.SessionId" readonly type="text" class="form-control" />


                                               
                                        </div>
                                    </div>
                                    <div class="row my-1">
                                        <div class="col-3">Payment Intent ID</div>
                                        <div class="col-9">

                                                <input asp-for="OrderHeader.PaymentIntentId"  readonly type="text" class="form-control" />
                                    </div>
                                  </div>  
                                }
                         
                                <div class="row my-1">

                                    @if(Model.OrderHeader?.SessionId == null)
                                    {
                                        <div class="col-3">Payment Due Date</div>
                                        <div class="col-9">
                                                <input asp-for="@Model.OrderHeader.?PaymentDueDate.ToShortDateString()"readonly type="text" class="form-control" />

                                        </div>
                                    }
                                   
                                 else{
                                <div class="col-3">Payment Date</div>
                                    <div class="col-9">
                                        <input asp-for="@Model.OrderHeader.PaymentDate.ToShortDateString()" readonly type="text" class="form-control" />

                                    </div>
                                 }
                            </div>
                            <div class="row my-1">
                                <div class="col-3">Payment Status</div>
                                <div class="col-9">
                                        <input asp-for="OrderHeader.PaymentStatus" readonly type="text" class="form-control" />
                                </div>
                            </div>
                            <input type="submit" class="btn btn-warning form-control my-1" value="Update Order Details" />
                        </div>
                        <div class="col-12 col-lg-5 offset-lg-1">
                            <h4 class="d-flex justify-content-between align-items-center mb-3">
                                <span class="text-primary">Order Summary</span>
                            </h4>
                            <label class="btn btn-outline-primary form-control my-2">Order Status - @Model.OrderHeader?.OrderStatus</label>

                            <ul class="list-group mb-3">
                                @foreach (var detail in Model.OrderDetail)
                                {
                                    <li class="list-group-item d-flex justify-content-between p-2">
                                        <div class="row container">
                                            <div class="col-8">

                                                <h6 class="my-0 text-primary">@detail.Product.Title</h6>
                                                <small class="text-muted">Price : @detail.Price.ToString("c")</small><br />
                                                <small class="text-muted">Quantity : @detail.Count</small>
                                            </div>
                                            <div class="col-4 text-end">
                                                <p class="text-success">@((detail.Count * detail.Price).ToString("c"))</p>
                                            </div>
                                        </div>
                                    </li>
                                }
                                <li class="list-group-item bg-primary">
                                    <div class="row container">
                                        <div class="col-6">
                                            <h5 class="text-white">TOTAL </h5>
                                        </div>
                                        <div class="col-6 text-end">
                                            <h5 class="text-white">@Model.OrderHeader?.OrderTotal.ToString("c")</h5>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <input type="submit" class="btn btn-success form-control my-1" value="Pay Now" />
                            <input type="submit" class="btn btn-primary form-control my-1" value="Start Processing" />
                            <input type="submit" class="btn btn-primary form-control my-1" value="Ship Order" />
                            <input type="submit" class="btn btn-danger form-control my-1" value="Cancel Order" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

I tried to declare some fields as nullable and added a new migration but it didn't change at all. I was expecting it to be fixed, and I also looked for the SQL database, the values appears there. It is not null.

Tiny Wang · Accepted Answer · 2024-06-26 09:12:05Z

0

Maybe we can try to add this line @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers before @model OrderVM. I deduce it's due to taghelper didn't work.

Your page loaded well and just no value in the input box, so that it might result from no data was queried out from database, I mean codes below doesn't get data. You might debug your code to check it.

OrderVM orderVM = new()
            {
                OrderHeader = _unitOfWork.OrderHeader.Get(u => u.Id == orderId, includeProperties: "ApplicationUser"),
                OrderDetail = _unitOfWork.OrderDetail.GetAll(u => u.OrderHeaderId == orderId, includeProperties: "Product")
            };

If the model was set data correctly, we can see whether the taghelper worked or not because I noticed that you have [Area] in your controller and I faced the same issue before. In this case, we can press F12 in the browser to see the rendered HTML elements, whether the asp-for is still existed in the page. If so, then let's add the code I shared at the beginning into the View, or adding another _ViewImports.cshtml in the Area folder.

============= My Test =======================

Could you pls help confirm whether your orderVM has data bind to it? And could you please press F12 in the browser to see whether there's any exception message?

public IActionResult Details(int orderId)
{
    OrderVM orderVM = new OrderVM
    {
        OrderHeader = new OrderHeader {Name="order header name", PaymentDate=DateTime.Now },
        OrderDetail = new List<OrderDetail> { new OrderDetail { Count = 12}, new OrderDetail { Count = 13 } },
    };

    return View(orderVM);
}

=========================

If we have any error in the client side, we shall see error in the console window.

If taghelper didn't work, we can see asp-for still exist in html element. The first screenshot below is the test result that I comment the taghelper, while the second one has @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers in the view.

edited Jun 26, 2024 at 9:12

answered Jun 26, 2024 at 6:26

Tiny Wang

16.8k2 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Büşra Nur Over a year ago

I tried this but it didn't work, I also had taghelpers on my viewimports sections. Thank you. Do you have any other possible solution?

Büşra Nur Over a year ago

Thank you that worked, but what if I want to fetch the existing data that exists in the previous records, can I take them also to the input fields? I shared this issue on the latest picture. I marked them with yellow marker.

Büşra Nur Over a year ago

I actually justified that row, it will redirect me to the detail page. Yes, I meant that way. Then I can look for the Youtube for other solutions about e-commerce apps, how did they fetch, maybe there is another way to create a order summary page. Thank you so much.

Büşra Nur Over a year ago

You're welcome, thanks to you for your support. But your method is also a good option to create a sample data, it's a good idea. Yes, that happened to me, I have a project for my software development course which is deadlined at the end of this week. This project is about that. No, I don't have other questions. Thanks for your help.

Büşra Nur Over a year ago

You're welcome! I hope it will be completed as soon as possible.

|

Collectives™ on Stack Overflow

I cannot fetch the data from viewmodel in ASP.NET Core MVC. My values for "input-asp-for" looks null in my view. How can I fix this problem?

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related