C# 根据下拉列表的选定值更新表中的列表

我有一个公司选项的动态下拉列表，我有一个公司信息表。当我在公司下拉列表中更改公司时，我想更改我的表格列表。 此外，我知道我必须使用JavaScript，但我没有任何技巧。请帮帮我

这是我的CSHTML

@page
@model Fachinformationsdienst_Kundenportal.Pages.Information_listModel
@{
}
<div class="form-group col-md-4">
        <label for="inputState">Unternehmen</label>
        <select id="inputState" class="form-control" onchange="ChangeList(this)">
            <option selected>Wählen Sie die Firma aus...</option>
            @for (int i = 0; i < Model.companies.Count; i++)
            {
                <option>@Model.companies[i].FirmenKurzBezeichnung</option>
            }
        </select>
</div>

<table class="table table-striped" id="FachinfoTable">
    <thead>
        <tr>
            <th scope="col">Nr.</th>
            <th scope="col">Name</th>
            <th scope="col">Status</th>
            <th scope="col">Letzte Änderung</th>
            <th scope="col">Aktuelle Version</th>
            <th scope="col">Auftrag</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.fachinfos.Count; i++)
        {
            <tr>
                <th scope="row">@Model.fachinfos[i].FachinfoNummer</th>
                <td>@Model.fachinfos[i].FachinfoName</td>
                <td>@Model.fachinfos[i].Status</td>
                <td>@Model.fachinfos[i].Datum</td>
                <td>@Model.fachinfos[i].PdfVersion</td>
                <td>Thornton</td>
            </tr>
        }
    </tbody>
</table>
<script>

信息类

namespace Fachinformationsdienst_Kundenportal.Models
{
    public class Fachinfo
    {
        public int FachinfoNummer { get; set; }
        public string FachinfoName { get; set; }
        public string FirmenKurzBezeichnung { get; set; }
        public string Status { get; set; }
        public string StatusText { get; set; }
        public string Datum { get; set; }
        public string PdfVersion { get; set; }
    }
}

---

您可以使用局部视图来显示fachinfos列表，然后根据dropdownlist选择的值，使用JQuery Ajax动态更新局部视图。请参阅以下代码：

创建一个_fachinfoplateral.cshtml局部视图（不带页面模型）：

以下是初始数据：

public static class repo
{
    public static List<Company> GetCompanies()
    {
        return new List<Company>()
        {
            new Company(){ Rolle="admin", FirmenKurzBezeichnung="Microsoft"},
            new Company(){ Rolle="user", FirmenKurzBezeichnung="Google"},
            new Company(){ Rolle="admin", FirmenKurzBezeichnung="Alibaba"},
            new Company(){ Rolle="user", FirmenKurzBezeichnung="Amazon"},
            new Company(){ Rolle="admin", FirmenKurzBezeichnung="Facebook"},
        };
    }

    public static List<Fachinfo> GetFachinfos(string company)
    {
        var fachinfolist = new List<Fachinfo>()
        {
            new Fachinfo(){ FachinfoNummer=101, FachinfoName="AA", FirmenKurzBezeichnung="Microsoft", Status="Online", Datum= DateTime.Now.ToString()},
            new Fachinfo(){ FachinfoNummer=102, FachinfoName="BB", FirmenKurzBezeichnung="Google", Status="Online", Datum= DateTime.Now.ToString()},
            new Fachinfo(){ FachinfoNummer=103, FachinfoName="CC", FirmenKurzBezeichnung="Alibaba", Status="Online", Datum= DateTime.Now.ToString()},
            new Fachinfo(){ FachinfoNummer=104, FachinfoName="DD", FirmenKurzBezeichnung="Amazon", Status="Online", Datum= DateTime.Now.ToString()},
            new Fachinfo(){ FachinfoNummer=105, FachinfoName="EE", FirmenKurzBezeichnung="Facebook", Status="Online", Datum= DateTime.Now.ToString()},
            new Fachinfo(){ FachinfoNummer=106, FachinfoName="FF", FirmenKurzBezeichnung="Microsoft", Status="Online", Datum= DateTime.Now.ToString()},
            new Fachinfo(){ FachinfoNummer=107, FachinfoName="GG", FirmenKurzBezeichnung="Google", Status="Online", Datum= DateTime.Now.ToString()},
        };

        if (!string.IsNullOrEmpty(company))
        {
            fachinfolist = fachinfolist.Where(c => c.FirmenKurzBezeichnung == company).ToList();
        }

        return fachinfolist;
    }
}

公共静态类repo
{
公开静态上市公司（）
{
返回新列表（）
{
新公司（）{Rolle=“admin”，firmenkurzbezeichung=“Microsoft”}，
新公司（）{Rolle=“user”，firmenkurzbezeichung=“Google”}，
新公司（）{Rolle=“admin”，firmenkurzbezeichung=“Alibaba”}，
新公司（）{Rolle=“user”，firmenkurzbezeichung=“Amazon”}，
新公司（）{Rolle=“admin”，firmenkurzbezeichung=“Facebook”}，
};
}
公共静态列表GetFachinfos（字符串公司）
{
var fachinfolist=新列表（）
{
new Fachinfo（）{FachinfoNummer=101，FachinfoName=“AA”，firmenkurzbezeichung=“Microsoft”，Status=“Online”，Datum=DateTime.Now.ToString（），
new Fachinfo（）{FachinfoNummer=102，FachinfoName=“BB”，firmenkurzbezeichung=“Google”，Status=“Online”，Datum=DateTime.Now.ToString（），
new Fachinfo（）{FachinfoNummer=103，FachinfoName=“CC”，firmenkurzbezeichung=“Alibaba”，Status=“Online”，Datum=DateTime.Now.ToString（），
new Fachinfo（）{FachinfoNummer=104，FachinfoName=“DD”，firmenkurzbezeichung=“Amazon”，Status=“Online”，Datum=DateTime.Now.ToString（），
new Fachinfo（）{FachinfoNummer=105，FachinfoName=“EE”，firmenkurzbezeichung=“Facebook”，Status=“Online”，Datum=DateTime.Now.ToString（），
new Fachinfo（）{FachinfoNummer=106，FachinfoName=“FF”，firmenkurzbezeichung=“Microsoft”，Status=“Online”，Datum=DateTime.Now.ToString（），
new Fachinfo（）{FachinfoNummer=107，FachinfoName=“GG”，firmenkurzbezeichung=“Google”，Status=“Online”，Datum=DateTime.Now.ToString（），
};
如果（！string.IsNullOrEmpty（公司））
{
fachinfolist=fachinfolist.Where（c=>c.firmenkurzbezeichung==公司）.ToList（）；
}
复印机；
}
}

然后，结果如下：

---

Hi@AnasSadek，使用JQuery Ajax时似乎遇到了404错误，在我的示例中，Information\u listModelModel.cshtml.cs页面中的处理程序名称是

ongetfachinfopatile（）

，因此请求url是

/Information\u listModel？handler=fachinfopatile

。根据错误消息，url似乎是

https://localhost:44375/Information_listModel?handler=_fachinfoPartial&company=Pfizer%20PFE

，因此处理程序名称应为OnGet\U fachinfoPartial，请检查您的代码是否正确？如果仍然不工作，你能分享相关的处理程序方法吗？嗨，一切都很好，代码工作得很好，问题是URL，我修复了它。非常感谢。您好，我可以使用您的AJAX在不使用局部视图的情况下更新表吗？你能帮帮我吗！是的，您可以使用Ajax来更新表内容，而无需使用局部视图。但是使用此方法，在获取最新数据后，必须循环遍历数据并创建表元素，然后使用append方法将表元素添加到页面中。你可以参考

namespace Fachinformationsdienst_Kundenportal.Models
{
    public class Fachinfo
    {
        public int FachinfoNummer { get; set; }
        public string FachinfoName { get; set; }
        public string FirmenKurzBezeichnung { get; set; }
        public string Status { get; set; }
        public string StatusText { get; set; }
        public string Datum { get; set; }
        public string PdfVersion { get; set; }
    }
}

@model List<RazorSample.Models.Fachinfo>

<table class="table table-striped" id="FachinfoTable">
    <thead>
        <tr>
            <th scope="col">Nr.</th>
            <th scope="col">Name</th>
            <th scope="col">Status</th>
            <th scope="col">Letzte Änderung</th>
            <th scope="col">Aktuelle Version</th>
            <th scope="col">Auftrag</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Count; i++)
        {
            <tr>
                <th scope="row">@Model[i].FachinfoNummer</th>
                <td>@Model[i].FachinfoName</td>
                <td>@Model[i].Status</td>
                <td>@Model[i].Datum</td>
                <td>@Model[i].PdfVersion</td>
                <td>Thornton</td>
            </tr>
        }
    </tbody>
</table> 

@page
@model RazorSample.Pages.Information_listModelModel
@{
}
<div class="form-group col-md-4">
    <label for="inputState">Unternehmen</label>
    <select id="inputState" class="form-control">
        <option selected>Wählen Sie die Firma aus...</option>
        @for (int i = 0; i < Model.companies.Count; i++)
        {
            <option>@Model.companies[i].FirmenKurzBezeichnung</option>
        }
    </select>
</div>
<div id="fachinfoContainer"> 
    <partial name="_FachinfoPartial" model="@Model.fachinfos" />
</div>

@section Scripts{
    <script type="text/javascript">
        $(function () {
            $("#inputState").change(function () {
                var selectcompany = "";
                if ($(this).val() != "Wählen Sie die Firma aus...") {
                    selectcompany = $(this).val();
                } 
                $.ajax({
                    url: "/Information_listModel?handler=fachinfoPartial",
                    type: "Get",
                    data: { company: selectcompany },
                    success: function (result) {
                        $("#fachinfoContainer").html(""); //clear the fachinfo container.
                        $("#fachinfoContainer").html(result); //populate the container.
                    },
                    error: function (result) {
                        alert(result);
                    }
                });
            });
        });
    </script>
}

public class Information_listModelModel : PageModel
{
    public List<Company> companies;
    public List<Fachinfo> fachinfos = new List<Fachinfo>();

    public void OnGet()
    {
        //companies = APIRequester.GetCompanies(User.Identity.Name);
        //foreach (var company in companies)
        //{
        //    fachinfos.AddRange(APIRequester.GetFachinfos(company.FirmenKurzBezeichnung));
        //}
        companies = repo.GetCompanies();
        foreach(var company in companies)
        {
            fachinfos.AddRange(repo.GetFachinfos(company.FirmenKurzBezeichnung));
        }

    }

    public PartialViewResult OnGetFachinfoPartial(string company)
    {
        //based on the selctedcompany to filter data, then return to the partial view.
        fachinfos = GetFachinfosByCompany(company);
        return Partial("_FachinfoPartial", fachinfos);
    }
    public List<Fachinfo> GetFachinfosByCompany(string company)
    {
        //return APIRequester.GetFachinfos(company);
        return repo.GetFachinfos(company);
    }
}

public static class repo
{
    public static List<Company> GetCompanies()
    {
        return new List<Company>()
        {
            new Company(){ Rolle="admin", FirmenKurzBezeichnung="Microsoft"},
            new Company(){ Rolle="user", FirmenKurzBezeichnung="Google"},
            new Company(){ Rolle="admin", FirmenKurzBezeichnung="Alibaba"},
            new Company(){ Rolle="user", FirmenKurzBezeichnung="Amazon"},
            new Company(){ Rolle="admin", FirmenKurzBezeichnung="Facebook"},
        };
    }

    public static List<Fachinfo> GetFachinfos(string company)
    {
        var fachinfolist = new List<Fachinfo>()
        {
            new Fachinfo(){ FachinfoNummer=101, FachinfoName="AA", FirmenKurzBezeichnung="Microsoft", Status="Online", Datum= DateTime.Now.ToString()},
            new Fachinfo(){ FachinfoNummer=102, FachinfoName="BB", FirmenKurzBezeichnung="Google", Status="Online", Datum= DateTime.Now.ToString()},
            new Fachinfo(){ FachinfoNummer=103, FachinfoName="CC", FirmenKurzBezeichnung="Alibaba", Status="Online", Datum= DateTime.Now.ToString()},
            new Fachinfo(){ FachinfoNummer=104, FachinfoName="DD", FirmenKurzBezeichnung="Amazon", Status="Online", Datum= DateTime.Now.ToString()},
            new Fachinfo(){ FachinfoNummer=105, FachinfoName="EE", FirmenKurzBezeichnung="Facebook", Status="Online", Datum= DateTime.Now.ToString()},
            new Fachinfo(){ FachinfoNummer=106, FachinfoName="FF", FirmenKurzBezeichnung="Microsoft", Status="Online", Datum= DateTime.Now.ToString()},
            new Fachinfo(){ FachinfoNummer=107, FachinfoName="GG", FirmenKurzBezeichnung="Google", Status="Online", Datum= DateTime.Now.ToString()},
        };

        if (!string.IsNullOrEmpty(company))
        {
            fachinfolist = fachinfolist.Where(c => c.FirmenKurzBezeichnung == company).ToList();
        }

        return fachinfolist;
    }
}