[RESOLVED] Several forms on View (Partials from RenderAction)

I created a strongly typed partial view for listing a list of products.
Next to each product I have a checkbox.
Also I have two dropdown lists (Actions such as deleting all checked items, and filters like showing all products drafts, etc).
When the dropdown change, I have a jquery that post the form, and my controller action's post method do the rest.
All of this works fine.
I implement the above with RenderAction.

Code:

---

<% Html.RenderAction("ProductList", "Product", new { area = "Product", model = Model.ProductsAvailable }); %>

---

However, I want to render several of these partials on a single view.
This means I have several forms on that view, which poses several problems.

Anyone ever did something like this? Maybe I'm just over tired but cannot think of a smooth solution right now. Seems I shot myself in the foot going this direction.

For what it matter, my current action methods look as follows (the response.write stuff is just while I'm figuring things out):

Code:

---

[ChildActionOnly]
public ActionResult ProductList(ProductListViewModel model)
{
    return PartialView(model);
}

[HttpPost]
public ActionResult ProductList(ProductListViewModel model, List<int> ids)
{
    if (!string.IsNullOrEmpty(model.Action) && ids.Count > 0)
        Response.Write("Action: " + model.Action);
    if (!string.IsNullOrEmpty(model.Filter) && ids.Count > 0)
        Response.Write("Filter: " + model.Filter);
    return PartialView(model);
}

---

What I did was give my models a "FormId" property, which I set it it's constructor to a new Guid (probably can be random string or whatever).
Then in the partial view I set each form's id to the model's FormId, so each form have a unique id.

Now I just have to change my jquery not to select any dropdown, but select the dropdown in the form with the given id.

Completely stuck on that (my jQuery selection skills are shaky at best)

Old (working):

Code:

---

<script type="text/javascript">
    $("select#Action").change(function () {
        var action = $("#Action > option:selected").attr("value");
        var form = $("#productListForm");
        if (action)
            form.submit();
    });
</script>

---

New (not working, have to nut out the right jQuery selector I suppose)

Code:

---

<script type="text/javascript">
    $("#<&#37;= Model.FormId %> : select#Action").change(function () {
        var action = $("#<%= Model.FormId %> : "#Action > option:selected").attr("value");
        var form = $("#<%= Model.FormId %> : ");
        if (action)
            form.submit();
    });
</script>

---

Will go ask over at the JavaScript section, and if that pans out fine, come mark this as Resolved (crossing fingers!)

Here's what I did:
All my View Models derive from an abstract BaseViewModel class. I gave this base class a "FormId" property, and in it's constructor generate a unique id for the View Model (mostly won't be use, but well..)

Then, my partial view set the id of the form to "form+Model.FormId" and the dropdown list's to "whatever+Model.FormId".

The rest is simple (though I struggled with the jQuery). The following would just submit the form of which the action dropdown was changed:

Code:

---

    $("#action<&#37;= Model.FormId %>").change(function () {
        var action = $("#action<%= Model.FormId %> > option:selected").attr("value");
        var form = $("#form<%= Model.FormId %>");
        if (action)
            form.submit();
    });

---

So that works just fine, but the best news I did all this for nothing. Misinterpreted the requirements from the prototype, and won't be needing this after all. Dang!