मैं एक नई वस्तु जोड़ने के लिए एक Blazor पृष्ठ पर काम कर रहा हूँ। ऑब्जेक्ट "रिपेयरऑर्डर" में ऑब्जेक्ट "रिपेयरसेक्शन" की सूची है।

पृष्ठ पर एक क्षेत्र है जो "RepairOrder" सूची के माध्यम से लूप करेगा। "RepairSections" और तत्व दिखाएगा:

   <div class="col-lg-10">
        @if (sections.Count > 0)
        {
            foreach (var sec in sections)
            {
                <h3>Section @sec.SectionNumber</h3>

                <div class="row">
                    <div class="col-lg-1"></div>
                    <div class="col-lg-5">
                        <label for="Failure" class="control-label">Failure: </label>
                        <input for="Failure" class="form-control" bind="@sec.Failure" readonly />
                    </div>
                    <div class="col-lg-1"></div>

                    <div class="col-lg-1">
                        <label><input type="checkbox" checked="@IsCApprovedChecked(sec)" />   Warranty</label>
                    </div>
                    <div class="col-lg-2">
                        <label><input type="checkbox" value="@IsWarrantyChecked(sec)" />   Repair Approved</label>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-1"></div>
                    <div class="col-lg-10">
                        <label for="AdminComments" class="control-label">Admin Comments: </label>
                        <input for="AdminComments" class="form-control" bind="@sec.AdminComments" readonly />
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-1"></div>
                    <div class="col-lg-10">
                        <label for="TechComments" class="control-label">Tech Comments: </label>
                        <input for="TechComments" class="form-control" bind="@sec.TechComments" readonly />
                    </div>
                </div>
            }
        }
    </div>

सूची में सभी मौजूदा अनुभागों को पृष्ठ में जोड़ने के बाद, एक नया अनुभाग जोड़ने के लिए एक बटन होता है। जब बटन क्लिक किया जाता है, तो फ़ंक्शन एक संवाद के रूप में एक मोडल खोलने के लिए एक बूल मान को सत्य में बदल देता है। मोडल में एक नया अनुभाग तत्व इनपुट करने के लिए फ़ील्ड होते हैं।

मोडल खोलने के लिए बुलाया गया फ़ंक्शन:

protected void AddSectionCalled()
{
    _newSection = new RepairSection();
    this.isAddNew = true;
}

मोडल कोड:

<div class="modal" tabindex="-1" style="display:block" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">New Repair Section</h3>
                    <button type="button" class="close" onclick="@CloseModal"><span aria-hidden="true">X</span></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row">
                            <div class="col-lg-1"></div>
                            <div class="col-lg-2">
                                <label for="sectionLetter" class="control-label">Section: </label>
                                <input for="sectionLetter" class="form-control" bind="@_newSection.SectionNumber" />
                            </div>
                            <div class="col-lg-1"></div>

                            <div class="col-lg-2">
                                <label><input type="checkbox" bind="@_newSection.Warranty" />   Warranty</label>
                            </div>
                            <div class="col-lg-2">
                                <label><input type="checkbox" bind="@_newSection.CustomerApproved" />   Repair Approved</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-1"></div>
                            <div class="col-lg-10">
                                <label for="_failure" class="control-label">Failure: </label>
                                <input for="_failure" class="form-control" bind="@_newSection.Failure"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-1"></div>
                            <div class="col-lg-10">
                                <label for="_adminComments" class="control-label">Admin Comments: </label>
                                <input for="_adminComments" class="form-control" bind="@_newSection.AdminComments" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-1"></div>
                            <div class="col-lg-10">
                                <label for="_techComments" class="control-label">Tech Comments: </label>
                                <input for="_techComments" class="form-control" bind="@_newSection.TechComments"/>
                            </div>
                        </div>
                        <br/>
                        <button class="btn btn-primary float-left" onclick="AddNewSection">Add New Section</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

जब "नया खंड जोड़ें" बटन पर क्लिक किया जाता है, तो मोडल में एकत्रित जानकारी से बनाई गई "_newSection" ऑब्जेक्ट को "अनुभाग" सूची में जोड़ा जाता है जिसे मूल रूप से पृष्ठ लोड होने पर लूप किया गया था।

   private void AddNewSection()
        {
            sections.Add(_newSection);
            this.StateHasChanged();            
            this.isAddNew = false;

        }

जैसा कि आप देख सकते हैं कि मैंने अनुभागों की सूची में नया अनुभाग जोड़े जाने के बाद "StateHasChanged ()" जोड़ा है। हालांकि पृष्ठ नया खंड प्रदर्शित करने के लिए प्रस्तुत नहीं करता है।

मैंने मूल रूप से "OnInitAsync ()" पृष्ठ पर डमी डेटा बनाया था जो प्रदर्शित होने से पहले डेटा के साथ अनुभाग सूची लोड करता था। इस तरह मैं यह सुनिश्चित कर सकता हूं कि पृष्ठ ने सूची में जो सही ढंग से प्रदर्शित किया था।

उपयोगकर्ता द्वारा सूची में एक नई वस्तु जोड़ने के बाद मैं सूची में जानकारी को फिर से कैसे प्रस्तुत कर सकता हूं?

---- संपादित करें-----

नीचे पूरे पृष्ठ के लिए कोड है। मैं सप्ताहांत पर इसे कम करने की कोशिश करूंगा, हालांकि यहां वास्तव में बहुत कुछ नहीं है।

 @page "/AddRepairOrder"
@using ShopLiveWebVersion2._0.Models
@using ShopLiveWebVersion2._0.DataAccess
@using ShopLiveWebVersion2._0.Services
@using ShopLiveWebVersion2._0.Data
@inject IUriHelper UriHelper
@inject RepairOrderContext context

<div class="row">
    <div class="col-lg-1"></div>
    <div class="col-lg-10"><h1>Create New Repair Order</h1></div>
</div>
<br /><br />
<form id="AddROForm">
    <div class="form-group">

        <div class="row">
            <div class="col-lg-1"></div>
            <div class="col-lg-2">
                <label for="ControlNumber" class="control-label">Repair Order #: </label>
                <input for="ControlNumber" class="form-control" bind="@ro.ControlNumber" maxlength="15" required />
            </div>
            <div class="col-lg-1">
                <label for="TagNumber" class="control-label">Tag #: </label>
                <input for="TagNumber" class="form-control" bind="@ro.TagNumber" maxlength="8" />
            </div>
            <div class="col-lg-3">
                <label for="VIN" class="control-label">VIN: </label>
                <input for="VIN" class="form-control" bind="@ro.VIN" maxlength="18" />
                @*<small id="Chasis" class="form-text text-muted">@ro.GetChassisNumber()</small> figure out how to get chassis from vin after box looses focus*@
            </div>
            <div class="col-lg-2">
                <label for="Make" class="control-label">Make: </label>
                <input for="Make" class="form-control" bind="@ro.Make" maxlength="30" />
            </div>
            <div class="col-lg-2">
                <label for="Madel" class="control-label">Model: </label>
                <input for="Madel" class="form-control" bind="@ro.Madel" maxlength="30" />
            </div>
        </div>

        <div class="row AddRow">
            <div class="col-lg-1"></div>
            <div class="col-lg-4">
                <label for="Customer" class="control-label">Customer: </label>
                <input for="Custoemr" class="form-control" bind="@ro.Customer" maxlength="50" />
            </div>
            <div class="col-lg-2">
                <label asp-for="Location" class="control-label">Vehicle Location: </label>
                <select asp-for="Location" class="form-control" bind="@ro.Location">
                    <option value="">-- Select a Location --</option>
                    @foreach (var loc in Location)
                    {
                        <option value="@loc">@loc</option>
                    }
                </select>
            </div>
            <div class="col-lg-2">
                <label asp-for="Assigned" class="control-label">Assigned: </label>
                <select asp-for="Assigned" class="form-control" bind="@ro.Assigned">
                    <option value="">-- Select an Employee --</option>
                    @foreach (var emp in Employee)
                    {
                        <option value="@emp">@emp</option>
                    }
                </select>
            </div>
            <div class="col-lg-2">
                <label asp-for="Status" class="control-label">Status: </label>
                <select asp-for="Status" class="form-control" bind="@ro.Status">
                    <option value="">-- Select a Status --</option>
                    @foreach (var st in Status)
                    {
                        <option value="@st">@st</option>
                    }
                </select>
            </div>
        </div>
        <br />
        <div class="row"><div class="col-lg-1"></div><div class="col-lg-10"><hr id="Double" /></div></div>
        <div class="row">
            <div class="col-lg-1"></div>
            <div class="col-lg-10">
                @if (sections.Count > 0)
                {
                    foreach (var sec in sections)
                    {
                        <h3>Section @sec.SectionNumber</h3>

                        <div class="row">
                            <div class="col-lg-1"></div>
                            <div class="col-lg-5">
                                <label for="Failure" class="control-label">Failure: </label>
                                <input for="Failure" class="form-control" bind="@sec.Failure" readonly />
                            </div>
                            <div class="col-lg-1"></div>

                            <div class="col-lg-1">
                                <label><input type="checkbox" checked="@IsCApprovedChecked(sec)" />   Warranty</label>
                            </div>
                            <div class="col-lg-2">
                                <label><input type="checkbox" value="@IsWarrantyChecked(sec)" />   Repair Approved</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-1"></div>
                            <div class="col-lg-10">
                                <label for="AdminComments" class="control-label">Admin Comments: </label>
                                <input for="AdminComments" class="form-control" bind="@sec.AdminComments" readonly />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-1"></div>
                            <div class="col-lg-10">
                                <label for="TechComments" class="control-label">Tech Comments: </label>
                                <input for="TechComments" class="form-control" bind="@sec.TechComments" readonly />
                            </div>
                        </div>
                    }
                }
            </div>
        </div>
        <div class="row"></div>
    </div>    @*Form-group*@
</form>
<div class="row">
    <div class="col-lg-1"></div>
    <div class="col-lg-9">
        <br /><br />
        <button class="btn btn-primary float-right" onclick="@AddSectionCalled">Add New Section</button>
    </div>
</div>

@if (isAddNew == true)
{
    <div class="modal" tabindex="-1" style="display:block" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">New Repair Section</h3>
                    <button type="button" class="close" onclick="@CloseModal"><span aria-hidden="true">X</span></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row">
                            <div class="col-lg-1"></div>
                            <div class="col-lg-2">
                                <label for="sectionLetter" class="control-label">Section: </label>
                                <input for="sectionLetter" class="form-control" bind="@_newSection.SectionNumber" />
                            </div>
                            <div class="col-lg-1"></div>

                            <div class="col-lg-2">
                                <label><input type="checkbox" bind="@_newSection.Warranty" />   Warranty</label>
                            </div>
                            <div class="col-lg-2">
                                <label><input type="checkbox" bind="@_newSection.CustomerApproved" />   Repair Approved</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-1"></div>
                            <div class="col-lg-10">
                                <label for="_failure" class="control-label">Failure: </label>
                                <input for="_failure" class="form-control" bind="@_newSection.Failure" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-1"></div>
                            <div class="col-lg-10">
                                <label for="_adminComments" class="control-label">Admin Comments: </label>
                                <input for="_adminComments" class="form-control" bind="@_newSection.AdminComments" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-1"></div>
                            <div class="col-lg-10">
                                <label for="_techComments" class="control-label">Tech Comments: </label>
                                <input for="_techComments" class="form-control" bind="@_newSection.TechComments" />
                            </div>
                        </div>
                        <br />
                        <button class="btn btn-primary float-left" onclick="AddNewSection()">Add New Section</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
}

@functions
{


    private RepairOrder ro;
    private RepairOrder incomingRO;
    private RepairOrderDataAccess RoData;
    private string chassis;
    private List<string> Location;
    private List<string> Employee;
    private List<string> Status;
    private FileService fileService;
    private List<RepairSection> sections;
    private bool isAddNew;

    //for new repair section modal
    private RepairSection _newSection;

    protected override async Task OnInitAsync()
    {
        ro = new RepairOrder();
        Location = new List<string>();
        Employee = new List<string>();
        Status = new List<string>();
        sections = new List<RepairSection>();
        isAddNew = false;
        fileService = new FileService();
        RoData = new RepairOrderDataAccess(context);
        await LoadData();

    }

    private async Task LoadData()
    {
        Location = await Task.Run(() => fileService.ReadLocation());
        Employee = await Task.Run(() => fileService.ReadEmployees());
        Status = await Task.Run(() => fileService.ReadStatus());

    }

    public string IsCApprovedChecked(RepairSection sc)
    {
        if (sc.CustomerApproved == true)
        {
            return "checked";
        }
        else
        {
            return "";
        }
    }

    public string IsWarrantyChecked(RepairSection sc)
    {
        if (sc.Warranty == true)
        {
            return "checked";
        }
        else
        {
            return "";
        }
    }

    protected void AddSectionCalled()
    {
        _newSection = new RepairSection();
        this.isAddNew = true;
    }

    private void AddNewSection()
    {
        sections.Add(_newSection);
        this.StateHasChanged();            
        this.isAddNew = false;

    }



    private void CloseModal()
    {
        this.isAddNew = false;
    }
2
Dwayne Barsotta 20 जून 2019, 06:25

1 उत्तर

सबसे बढ़िया उत्तर

मोडल फॉर्म पर बटन के onclick ईवेंट को बाध्य करने के तरीके में समस्या है।

आपके पास onclick="AddNewSection()" है - इसे इस तरह से लिखने की व्याख्या एक शुद्ध जावास्क्रिप्ट कॉल के रूप में की जाएगी और यदि आप अपने ब्राउज़र टूल में DOM का निरीक्षण करते हैं, तो आपको बटन पर onclick="AddNewSection()" दिखाई देने की संभावना है।

आपके पास onclick="@AddNewSection" होना चाहिए - इस तरह, Blazor onclick ईवेंट को आपकी C# विधि से जोड़ देगा।

2
Mister Magoo 20 जून 2019, 16:41