基于ID条件将3行SQL数据绑定至LaunchpadLoanStructure列表及表单

First, I’ll assume your LaunchpadLoanStructure class includes properties that map to the form fields—something like this (adjust if your actual properties differ):

public class LaunchpadLoanStructure
{
    public string LoanType { get; set; } // e.g., "Permanent", "Interim", "SBA504"
    public string Amortization { get; set; }
    public string Percentage { get; set; }
    public string Rate { get; set; }
}

I’ll cover two common approaches: server-side (using ASP.NET Razor) and client-side (using JavaScript/AJAX) to populate your form with the 3 rows of data from LoanStructureList.

Server-Side Approach (Razor View) #

If you’re rendering the form directly from your backend model, you can bind values directly to input fields using Razor syntax.

Option 1: Match by LoanType Property #

If your list uses a LoanType to distinguish each loan type, use FirstOrDefault to target the correct item (with null checks to avoid errors):

<form>
    <div class="form-group col-sm-12">
        <label class="col-sm-3 control-label">1st (Permanent) Loan :</label>
        <div class="col-sm-3">
            <input type="text" id="txtfirstamoritization" value="@Model.LoanStructureList.FirstOrDefault(x => x.LoanType == "Permanent")?.Amortization">
        </div>
        <div class="col-sm-3">
            <input type="text" id="txtfirstpercentage" value="@Model.LoanStructureList.FirstOrDefault(x => x.LoanType == "Permanent")?.Percentage">
        </div>
        <div class="col-sm-3">
            <input type="text" id="txtfirstrate" value="@Model.LoanStructureList.FirstOrDefault(x => x.LoanType == "Permanent")?.Rate">
        </div>
    </div>
    <div class="form-group col-sm-12">
        <label class="col-sm-3 control-label">2nd (Interim) Loan :</label>
        <div class="col-sm-3">
            <input type="text" id="txtsecondamoritization" value="@Model.LoanStructureList.FirstOrDefault(x => x.LoanType == "Interim")?.Amortization">
        </div>
        <div class="col-sm-3">
            <input type="text" id="txtsecondpercentage" value="@Model.LoanStructureList.FirstOrDefault(x => x.LoanType == "Interim")?.Percentage">
        </div>
        <div class="col-sm-3">
            <input type="text" id="txtsecondrate" value="@Model.LoanStructureList.FirstOrDefault(x => x.LoanType == "Interim")?.Rate">
        </div>
    </div>
    <div class="form-group col-sm-12">
        <label class="col-sm-3 control-label">SBA 504 Loan :</label>
        <div class="col-sm-3">
            <input type="text" id="txtSBAamoritization" value="@Model.LoanStructureList.FirstOrDefault(x => x.LoanType == "SBA504")?.Amortization">
        </div>
        <div class="col-sm-3">
        </div>
        <div class="col-sm-3">
            <input type="text" id="txtSBArate" value="@Model.LoanStructureList.FirstOrDefault(x => x.LoanType == "SBA504")?.Rate">
        </div>
    </div>
</form>

Option 2: Use List Indexes (If Order is Guaranteed) #

If your LoanStructureList is always ordered as [0] = Permanent, [1] = Interim, [2] = SBA, access items directly by index (with count checks to prevent out-of-bounds errors):

<form>
    <div class="form-group col-sm-12">
        <label class="col-sm-3 control-label">1st (Permanent) Loan :</label>
        <div class="col-sm-3">
            <input type="text" id="txtfirstamoritization" value="@(Model.LoanStructureList.Count > 0 ? Model.LoanStructureList[0].Amortization : "")">
        </div>
        <div class="col-sm-3">
            <input type="text" id="txtfirstpercentage" value="@(Model.LoanStructureList.Count > 0 ? Model.LoanStructureList[0].Percentage : "")">
        </div>
        <div class="col-sm-3">
            <input type="text" id="txtfirstrate" value="@(Model.LoanStructureList.Count > 0 ? Model.LoanStructureList[0].Rate : "")">
        </div>
    </div>
    <div class="form-group col-sm-12">
        <label class="col-sm-3 control-label">2nd (Interim) Loan :</label>
        <div class="col-sm-3">
            <input type="text" id="txtsecondamoritization" value="@(Model.LoanStructureList.Count > 1 ? Model.LoanStructureList[1].Amortization : "")">
        </div>
        <div class="col-sm-3">
            <input type="text" id="txtsecondpercentage" value="@(Model.LoanStructureList.Count > 1 ? Model.LoanStructureList[1].Percentage : "")">
        </div>
        <div class="col-sm-3">
            <input type="text" id="txtsecondrate" value="@(Model.LoanStructureList.Count > 1 ? Model.LoanStructureList[1].Rate : "")">
        </div>
    </div>
    <div class="form-group col-sm-12">
        <label class="col-sm-3 control-label">SBA 504 Loan :</label>
        <div class="col-sm-3">
            <input type="text" id="txtSBAamoritization" value="@(Model.LoanStructureList.Count > 2 ? Model.LoanStructureList[2].Amortization : "")">
        </div>
        <div class="col-sm-3">
        </div>
        <div class="col-sm-3">
            <input type="text" id="txtSBArate" value="@(Model.LoanStructureList.Count > 2 ? Model.LoanStructureList[2].Rate : "")">
        </div>
    </div>
</form>

Client-Side Approach (JavaScript/AJAX) #

If you’re loading data dynamically after the page loads, fetch the LoanStructureList as JSON and populate fields with JavaScript:

// Replace with your actual API endpoint to fetch LoanStructureList
fetch('/api/loanstructure')
    .then(response => {
        if (!response.ok) throw new Error('Failed to load loan data');
        return response.json();
    })
    .then(loanStructureList => {
        // Match each loan type to form fields
        const permanentLoan = loanStructureList.find(item => item.loanType === "Permanent");
        const interimLoan = loanStructureList.find(item => item.loanType === "Interim");
        const sbaLoan = loanStructureList.find(item => item.loanType === "SBA504");

        // Populate Permanent Loan fields
        if (permanentLoan) {
            document.getElementById('txtfirstamoritization').value = permanentLoan.amortization || '';
            document.getElementById('txtfirstpercentage').value = permanentLoan.percentage || '';
            document.getElementById('txtfirstrate').value = permanentLoan.rate || '';
        }

        // Populate Interim Loan fields
        if (interimLoan) {
            document.getElementById('txtsecondamoritization').value = interimLoan.amortization || '';
            document.getElementById('txtsecondpercentage').value = interimLoan.percentage || '';
            document.getElementById('txtsecondrate').value = interimLoan.rate || '';
        }

        // Populate SBA 504 Loan fields
        if (sbaLoan) {
            document.getElementById('txtSBAamoritization').value = sbaLoan.amortization || '';
            document.getElementById('txtSBArate').value = sbaLoan.rate || '';
        }
    })
    .catch(error => console.error('Error loading loan data:', error));

Notes: #

• Adjust property names (e.g., loanType vs LoanType) to match your JSON serialization settings.
• Add fallback values (|| '') to avoid showing undefined in empty fields.
• If your list is ordered instead of using LoanType, replace find with index access (e.g., loanStructureList[0]).

内容的提问来源于stack exchange，提问作者Ashok