简体   繁体   中英

OnInitialized null object with broke window in visual studio

1 : ( https://i.stack.imgur.com/MsRx3.pngim ) using blazor 5.0 server side

when i try to load page product i got object null with broke window in visual studio

After a few hours, I knew where the problem came from, but I didn't know what is the solution

when i remove the OnInitialized method everything work fine again, and im sure there is no null object in foreach

the brokewindow come after foreach finish

here the code

List<ProductModel> ProductModels { get; set; } = new List<ProductModel>();

protected override void OnInitialized()
{
    var products = mapper.Map<IEnumerable<Product>, IEnumerable<ProductModel>>(ProductRepository.GetAll().Result);

    ProductModels = products.ToList();
}

then i have foreach to load the product from the list

@foreach (var product in ProductModels)
{
    <div id="product_conent_-957477490" class="product-box">
        <EditForm Model="product" OnValidSubmit="()=>SaveProduct(product)" class="product-form">
            <DataAnnotationsValidator />
            <div class="thumbnail save-product">
                <button type="button" @onclick="()=>ProductModels.Remove(product)" class="btn btn-delete-circle btn-delete-product"><i class="sicon-cancel"></i></button>
                <div class="caption caption-small">
                    <div class="product-thumb-wrapper">
                        <div class="thumb">
                            <div class="thumb-mask">
                                <img @onclick="()=> { showModal = true; IdModal = product.ID;}" src="@ImageModels.FirstOrDefault(w=>w.ID == product.ID).ImageUrl" alt="IMG">
                                @if (showModal && IdModal == product.ID)
                                {

                                    //select the current product and show only one modal
                                    <Shop.Pages.Modals.AddPictureModal OnShowModal="()=>showModal = false" productModel="product" OnChangeInput="HandleImageUpload" OnDeleteButton="HandleImageDelete"></Shop.Pages.Modals.AddPictureModal>

                                }



                            </div>
                            <div class="product-check rec-checkbox rec-checkbox--default rec-checkbox--large rec-checkbox--primary-bg" style="display: none;">
                                <input type="checkbox" name="product_-957477490" id="product_-957477490" class="product-check">
                                <label for="product_-957477490">
                                    <span class="product-type">منتج جاهز</span>
                                </label>
                            </div>
                            <button @onclick="()=> { showModal = true; IdModal = product.ID;}" type="button" class="product_image_btn">
                                <i class="sicon-image"></i> <span>إضافة صورة او فيديو</span>
                            </button>
                            <button type="button" class="pin_btn " style="display: none;"><i class="sicon-thumbtack"></i></button>
                        </div>
                        <div class="product-name-type prfw">
                            <div id="product_name_-957477490" class="form-group tooltip-toggle trans top mb-0">
                                <div class="input-group">
                                    <span class="tooltip-content">
                                        <i class="sicon-packed-box"></i>
                                        منتج جاهز
                                    </span>
                                    <span class="input-group-addon input-group-addon-small">
                                        <i class="sicon-packed-box"></i>
                                    </span>
                                    <InputText @bind-Value="product.Name" placeholder="منتج جاهز - ادخل اسم المنتج  " class="form-control"></InputText>
                                </div>
                                <span style="color:red" class="help-block cs">
                                    <ValidationMessage For="()=>product.Name" />

                                </span>
                                <span class="help-block cs" style="display: none;">

                                </span>
                            </div>
                            <div class="form-group product-price-small-screen">
                                <div class="input-group">
                                    <span class="input-group-addon input-group-addon-small">
                                        <i class="sicon-dollar-coin-stack"></i>
                                    </span>
                                    <InputText @bind-Value="product.Price" placeholder="السعر" class="form-control _parse_parseArabicNumbers"></InputText>
                                    <span class="input-group-addon">ر.س</span>

                                </div>
                                <span style="color:red" class="help-block cs">
                                    <ValidationMessage For="()=>product.Price" />
                                </span><!---->
                            </div>
                        </div>
                    </div>
                    <div class="product-fields-wrapper prfw">
                        <div class="form-group product-price-large-screen">
                            <div class="input-group">
                                <span class="input-group-addon input-group-addon-small"><i class="sicon-dollar-coin-stack"></i></span>
                                <InputText @bind-Value="product.Price" placeholder="السعر" class="form-control _parseArabicNumbers"></InputText>
                                <span class="input-group-addon">ر.س</span>

                            </div>
                            <span style="color:red" class="help-block cs">
                                <ValidationMessage For="()=>product.Price" />
                            </span><!---->
                        </div>
                        <div class="form-group">
                            <div class="input-group product-quantities product-quantities--products-group">
                                <div>
                                    <span class="input-group-addon input-group-addon-small"><i class="sicon-box-bankers"></i></span>
                                    <InputText @bind-Value="product.Quantity" placeholder="الكمية المتوفرة" class="form-control product_quantity _parseArabicNumbers"></InputText>
                                </div>

                                <button type="button" class="rec-btn btn-tiffany btn-notify"><i class="sicon-bell-time"></i></button>
                                <button type="button" class="btn btn-tiffany btn-infinite">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"><path d="M 8 8 C 3.6102416 8 0 11.595515 0 16 C 0 20.400585 3.599415 24 8 24 C 10.646 24 12.420344 22.745203 13.777344 21.033203 C 13.147344 20.063203 12.616672 19.057234 12.138672 18.115234 C 10.996672 19.940234 9.828 21 8 21 C 5.220585 21 3 18.779415 3 16 C 3 13.224485 5.2377584 11 8 11 C 9.4265669 11 10.267624 11.520682 11.15625 12.525391 C 12.044876 13.530099 12.834942 15.048526 13.652344 16.673828 C 14.469745 18.29913 15.315394 20.031983 16.585938 21.464844 C 17.85648 22.897705 19.696851 24 22 24 C 26.362802 24 30 20.414234 30 16 C 30 11.599415 26.400585 8 22 8 C 19.35 8 17.576703 9.2652813 16.220703 10.988281 C 16.849703 11.961281 17.379422 12.969109 17.857422 13.912109 C 19.003422 12.069109 20.172 11 22 11 C 24.779415 11 27 13.220585 27 16 C 27 18.765766 24.719198 21 22 21 C 20.566649 21 19.72091 20.477295 18.830078 19.472656 C 17.939247 18.468017 17.14913 16.95087 16.332031 15.326172 C 15.514933 13.701474 14.671546 11.969901 13.404297 10.537109 C 12.137048 9.1043186 10.298933 8 8 8 z"></path></svg>
                                </button>
                                <div class="rec-list rec-list--horizental left-arrow" style="display: none;">
                                    <span>نبهني عند وصول الكمية إلى</span>
                                    <input type="text" id="low_quantity_0" placeholder="ادخل اقل قيمة..." class="form-control _parseArabicNumbers">
                                </div> <!---->
                            </div>
                            <span style="color:red" class="help-block cs">
                                <ValidationMessage For="()=>product.Name" />
                            </span><!---->
                        </div>
                        <div class="form-group ">
                            <div class="input-group">

                                <select @bind="product.IDCategory" @onclick="UpdateSelectCategory" class="vue-treeselect__control">
                                    <option selected>اختر تصنيف المنتج</option>
                                    @foreach (var category in CategoryModels)
                                    {
                                        <option value="@category.ID">@category.Name</option>
                                    }
                                </select>


                                <div class="input-group-btn">
                                    <button type="button" data-toggle="modal" data-target="#new_category" class="btn btn-tiffany btn-icon btn-add-category">
                                        اضف تصنيف
                                    </button>

                                </div>





                                <!---->


                            </div>
                        </div>
                    </div>
                    <div class="controls-wrapper">
                        <div class="options-wrapper">
                            <div class="options">
                                <div class="form-group">

                                    <button type="button" data-toggle="modal" data-target="#modal_product_options" class="btn border-slate text-slate-800 btn-flat btn-xs product-options-btn">
                                        <i class="sicon-tune-alt"></i>
                                        بيانات المنتج
                                    </button>
                                </div>
                            </div> <!---->
                        </div>
                        <div class="submit-wrapper">
                            <button type="submit" class="btn btn-tiffany btn-xs btn-full save-product btn-save">
                                حفظ
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </EditForm>
    </div>
}

ok the problem was from this line

<img @onclick="() => { showModal = true; IdModal = product.ID; }" src="@ImageModels.FirstOrDefault(w => w.ID == product.ID).ImageUrl" alt="IMG">

particulary from this @ImageModels.FirstOrDefault

thank you guys

First remember to initialize the list:

List<ProductModel> ProductModels { get; set; } = new List<ProductModel>();

Add this line:

 @if(ProductModels != null)
    {
     foreach (var product in ProductModels)
     ...

in your _Host.cshtml

<component type="typeof(App)" render-mode="ServerPrerendered" param-State="state" />

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM