Sent models from dynamic forms

Question

I have a model

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

with list of objects

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

My view:

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

and script which create form after button.click()

    <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")',
        ??????
        ??????
        ??????
        });
});

In the view I want to: - fill name and count of article - dynamically create form(Count/Price) - sent everything after click on button I am trying do it by $.ajax by I do not know how.

Refer [this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for some options — , Mar 15 '17 at 21:20

score 0 · Answer 1 · answered Mar 16 '17 at 02:09

0

You can either Post serialized form data with the ajax call you making for #create. Or you can make use of FormCollection as parameter for the Controller method.

answered Mar 16 '17 at 02:09

Lyubomir Dimov

141
1
11

score 0 · Answer 2 · answered Mar 16 '17 at 16:25

Please take my code and put it into your visual studio. This will help you with a solution. Once you put the code in visual studio, run the program and click save. You can then put in breakpoints, even in the javascript using F12 developer tools, to see how it works.

Controller and models:

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

View:

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

Sent models from dynamic forms

2 Answers2