0

I need:

  1. Acess /Client/Create
  2. Add dynamically Partial Views (/Product/Card) and bind them to Client.Products
  3. In each Partial View when i click in a button open a bootstrap modal windows where i can set Product's information
  4. Close the modal and reflect changes of modal reflect in the Card's Product.

The problem is: how to change product informations in another view(other than Card) and reflect to the product of the card?

@using (Html.BeginCollectionItem("Products"))
{
    @Html.HiddenFor(model => model.ClientID)
    @Html.HiddenFor(model => model.ProductID)


    <div class="card">
        <img class="card-img-top" src="http://macbook.nl/wp-content/themes/macbook/images/png/iphone318x180.png" alt="Grupo Logo">
        <div class="card-block">
            <h4 class="card-title">@Model.Name</h4>
            <p class="card-text">@Model.Desc</p>
            <div class="btn-group">
                <button type ="button" class="btn btn-primary open-modal" data-path="/Product/Edit/@Model.ProductID">Edit</button>
                <button type="button" class="btn btn-primary open-modal" data-path="/Product/Features/@Model.ProductID">Features</button>
            </div>
        </div>
    </div>

}

enter image description here

Rieth
  • 305
  • 1
  • 4
  • 13
  • What problem are you having? What is the result of the `data-path` attributes? –  Jun 01 '16 at 22:57
  • It's /Product/Edit/0 because in this view the model aren't saved by EF, so i need to pass the object product to a edit method ? – Rieth Jun 01 '16 at 23:45
  • Its a bit unclear what your trying to do here. `BeginCollectionItem()` is for editing items in a collection (and being able to dynamically add and delete them) so why would you have a link to go to another page to edit them (just edit them in the current page)? And how could you possibly go to another page to edit or view Features of something which does not even exist yet. –  Jun 01 '16 at 23:49
  • I Have a Client Create View. Inside this view i dynammically add Produtcs Cards (Partial View), but this products has so many collections, like features, manufacturers, and so on. For this i want create this Card with one button for edit each collection and a button to "edit" products informations(like name...), then when click in this button a modal opens for edit/add infomations. – Rieth Jun 01 '16 at 23:55
  • You have not given enough info to be sure, but you certainly cant redirect to editing additional details of an object which does not even exist yet. I suspect the partial you have shown needs to include all the extra properties you want to edit, but in a hidden element that gets displayed as a model when you click the button(s). –  Jun 02 '16 at 00:06
  • 1 - Acess Create Client View, 2 - Add Dynammically Product Cards Partial Views, 3 - Add a button in each card. 4- Click the button open a modal to set Product infomations (name, quantity,...) 5- Close modal and reflect the changes in the product(of card). The problem is: how to "send" the product from card to a modal – Rieth Jun 02 '16 at 02:39
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/113576/discussion-between-stephen-muecke-and-rieth). –  Jun 02 '16 at 02:43

1 Answers1

0

You can do this is another view (or by dynamically loading another view into a modal. The object has not been created yet, and since you using BeginCollectionItem() to generate new items, any other view you used would not be using the same Guid created by that helper so you would not be able to match up the collection items.

Instead, include the 'other' properties within the partial, but put them in a hidden element that gets displayed as a modal when you click the buttons.

The basic structure of the partial for adding/editing a Product would be

<div class="product">
    @using (Html.BeginCollectionItem("Products"))
    {
        @Html.HiddenFor(m => m.ClientID)
        @Html.HiddenFor(m => m.ProductID)
        <div class="card">
            ....
            <button type ="button" class="btn btn-primary edit">Edit</button>
        </div>
        // Modal for editing additional data
        <div class="modal">
            @Html.TxtBoxFor(m => m.SomeProperty)
            @Html.TxtBoxFor(m => m.AnotherProperty)
            ....
        </div>
    }
</div>

And then handle the buttons .click() event (using delegation since the partials will be dynamically added to the view) to display the associated modal (assumes you have a <div id="products"> element that is the container for all Products)

$('#products').on('click', '.edit', function() {
    var modal = $(this).closest('.product').find('.modal');
    modal.show(); // display the modal
});