Как отправить данные в метод POST из таблицы HTML в представлении в этом сценарии?

#c# #asp.net-mvc #asp.net-core-mvc #viewmodel

#c# #asp.net-mvc #asp.net-ядро-mvc #viewmodel

Вопрос:

У меня есть некоторые данные, которые я отображаю в HTML таблице в моем View . Теперь, что я хочу сделать, это то, что при нажатии кнопки (скажем, SUBMIT кнопки, я хочу отправить данные в метод POST контроллера, чтобы я мог сохранить данные в базе данных.

Я попытался получить данные, используя Model Binding технику, однако ViewModel объект в POST методе оказывается null .

Модель и ViewModel

 // Model Model.cs    
public class MyModel
{
    [Key]
    public int Id { get; set; }

    public string FirstName { get; set; }
    public string LastName { get; set; }
    ...
}

// ViewModel MyViewModel.cs
public class MyViewModel
{
            public int Id { get; set; }

    public string FirstName { get; set; }
    public string LastName { get; set; }
    ...
    public List<MyModel> MyModelList { get; set; }
}

// ViewModel VMList.cs
public class VMList
{
    public List<MyViewModel> MyViewModelList { get; set; }
}
  

Итак, у меня есть Model called MyModel.cs , который имеет таблицу в базе данных. Затем у меня есть ViewModel вызываемый MyViewModel.cs' that has the same columns as the , in addition to some columns, plus a список of моделей MyModel type. Then, there is another ViewModel called VMList.cs that contains a list of tuples of MyViewModel type. This ViewModel is passed to the View`.

Представление создается следующим образом:

Вид

 @model ...Models.ViewModels.VMList
...
<form asp-action="MyAction" asp-controller="MyController" id="myForm">
    <div>
        <button type="submit" value="submit" id="submitButton">Submit</button>
        <table id="myTable">
            @foreach(var item in Model.MyViewModelList)
            {
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Header 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            @item.FirstName
                        </td>
                        <td>
                            @item.LastName
                        </td>
                        <td>
                            @item.Header3
                        </td>
                    </tr>
                    @if(item.subList != null amp;amp; item.subList.Count() != 0)
                    {
                        <thead>
                            <tr>
                                <th>SubList Header 1</th>
                                <th>SubList Header 2</th>
                                <th>SubList Header 3</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(var subItem in item.subList)
                            {
                                <tr>
                                    <td>
                                        @subItem.SubListHeader1
                                    </td>
                                    <td>
                                        @subItem.SubListHeader2
                                    </td>
                                    <td>
                                        @subItem.SubListHeader3
                                    </td>
                               </tr>
                            }
                        </tbody>
                    }
            }
        </table>
    </div>
</form>    
  

Метод POST

 [HttpPost]
public IActionResult MyAction(VMList vmListObject)
{
    return View();
}
  

Как я могу получить данные, которые отображаются в таблицах в View обратно в Controller ?

Комментарии:

1. Во-первых, для отправки любых данных контроллеру из вашей формы вам нужны поля ввода. Я не вижу никаких полей ввода в вашей форме. Во-вторых, ваше действие формы MyController.MyAction но в вашем методе post вы показали Index метод.

2. Я прошу прощения. Это была опечатка. Я исправил это в коде. Это правильно в реальном коде, поскольку я получаю вызов метода POST при нажатии кнопки отправки.

3. MyAction Метод по-прежнему выглядит некорректно, потому что он не принимает никаких параметров, пожалуйста, вставьте сюда свой фактический код.

4. Опять глупая опечатка Приянка. Мне очень жаль. Я должен был пересмотреть код перед публикацией. Однако в реальном коде это правильно.

5. Теперь, возвращаясь к моему первому вопросу, вам нужны поля ввода, чтобы отправлять что-либо из формы. Вы можете создать несколько скрытых полей для каждого значения в <td> , которое вы хотите отправить контроллеру. Однако, чтобы получить его правильно, вы должны правильно его назвать. Я бы посоветовал вам один раз взглянуть на шаблоны редактора.

Ответ №1:

На основе приведенных вами моделей попробуйте использовать asp-for tag helper и name property для привязки модели.

 @model  VMList
<form asp-action="MyAction" asp-controller="HomeController" id="myForm">
<div>
    <button type="submit" value="submit" id="submitButton">Submit</button>
    <table id="myTable">
        @{ int i = 0;}
        @foreach (var item in Model.MyViewModelList)
        {
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Header 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input asp-for="@item.FirstName" name="vmListObject.MyViewModelList[@i].FirstName" />

                    </td>
                    <td>
                        <input asp-for="@item.LastName" name="vmListObject.MyViewModelList[@i].LastName"/>
                    </td>
                    <td>
                        <input asp-for="@item.Header3" name="vmListObject.MyViewModelList[@i].Header3" />
                    </td>
                </tr>
                @if (item.MyModelList != null amp;amp; item.MyModelList.Count() != 0)
                {
                    <thead>
                        <tr>
                            <th>SubList Header 1</th>
                            <th>SubList Header 2</th>
                            <th>SubList Header 3</th>
                        </tr>
                    </thead>
                    <tbody>
                        @{ int j = 0;}
                        @foreach (var subItem in item.MyModelList)
                        {
                            <tr>
                                <td>
                                    <input asp-for="@subItem.FirstName" name="vmListObject.MyViewModelList[@i].MyModelList[@j].FirstName"/>
                                </td>
                                <td>
                                    <input asp-for="@subItem.LastName" name="vmListObject.MyViewModelList[@i].MyModelList[@j].LastName" />
                                </td>
                                <td>
                                    test
                                </td>
                            </tr>
                            j  ;
                        }

                    </tbody>
                  }
            </tbody>
           i  ;
         }
    </table>
</div>
</form>
  

Комментарии:

1. Используя ваше предложение, я смог передать данные в POST метод контроллера, но после проверки я получал внутренний цикл как null .

2. @Dashamlav Я тестирую это без каких-либо проблем. Убедитесь, что name свойство установлено в соответствии с именем полей модели.