MVC2: How submit data from Partial view to his controller?

I have this model:

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

public c开发者_如何学JAVAlass 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

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

Give an id to your form in the partial view. and then use JQuery to send data by serializing the form.

$.post("controller/action", $("#formId").serialize(),
   function(data) {
     alert("Data Loaded: " + data);
   });

And in the controller

   Package pakage = new Package();

    UpdateModel(pakage );

Although you can write code to serialize the data as the other answers mention, I would consider surrounding the fields in an

@using (Ajax.BeginForm("ActionOnController", new AjaxOptions{}))
{

}

This will do it all for you (as long as you include the necessary javascript e.g. jquery.unobtrusive-ajax.min.js)

Take a look at the AjaxOptions documentation. This allows you to (amongst other things) update another section after posting the values back. You can use this to indicate success

Martin