C# 从动态表单发送模型

我有一个模型

public class Shop()
{
public string ArticleName {get; set;}
public int ArticleTotalCount {get; set;}
public List<Package> Package {get; set;}
}

我的看法是：

@model Shop

@Html.LabelFor(x => Model.ArticleName)
@Html.EditorFor(x => Model.ArticleName)    

@Html.LabelFor(x => Model.ArticleCount)
@Html.EditorFor(x => Model.ArticleCount)

<div id="sections">
    <div class="section row">              
        <div class="col-md-4">
            @Html.TextBox("count", null, new { @value = "", @class = "col-md-10" })
        </div>
        <div class="col-md-4">
            @Html.TextBox("price", null, new { @value = "", @class = "col-md-10" })
        </div>
    </div>
</div>

<div class="row">
    <input id='addsection' type="submit" value="Add new" />
</div>

<div class="row">
        <input id='create' type="submit" value="Save" />
</div>

和在按钮后创建表单的脚本。单击

    <script>
var template = $('#sections .section:first').clone();
var sectionsCount = 1;
$('body').on('click', '#addsection', function() {
    sectionsCount++;
    var section = template.clone().find(':input').each(function(){
        var newId = this.id + sectionsCount;
        $(this).prev().attr('for', newId);
        this.id = newId;
    }).end()
    .appendTo('#sections');
    return false;
});

$("#create").click(function () {
        $.ajax({
        type: "POST",
        url: '@Url.Action("AddArticles", "Shop")',
        ??????
        ??????
        ??????
        });
});

在我看来，我想： -填写物品名称和数量 -动态创建formCount/Price -点击按钮后发送所有内容

---

我正在尝试通过$.ajax来实现它，但我不知道如何实现。

您可以使用为create所做的ajax调用发布序列化表单数据。也可以使用FormCollection作为控制器方法的参数

请将我的代码放入visual studio。这将帮助您找到解决方案。将代码放入visual studio后，运行程序并单击“保存”。然后，您可以输入断点，甚至使用F12开发工具在javascript中输入断点，以查看其工作原理

控制器和型号：

public class Shop
{
    public string ArticleName { get; set; }
    public int ArticleTotalCount { get; set; }
    public List<Package> Package { get; set; }
}

public class Package
{
    public int Count { get; set; }
    public decimal Price { get; set; }
}

public class MyModel
{
    public string ArticleName { get; set; }
    public int CountField { get; set; }
    public string PriceField { get; set; }
}

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult GoIntoMethod(MyModel m) //count field only
    {
        //put a breakpoint here to see you can do whatever you want with the fields
        return Json(new
        {
            targetName = m.PriceField,
            targetCount = m.CountField,
            targetPrice = m.PriceField
        }
         , @"application/json");
    }

    public ActionResult Index28()
    {
        Package p1 = new Package { Count = 1, Price = 2 };
        Package p2 = new Package { Count = 3, Price = 4 };

        Shop s = new Shop { ArticleName = "a1", ArticleTotalCount = 6 };
        s.Package = new List<Package>();
        s.Package.Add(p1);
        s.Package.Add(p2);

        return View(s);
    }

视图：

有关一些选项，请参阅

public class Shop
{
    public string ArticleName { get; set; }
    public int ArticleTotalCount { get; set; }
    public List<Package> Package { get; set; }
}

public class Package
{
    public int Count { get; set; }
    public decimal Price { get; set; }
}

public class MyModel
{
    public string ArticleName { get; set; }
    public int CountField { get; set; }
    public string PriceField { get; set; }
}

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult GoIntoMethod(MyModel m) //count field only
    {
        //put a breakpoint here to see you can do whatever you want with the fields
        return Json(new
        {
            targetName = m.PriceField,
            targetCount = m.CountField,
            targetPrice = m.PriceField
        }
         , @"application/json");
    }

    public ActionResult Index28()
    {
        Package p1 = new Package { Count = 1, Price = 2 };
        Package p2 = new Package { Count = 3, Price = 4 };

        Shop s = new Shop { ArticleName = "a1", ArticleTotalCount = 6 };
        s.Package = new List<Package>();
        s.Package.Add(p1);
        s.Package.Add(p2);

        return View(s);
    }

@model Testy20161006.Controllers.Shop
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index28</title>
    @*the next line should point to your jquery*@
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#create").click(function () {
                var MyModel = {
                    ArticleName: $("#articleName").val(),
                    CountField: $("#countField").val(),
                    PriceField: $("#priceField").val()
                }
                $.ajax({
                    url: '/Home/GoIntoMethod',
                    type: 'POST',
                    data: MyModel,
                    dataType: 'json',
                    success: function (result) {
                        $("#targetName").val(result.targetName);
                        $("#targetCount").val(result.targetCount);
                        $("#targetPrice").val(result.targetPrice);
                    },
                    error: function (data, status, error) {
                        //alert("error");
                    }
                });
            })
        })
    </script>
</head>
<body>
    <div>
        @Html.LabelFor(x => x.ArticleName);
        @*using textbox for instead of editorfor*@
        @Html.TextBoxFor(x => x.ArticleName, new { id = "articleName" });

        @Html.LabelFor(x => x.ArticleTotalCount);
        @Html.EditorFor(x => x.ArticleTotalCount);

        <div id="sections">
            <div class="section row">
                <div class="col-md-4">
                    @Html.TextBox("count", null, new { id = "countField", Value = "2", @class = "col-md-10" })
                </div>
                <div class="col-md-4">
                    @Html.TextBox("price", null, new { id = "priceField", Value = "2.38", @class = "col-md-10" })
                </div>
            </div>
        </div>
        <div>
            @*you can make these field using html helper*@
            <input type="text" id="targetName" />
            <input type="text" id="targetCount" />
            <input type="text" id="targetPrice" />
        </div>
        <div class="row">
            @*<input id='addsection' type="submit" value="Add new" />*@
        </div>
        <div class="row">
            <input id='create' type="submit" value="Save" />
        </div>
    </div>
</body>
</html>