asp.net MVC with Jquery modal form

I'm new to MVC and need a way to submit a modal form to call an action from a controller. Somehow the values submitted are not passed to the controller.

If i don't use Jquery UI dialog modal form, then the form is submitted correctly (with a submit button inside the form tag). Otherwise, by calling $("#newProductForm").submit(); from jquery, all values doesn't pass up to the controller at all.

<a id="addNewCategory" href="#">Add new category</a>

 <div id="dialog-form" title="Add new category">
@using (Html.BeginForm("ProductCategoryInsert", "Product", FormMethod.Post, new { id = "newProductForm" }))
{   
    开发者_开发问答        @Html.HiddenFor(m => m.Id)
            @Html.CheckBox("IsFeaturedProduct") 
            @Html.TextBox("DisplayOrder")
}
</div>

    $(document).ready(function () {

        $("#dialog-form").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Add new category": function () {
                    $("#newProductForm").submit();
                    return true;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                allFields.val("").removeClass("ui-state-error");
            }
        });

        $("#addNewCategory")
            .button()
            .click(function () {
                $("#dialog-form").dialog("open");
            });
    });

=========================================== Controller

 [HttpPost]
        public ActionResult ProductCategoryInsert(ProductModel.ProductCategoryModel model)
        {
            var productCategory = new ProductCategory()
            {
                ProductId = model.Id,
                CategoryId = model.CategoryId, 
                IsFeaturedProduct = model.IsFeaturedProduct,
                DisplayOrder = model.DisplayOrder
            };

            _categoryService.InsertProductCategory(productCategory);

            return View();
        }

---

I don't see anything that's triggering red flags with the details that you've supplied. I have two suggestions that might help further your investigation, however:

1) Try a CheckBoxFor and a TextBoxFor in the form. As they are now, I'd assume they should submit assuming the names you specified match the properties in the Model the controller method is expecting.

2) Use the Firebug console in Firefox to look at what's getting posted to the controller.

Remember, the names on the fields in the form must match exactly to the properties in the model.

Hope that helps!