从数据库中重新加载下拉列表的数据而不刷新整个页面

Posted 2023-04-13

【中文标题】从数据库中重新加载下拉列表的数据而不刷新整个页面

【英文标题】：Reloading data from the database for dropdownlist without refreshing whole page

【发布时间】：2019-12-23 10:16:37

【问题描述】：

我正在寻找一种解决方案，以便在按下按钮后从下拉列表中重新加载数据。最重要的是只需要重新加载下拉列表表单。

// 这是控制器中的视图

    public ActionResult DodajWydanie()
    
        var Tworcy = _context.Tworcys.ToList();
        var Ksiazka = _context.Ksiazkas.ToList();
        var Wydawnictwo = _context.Wydawnictwos.ToList();

        var viewModelWydanie = new WydanieViewModel
        
            Ksiazkas = Ksiazka,
            Tworcies = Tworcy,
            Wydawnictwos = Wydawnictwo,

        ;
        return View("DodajWydanie", viewModelWydanie);
    

// 视图中的下拉列表

            @using (Ajax.BeginForm("CreateWydanie", "Biblioteka", null,
             new AjaxOptions  HttpMethod = "POST", OnSuccess = "OnSuccess", OnFailure = "OnFailure" ,
               new  id = "WydanieFrom" ))
            
                <div class="form-group" id="DdKsiazka">
                    @html.LabelFor(m => m.Wydanie.Tworcy.KsiazkaId)
                    @Html.DropDownListFor(m => m.Wydanie.TworcyId, new SelectList(Model.Tworcies, "Id", "Full"), "", new  @id = "DropKs", @class = "form-control" )
                    <input type="button" value="Dodaj Książkę" id="loadData2" class="btn btn-primary" />

// 和脚本

    $('#asd').click(function () 
           var f = ;
           f.success = function () 
               $('#formid')[0].reset();
               // Here i need same code to reload @id = DropKs
           ;
            $.ajax(f);
        );

【参考方案1】：

按钮点击的默认行为会刷新页面，所以如果你想阻止这种情况，那么你需要像这样使用preventDefault();...

    $('#loadData2').click(function (event) 
        event.preventDefault(); // This will stop the page from refreshing.
        var f = ;
        f.success = function () 
        $('#formid')[0].reset();
               // Here i need same code to reload @id = DropKs
        ;
        $.ajax(f);
    );

【讨论】：

好的，但我仍然需要使用新提交的数据重新分配 DropDownListFor。

它的外观如何，我使用 DropDownListFor id=DropKs 和按钮 id = loadData2 进行了部分视图。当我单击 id = loadData2 时，他向我展示了另一个部分视图（在同一页面上，没有刷新）。在这个 secend 部分视图上，我有提交按钮（此按钮将数据保存在数据库中）。然后，当他保存数据库时，我需要重新加载 id=DropKs 中的数据。我想这样做而不刷新所有页面。

@Crower 我认为最好的方法是设置一个Web API 端点来检索您需要的数据。您可以设置一个端点来接收一些输入参数（在页面上提交的数据），并返回您可以用于填充下拉列表的 JSON 数据列表。