Question

I have this model:

public class Package
{
    public string CustomerName { get; set; }
    public List<Product> Products { get; set; }
    public int Id { get; set; }
}

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

I have a Create‘s view for creating a new Package and one or many Create product‘s PartialView.

How I can submit the Product informations to the Product’s controller without leave the View?

Here is my Product’s Partialview code:

<% using (Ajax.BeginForm("Create", "Product", new AjaxOptions())) {%>
    <%: Html.ValidationSummary(true) %>

    <fieldset>
        <legend>Fields</legend>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.Name) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Name) %>
            <%: Html.ValidationMessageFor(model => model.Name) %>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.Quantity) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Quantity) %>
            <%: Html.ValidationMessageFor(model => model.Quantity) %>
        </div>

<%--    <p>
            <input type="submit" value="Create" />
        </p>--%>
    </fieldset>

<% } %>

Thank you

Answer 1

You can use AJAX to solve your problem. The code pode below post 3 values to YourController in YourAction.

jQuery('#YourButton').click(function (event) {

    var jqxhr = $.post("YourController/YourAction", {
        lastName: $("#tbLastName").val(),
        firstName: $("#tbFirstName").val(),
        id: $("#id").val()
    },
    function (data) {
        $('#WhereResultAppear').html(data); //can be deleted
    })

    .success(function () {
        $('#InCaseOfSuccess').html(data); //can be deleted
    })

    .error(function (jqXHR, status, error) {
        $('#InCaseOfError').html(data); //can be deleted
    })

    .complete(function () {
        $('#WhenActionIsComplete').html(data); //can be deleted
    });
});