AJAX提交后如何重新加载Telephone的Create视图？

我有两个模型类：Telephone（对应代码中的Telefono）和TelephoneModel（对应ModeloTelefono）。创建新Telephone时必须选择一个TelephoneModel。我在Telephone的Create视图中添加了一个Modal，无需离开当前视图即可创建TelephoneModel。

已经在TelephoneController中添加了一个函数，接收Modal的数据并将TelephoneModel存入数据库，该函数通过Create视图中的Ajax调用。目前已成功将TelephoneModel添加到数据库，但当前视图并未刷新，新的可选信息无法显示。

请问在数据库中创建TelephoneModel后，如何重新加载视图以显示新的可选信息？

模型代码 #

namespace WebApplication1.Models
{
    public class Telefono
    {
        [Key]
        public int ID { get; set; }
        public required string Nombre { get; set; }
        public int IpId { get; set; }
        public virtual Ip? Ip { get; set; }
        public int ModeloTelefonoId { get; set; }
        public ModeloTelefono? ModeloTelefono { get; set; }

    }

   public class ModeloTelefono
   {

       public int ID { get; set; }
       public required string Nombre { get; set; }
       public required int MarcaID { get; set; } // 必填外键属性
       public Marca? Marca { get; set; } // 关联到主表的导航属性
   }

}

控制器函数（原代码） #

public async Task<IActionResult> AddModelo(string Modelo, int MarcaID, string Nombre, int subredID, int ipID)
    {
        var newModelo = new ModeloTelefono
        {
            Nombre = Modelo,
            MarcaID = MarcaID
        };

        if (newModelo != null)
        {
            _context.Add(newModelo);
            await _context.SaveChangesAsync();

            ViewBag.SubReds = _context.SubRed.ToList();
            ViewData["IpId"] = new SelectList(_context.Ip, "ID", "IpValue", ipID);
            ViewData["SubRedes"] = new SelectList(_context.SubRed, "ID", "Nombre", subredID);
            ViewData["ModeloTelefonoId"] = new SelectList(_context.ModeloTelefono, "ID", "Nombre", newModelo.ID);
            ViewData["Marcas"] = new SelectList(_context.Marca, "ID", "Nombre");


                            
            return View("Create", new Telefono { Nombre = Nombre });
            
        }
        else { return View(); }

    }

Ajax函数（原代码） #

function agregarModelo() {

        const Modelo = document.querySelector("#modeloInput").value
        const MarcaID = document.querySelector("#marcaSelect").value;
        const Nombre = document.querySelector("#Nombre").value;
        const subredID = document.querySelector("#Ip_SubRedID").value;
        const ipID = document.querySelector("#ipDropdown").value;


        $.ajax({
            url: '/Telefonoes/AddModelo',
            type: 'POST',
            dataType: 'JSON',
            data: { Modelo: Modelo, MarcaID: MarcaID, Nombre: Nombre, subredID: subredID, ipID: ipID }              
        });

    }

解决方案 #

1. 调整控制器，返回必要数据而非整个视图 #

原控制器返回整个Create视图，既不符合Ajax期望的JSON格式，也没必要传输整个页面。修改后只返回新创建的ModeloTelefono的核心数据：

public async Task<IActionResult> AddModelo(string Modelo, int MarcaID)
{
    var newModelo = new ModeloTelefono
    {
        Nombre = Modelo,
        MarcaID = MarcaID
    };

    if (!string.IsNullOrEmpty(Modelo) && MarcaID > 0)
    {
        _context.Add(newModelo);
        await _context.SaveChangesAsync();
        // 返回新模型的ID和名称，用于前端更新下拉列表
        return Json(new { Id = newModelo.ID, Nombre = newModelo.Nombre });
    }
    else 
    {
        return Json(new { success = false, message = "请填写完整的模型信息" });
    }
}

2. 修改Ajax函数，动态更新下拉列表 #

在Ajax的成功回调里，直接操作DOM把新选项添加到ModeloTelefonoId下拉列表中，同时处理Modal关闭和输入框清空：

function agregarModelo() {
    const Modelo = document.querySelector("#modeloInput").value.trim();
    const MarcaID = document.querySelector("#marcaSelect").value;

    // 前端先做简单参数校验
    if (!Modelo || MarcaID <= 0) {
        alert("请填写完整的模型信息");
        return;
    }

    $.ajax({
        url: '/Telefonoes/AddModelo',
        type: 'POST',
        dataType: 'JSON',
        data: { Modelo: Modelo, MarcaID: MarcaID },
        success: function(response) {
            if (response.Id) {
                // 获取目标下拉列表元素
                const modeloSelect = document.querySelector("#ModeloTelefonoId");
                
                // 创建新选项并设置为选中状态
                const newOption = document.createElement("option");
                newOption.value = response.Id;
                newOption.textContent = response.Nombre;
                newOption.selected = true;

                // 将新选项添加到下拉列表
                modeloSelect.appendChild(newOption);

                // 关闭Modal（假设你的Modal ID是modeloModal）
                $('#modeloModal').modal('hide');
                // 清空输入框
                document.querySelector("#modeloInput").value = "";
            } else {
                alert(response.message || "创建模型失败");
            }
        },
        error: function() {
            alert("请求失败，请检查网络或重试");
        }
    });
}

3. 关键优化说明 #

• 减少冗余参数：Ajax只传递创建ModeloTelefono必需的参数，无需携带Telephone的其他信息
• 局部更新页面：不用刷新整个视图，仅更新需要变化的下拉列表，提升用户体验
• 增加参数校验：前后端都做简单校验，避免无效请求

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