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

如何从View发送不同的Model（未声明）到Controller？

1 个答案: