jqModal and ASP.NET MVC

Question

Hi everyone!

I want to create a simple form for adding new products using jqModal.

View / Home / Index.aspx:

<script type="text/javascript">
        $(document).ready(function () {

            $('#addProductControlSection').jqm({ modal: true,
                ajax: '<%: Url.Action("AddProduct", "Home") %>',
                onHide: myAddClose
            });

            function myAddClose(hash) {
                hash.w.fadeOut('1000', function () { hash.o.remove(); });
            }

        });
    </script>

    // rest of the code...

<a href="#" class="jqModal">Add product</a>

<div id="addProductControlSection" class="jqmWindow">

</div>

HomeController:

public ActionResult AddProduct()
{
    return View();
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddProduct(Product product)
{
    if(!ModelState.IsValid)
    {
       // how to show an error?
    }

    _productRepository.Save(product);
    // how to display 'success' or something...
}

I don't know how to implement validation. If user enters incorrect value for the Product.Price and clicks Save button, I don't want to close the form. I would like to display an error message like the one when using Validation Summary on normal views.

Thank you!

Answer 1

Have a look at the jQuery validation plugin or using MVC Model Validation to autogenerate the JS. The fact that it's in a modal dialog should have no effect on these techniques.