Question

我的观点包含这样的表格：

@model WebApplication1.Models.Books

<form action="/Test/Run" method="POST">
    <table>
        <tr>
            <td>
                 Name: @Html.TextBoxFor(m => m.Title)
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="getbooksbutton" value="Get Books From Person"/>
            </td>
            <td>
                <div id="books"></div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="Send Data"/>
            </td>
        </tr>
    </table>
</form>

我的模特：

public class Books
{
    public string Title { get; set; }
    public List<BooksDetails> BooksData { get; set; }
}

和

public class BooksDetails
{
    public string BookVersion { get; set; }
    public string BookPrice { get; set; }
}

我在getbooks按钮上对我的Controller进行ajax调用，点击参数＆＃34; Title＆＃34;并返回并更新div＆＃34; books＆＃34;以成功的名字为本书提供更多详细信息。

div在我的ajax函数中更新如下：

 var div = $("#books");
 $.each(data.BooksData, function(i, item) {
     div.append("<br/>" + "Book Version: " + item.BookVersion + ", Set your Price: " + "<input type=\"text\" name=\"item.BookPrice\" value=\"0\">");
 });

用户应该能够为每本书设定价格，这就是为什么我在div更新时附加输入字段的原因。

当用户点击＆＃34; final＆＃34;提交按钮，我想使用更新的BooksData对象将Books对象发布到我的控制器。

我看了很多例子，但我没有发现它是如何起作用的。

Answer 1

您必须使用模型绑定到列表，您可以像这样更改代码

  div.append("<br/>" + "Book Title: " + item.BookTitle + ", Set your Price: " + "<input type=\"text\" name=\"[i].BookPrice\" value=\"0\">");

有关此内容的详细信息，请参阅model binding to a list

Answer 2

这是您可以用来解决问题的方法。这不是经过测试的解决方案。

var Books = "";

$("#table tbody tr").each(function (index) {
    $("td", this).each(function () {
        if($(this).find('.books') != "" && $(this).find('.books')!=undefined)
        {
            var inputValues = [];
            $('#books input').each(function() {             
                inputValues.push($(this).val());                
            })
            Books = { "Title" : "Your title", "BooksData"  : inputValues };             
        }
    });
});

现在使用ajax调用将此Books对象发布到您的控制器。

将表格数据发布到控制器的更新div

2 个答案: