multiple instances of a strongly typed entity in a view MVC3

Question

I'm very new to MVC so this is probably a very novice question. I'm playing around with a product catalog. I have a list of products that I want to display in tabular format (table or divs). Each row will display a product information and have two links "Edit and Delete". I want to use Jquery Ajax to submit requests to my controller. For editing I want to display a modal dialog. For deleting I would like to delete the product from the catalog. Each one of this actions will update the grid after it is completed.

Here is some pseudo code:

Model:

 public class ProductModel
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public int Id { get; set; }
        public bool IsReadOnly { get; set; }
    }

Controller:

public class ProductController : Controller
    {
        //
        // GET: /Product/

        public ActionResult Edit(ProductModel product)
        {

        }

        public ActionResult Delete(ProductModel product)
        {

        }


    }

Edit view:

@model Generic.Controller.Models.ProductModel

if Model.IsReadOnly
    Render display editor
else
    Render editor

List View:

@model Generic.Controller.Models.ProductModel

@using (Html.BeginForm())
{
    //for each model item
    <div class="some-css">
        <div class="column-div">
            //display the model
        </div>

        <div class="column-div">
            //display the edit link   
        </div>

        <div class="column-div">
            //display the delete link   
        </div>
    </div>
}

Alternative List view - partial view rendered from list view

//for each model:

@using (Html.BeginForm())  //id this form with the product id?
{
    //for each model item
    <div class="some-css">
        <div class="column-div">
            //display the model
        </div>

        <div class="column-div">
            //display the edit link   
        </div>

        <div class="column-div">
            //display the delete link   
        </div>
    </div>
}

Here's some skeleton Javascript:

var open = function (methodName, url) {        
    $("#dialogDiv").dialog({
       buttons: {
            Save: function () {
                var form = $(options.formToPost);
                $.ajax({
                    type: "POST",

what goes here? Usually I can:

               url: form.attr('action'),
               data: form.serialize()

but does that mean a form per entity?

success: function (data, status, xhr) {
                    if (data.IsValid) {
                        //how do I identify the div I need to update?
                    } else {

                    }
                }
            });
        },

        Cancel: function () {
            $("#dialogDiv").dialog('close');
            $("#dialogDiv").empty();
        }
    }
});
$.ajax(
    {
        Type: methodName,
        url: url,
        success: function (data, status, xhr) {
            openDialog(data);
        }
    });

function openDialog(data) {
    $("#dialogDiv").html(data);
    $("#dialogDiv").dialog('open');
}
};

return {
    open: open
};

Here are my questions:

Right now the only thing I know how to easily post is a form. Do I have to have multiple forms (1 for each product) in order to post ajax requests to my controller?
If I find the closest div to the clicked link using JQuery and send that to the controller, would the model binder automatically bind the contents of the div to my ProductModel?
What would be the best way to update the view after a product is edited or removed?

Thanks,

can send data to server without using a form, look at examples in jQuery API — charlietfl

amhed amhed · Accepted Answer · 2013-02-17T14:23:11

Decorate your controller actions for edit and delete with [HttpPost] to prevent GET requests from editing/deleting.
If you are using modals to edit the rows, then each rendered modal will need to be a form in order to post the values to the controller action.
After each edit or delete do a return RedirectToAction("NameOfListMethod") and the list will be updated.

If you want to handle everything with jQuery it gets a bit more tricky, since you would need to be able to update the table on the client-side.

multiple instances of a strongly typed entity in a view MVC3

1 Answers