Как показать вновь добавленные данные в таблице в представлении

Question

Я просто создаю какое-то фиктивное приложение с некоторыми базовыми данными List в используемом контроллере.Таблица в представлении, показывающая основные жестко закодированные данные в списке.Есть кнопка, которая вызывает всплывающее окно для формы для новой записи в данных.Я использую JavaScript для вызова метода действия в контроллере, и у меня есть программа печати в журнале отладки, чтобы убедиться, что функция вызывается и создается новый объект, который он есть.Но я не могу понять, как отобразить вновь добавленные данные в таблицу.

Основываясь на коде, я думал, что функция нажатия кнопки «Отправить» вызовет индекс, а поскольку список не полон, он просто вернетпросмотрите добавленные новые данные и покажите их в таблице.

Контроллер

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

Вам необходимо добавить функцию обратного вызова в событие щелчка subButton (в представлении кода скрипта).

Когда вы получаете данные от контроллера, вы можете сохранить их в div

Если у вас уже есть какой-либо элемент отображения таблицы, то замените идентификатор этого элемента в следующем коде вместо #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');
});

Answer 2

Здесь: return 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);
     }

Здесь: public IActionResult Index (область списка)

     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.
}