asp.net MVC with Jquery modal form

Question

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

Nate Kindrew · Accepted Answer · 2011-06-30 13:03:10Z

1

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!

answered Jun 30, 2011 at 13:03

Nate Kindrew

8618 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

asp.net MVC with Jquery modal form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related