Как отправить другую модель (не объявлена) из вида в контроллер?

Question

У меня есть View с таблицей продуктов.Я пытаюсь добавить новые данные вверху таблицы, если нажата btnAdd.Затем нажмите Сохранить для отправки данных на контроллер.Я понимаю, что если я отправляю, он отправляет объявленный тип данных на контроллер в верхней части представления.В моем случае IndexViewModel.Но я хочу отправить экземпляр модели Product обратно на контроллер.

У меня есть контроллер:

public class ProductController : Controller
{
      public ActionResult Index()
      {
          IndexViewModel _IndexViewModel = new IndexViewModel()
          // some code
          return View(_IndexViewModel );
      }
      [HttpPost]
      public ActionResult Insert(Product product)
      {
          // some code
      }
}

Две модели:

public class IndexViewModel
{
    public List<Product> Products { get; set; }
}

public class Product
{
    public string Name { get; set; }
    public int Price { get; set; }
    public int Quantity { get; set; }
}

И просмотр:

@model TestApp.ViewModels.IndexViewModel
@{
    ViewBag.Title = "Index";
}

<div>
    <input type="button" value="btnAdd"/>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th/>
            </tr>
        </thead>
        <tbody>
            <tr class="new-row" hidden>
                @using (Html.BeginForm("Insert", "Product", FormMethod.Post))
                {
                    <td><input type="text" id="newProductName"/></td>
                    <td><input type="text" id="newProductPrice"/></td>
                    <td><input type="text" id="newProductQuantity"/></td>
                    <td>
                        <input type="submit" id="btnSave" value="Save"/>
                    </td>
                }
            </tr>
            @foreach (var product in Model.Products)
            {
                <tr>
                    <td>@product.Name"</td>
                    <td>@product.Price"</td>
                    <td>@product.Quantity"</td>
                </tr>
            }
        </tbody>
    </table>
</div>

Я пытался сделатьФункция .js и вызов, если на кнопке Сохранить, но это не сработало:

function save() {
    var newProduct = {};
    newProduct.Name = $('#newProductName').val();
    newProduct.Price = $('#newProductPrice').val();
    newProduct.Quantity = $('#newProductQuantity').val();

    $.ajax({
        url: "Product/Insert",
        type: 'post',
        data: '{product: ' + JSON.stringify(newProduct) + '}',
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        success: function (response) {
            alert("Success");
        },
        error: function (xhr, status, error) {
            alert("Failed");
        }

    })
}

Есть ли способ передать модель Product в действие Insert?

Answer 1

Вам нужно только добавить имя, такое же как свойство класса Product без jquery AJAX

@using (Html.BeginForm("Insert", "Product", FormMethod.Post))
            {
                <td><input type="text" id="newProductName" name="Name" /></td>
                <td><input type="text" id="newProductPrice" name="Price" /></td>
                <td><input type="text" id="newProductQuantity" name="Quantity" /></td>
                <td>
                    <input type="submit" id="btnSave" value="Save" />
                </td>
            }