Question

我只是用一些基本数据创建一个模拟应用程序，并在使用的控制器中添加一个List。视图上的表格显示列表中的基本硬编码数据。有一个按钮可以触发表单的弹出窗口，以向数据中添加新条目。我使用JavaScript来调用控制器中的操作方法，并且在Debug日志中打印了一个程序，以确保正在调用该函数并正在创建新对象。但是我不知道如何将新添加的数据显示到表中。

基于代码，我认为“提交”按钮的单击功能将调用索引，并且由于列表不完整，因此在添加新数据并将其显示在表格中后，它会简单地返回视图。

控制器

public IActionResult Index()
{
    if (areas.Count == 0)
    {
        addData();
    }

    return View(areas);
}

[HttpPost]
public ActionResult SubmitButtonClick(string newArea, string newZone, string newAC, string newCity, string newRegion)
{
    System.Diagnostics.Debug.WriteLine("Area: " + newArea + ", Zone: " + newZone + ", newAC: " + newAC + ", newCity: " + newCity + ", newRegion: " + newRegion );
    areas.Add(new Areas
    {
        area = newArea,
        zone = Int32.Parse(newZone),
        areaCommunity = newAC,
        city = newCity,
        region = newRegion
    });

    System.Diagnostics.Debug.WriteLine("After add: " + areas[areas.Count-1].area);
    return RedirectToAction("Index");

View中的脚本代码

    $('#subButton').click(function () {
        $.post('/Home/SubmitButtonClick', { newArea: $('#inputArea').val(), newZone: $('#inputzone').val(), newAC: $('#inputCommunity').val(), newCity: $('#inputCity').val(), newRegion: $('#inputRegion').val() });
        $('#createModal').modal('hide');
    });

Answer 1

在这里：返回RedirectToAction（“ Index”，area）;

    [HttpPost]
    public ActionResult SubmitButtonClick(string newArea, string newZone, string 
     newAC, string newCity, string newRegion)
    {

        System.Diagnostics.Debug.WriteLine("Area: " + newArea + ", Zone: " + newZone + ", newAC: " + newAC + ", newCity: " + newCity + ", newRegion: " + newRegion );
        areas.Add(new Areas
        {
            area = newArea,
            zone = Int32.Parse(newZone),
            areaCommunity = newAC,
            city = newCity,
            region = newRegion
        });



        System.Diagnostics.Debug.WriteLine("After add: " + areas[areas.Count- 
   1].area);
        return RedirectToAction("Index", area);
     }

这里：公开的IActionResult索引（列表区域）

     public IActionResult Index(List<Area> area)
    {
        if (areas.Count == 0)
        {
            addData();
        }
        return View(areas);
    }


In your view, if are using strong typed view, surround your inputs and fields with this:
if(Model != null)
{
 //Yours form, fields and inputs here.
}

Answer 2

您需要在subButton click事件中添加回调函数（在脚本代码视图中）。

从控制器获取数据时，可以将其保存在div

如果您已经有任何表显示div，请在以下代码中替换该div的ID，而不是#tableview，否则请在您放置按钮的视图中创建新的div。<div id="tableview"></div>

$('#subButton').click(function () {
    $.post('/Home/SubmitButtonClick', 
    { 
        newArea: $('#inputArea').val(),
        newZone: $('#inputzone').val(),
        newAC: $('#inputCommunity').val(),
        newCity: $('#inputCity').val(),
        newRegion: $('#inputRegion').val()
    },
    function(data)
    {
        $("#tableview").html(data);
    }
    );
    $('#createModal').modal('hide');
});

如何在视图中的表中显示新添加的数据

2 个答案: