List in hidden field, user needs to add/remove items

[FunkyDexter]

Hi Guys

I have a model which contains a list. I need to pass this list to a view, have the user make some additions and deletions (this will be done via a jsTree bit I don't think that's really relevant) and then have the updated list returned to the appropriate controller to update the DB.

The list won't be visible in the view (it will be represented via the jsTree) so my first though was to put it in a Hidden Field. Of course, you can't put a list in a hidden field but I could dynamically create a set of hidden field using javascript. I'm also happy that I can add and remove hidden fields in response to user actions using javascript. Where I'm stuck, is how do I "push" the updated list back to the controller? If it was just a single value field it gets pushed back automatically because it's named after the property in the model but that won't be the case with a set of hidden fields. Any ideas?

Failing that, can anyone think of a different approach to resolving this problem?

Any help will be gratefully received
FD

[KGComputers]

Where I'm stuck, is how do I "push" the updated list back to the controller? If it was just a single value field it gets pushed back automatically because it's named after the property in the model but that won't be the case with a set of hidden fields. Any ideas?

Hi FD,

You mean to say, your gonna send the values of those hidden fields to a controller action through a parameter via POST?

Can you include in your post the html code that contains the hidden fields generated by your Javascript?

KGC

[FunkyDexter]

Essentially, yes. The way I understand it, an MVC view builds up an appropriate model and passes it to the post request. I need a way of getting my list into that model just before it's posted. Normally it happens behind the scenes because MVC builds up an appropriate model based on the fields in the form. That's why I first thought of hidden fields - but I can't see a way to map them onto the model that's getting generated. Failing that, if I could somehow sort of "intercept" the post before it's sent and push my own values onto the model or as parameters, that would also do the trick.

Or I could so something else entirely if anyone can suggest something that would work.

[KGComputers]

Does your html code look similar to this?

@using (Html.BeginForm(new { id = "CustomerForm" }))
{
    <input type="hidden" value="100" name="PersonID" />
    <input type="hidden" value="200" name="PersonID" />
    <input type="hidden" value="90" name="PersonID" />
    <input type="submit" value="Match" />
}

additional codes would be helpful..

KGC

[FunkyDexter]

Does your html code look similar to this?

Well, it doesn't exist at all yet because I wasn't sure this was the right way to go about it but that's the sort of thing I had in mind. I'd build up those hidden fields dynamically using razor then add to and delete from them using java script in response to users checking and unchecking items in the jsTree but ultmately, yes, thats what I envisage it looking like. The thing is I believe the controller would recieve those as a set of parameters (which would have to be fixed length so won't work for me) whereas I really need it to recieve them as a list (which would be variable length - which is what I need), ideally as a property of the model so it's in keeping with the general MVC aproach. I'll try and post an example of some code (probably not working) tonight when I get home.

That said, I've been doing a bit of research on the net today and think I've moved on a bit. I think I can post the selected value using an Ajax post a bit like this. That will certainly allow me to pass the array of selected items. I'm not sure if the controller will still recieve an instance of my model if I do that, though, and I'm not at home to try it out but I'll have a punt this evening.

[KGComputers]

Hi FD,

Based from the link provided which is to traverse the tree, I guess, that's the better approach in passing the data to the controller rather than creating hidden fields dynamically.

I'm not sure if the controller will still receive an instance of my model if I do that, though, and I'm not at home to try it out but I'll have a punt this evening.

Well, whatever the values of those objects are, parsing them would be the fix. Just an assumption.

KGC

[FunkyDexter]

Here's the sort of thing I had in mind:-

        <div id="ProductInterests">  
            <ul>
                @foreach (var productGroup in ViewBag.ProductGroups)
                {
                    <li class="jstree-open">@productGroup.Name
                        <ul>
                            @foreach (var product in productGroup.Products)
                            {
                                if (Model.LeadProductInterests.Any(lpi => lpi.ProductID == product.ID))
                                { 
                                    <li data-jstree='{"checked":true}'>
                                        @product.Name
                                        <input type="hidden" name="input" + @product.ID value=@product.ID />
                                    </li>
                                }
                                else
                                { 
                                    <li data-jstree='{"checked":false}'>@product.Name</li>
                                }
                            }
                        </ul>
                    </li>
                }
            </ul>
        </div>

That div is nested inside a straight forward Form:

@using (Html.BeginForm()) {
//stuff
}

In a strongly typed view declared thusly:-

@model Ultimate_Leads.Models.Lead

I've just thrown that together to demonstrate the sort of thing I'm thinking of so it's probably not quite right but should serve as a demo of the principal. I was hoping to add to and remove hidden fields as appropriate, then have the values somehow get bundled up into the appropriate list in the Lead model this view is based on. That way I could have this controller:-

public ActionResult Edit(Lead lead)

interrogate the lead to retrieve the products a user selected.

Alternatively I could pass the list of selected values into an ajax post as per the SO thread I linked to. My concern with that is that the controller is expecting a Lead and nothing in the page is building that. It's normally handled automatically by dint of the fact that it's a Form post from a strongly typed view and I'm not sure if using an ajax post will override that behaviour. If it does I could still pass all the attributes of a lead to the post as individual parms but it would be starting to get a bit messy at that point. A lead has quite a lot of attributes.

What I'd really like to do is somehow inject the list of selected values (either retrieved from hidden fields or directly from the tree view) into the model as the form gets posted. That would be the most "MVC" approach but I'm not sure how to do it or if it's even possible. Hence my original question.

Sadly I was too busy to try any of this out last night and I'm not going to get to tonight either but hopefully I should get a chance tomorrow.

[FunkyDexter]

Haven't had a chance to come back to this for a few days but sat down tonight and made some decent headway.

I found this allows me to set values of list attributes in a model:-

        @for (int i = 0; i < Model.LeadProductInterests.Count; i++)
        {
            @Html.HiddenFor(model=>model.LeadProductInterests[i].ProductID)
            @Html.HiddenFor(model=>model.LeadProductInterests[i].LeadID)
        }

That results in appropriate hidden input fields being created in the page source and the values being passed back to the controller in the LeadProductInterests Attribute of the Lead Model. Exactly what I want to see.

At the moment I've just got that loop in the main form code so it's not actually responding to what the user has selected - it's just passing the same values back as it originally received so I'm not there yet. However I believe I can just write a $("form").submit function to run when the form is submitted. This will grab the selected values from the tree and do the java script equivalent of the razor loop above to create the hidden fields just before the submit is actually processed. I'll be trying that out tomorrow.