title: MVC view with Two models and a parital view
body: <p>A MVC create view has two sections for Invoice and InvoiceItem tables.</p>
  
  <ol>
  <li><p>Invoice details section is with default scaffolding code for create.</p></li>
  <li><p>Invoice item section has a button "Add Item" and a partial view. When the user clicks "Add Item", a jQuery UI pop will be shown to create Invoice items and it calls /Invoice/GetInvoiceItems action. This method appends the new invoice item with existing items(if any) and returns the partial view that is loaded in a Div(viewAPInvoiceIndex). This partial view has default scaffolding code for list. </p></li>
  </ol>
  
  <p>The created invoice items are not stored to DB till the user creates a complete invoice. Also the user will be able to edit/delete invoice items.</p>
  
  <p>Create.chtml:</p>
  
  <pre><code>&lt;div class="panel-body"&gt;
     &lt;div id="viewAPInvoiceIndex"&gt;
       @{ Html.RenderPartial("_APInvoiceIndex", (IEnumerable&lt;TransportationModule.Models.APInvoiceItem&gt;)@ViewBag.CurrInvItems); }
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Add invoice items code(for the button in the pop up):</p>
  
  <pre><code>$("#btnAddItem").click(function () {
     var currId = $('[id$=tableInvItems] tr').length;
     if (currId &lt; 1)
        currId = 1;
     var _item = { Id: currId, InvoiceNo: $('#txtInvNo').val(), OrderQty: $('#txtOrderQty').val(), UnitPrice: $('#txtUnitPrice').val()
     };
  
     $("[id$=viewAPInvoiceIndex]").load("/Invoice/GetInvoiceItems", { InvItem: _item });
     $('#mdGrnList').dialog("close");
  });
  </code></pre>
  
  <p>Action methods:</p>
  
  <pre><code>public ActionResult Create()
  {
      IList&lt;APInvoiceItem&gt; existingItems = new List&lt;APInvoiceItem&gt;();
      if (Session != null &amp;&amp; Session["ExistingItems"] != null)
         existingItems = (IList&lt;APInvoiceItem&gt;)Session["ExistingItems"];
      ViewBag.CurrInvItems = existingItems;
      return View();
  }
  
  // UPDATES THE MODEL WITH NEW ITEM AND RETURNS THE PARTIAL VIEW
  public ActionResult GetInvoiceItems(APInvoiceItem InvItem)
  {
     IList&lt;APInvoiceItem&gt; existingItems = new List&lt;APInvoiceItem&gt;();
     if (Session != null &amp;&amp; Session["ExistingItems"] != null)
        existingItems = (IList&lt;APInvoiceItem&gt;)Session["ExistingItems"];
     existingItems.Add(InvItem);
     Session["ExistingItems"] = existingItems;
     return PartialView("_APInvoiceIndex", existingItems);
  }
  
  // REMOVES AN INVOICE ITEM 
  public ActionResult DeleteInvItem(int id)
  {
     IList&lt;APInvoiceItem&gt; existingItems = new List&lt;APInvoiceItem&gt;();
     if (Session != null &amp;&amp; Session["ExistingItems"] != null)
       existingItems = (IList&lt;APInvoiceItem&gt;)Session["ExistingItems"];
  
     var itemToRemove = existingItems.SingleOrDefault(r =&gt; r.Id == id);
     if (itemToRemove != null)
        existingItems.Remove(itemToRemove);
  
     Session["ExistingItems"] = existingItems;
     return PartialView("_APInvoiceIndex", existingItems);
  }
  </code></pre>
  
  <p>I am able to create invoice items and partial view is loaded correctly. But if I add a new item and press Edit/Delete nothing happens. Seems the corresponding jQuery methods are not binded till the page is refreshed. Once the page is refreshed, I am able to delete an item.</p>
  
  <p>_APInvoiceIndex.chtml</p>
  
  <pre><code>&lt;td&gt;
     &lt;button class="btn btn-danger btn-sm" id="btnDeleteItem" data-id="@item.Id" type="button"&gt;&lt;/button&gt;
  &lt;/td&gt;
  
  $('[id$=btnDeleteItem]').click(function () {
     var invId = $(this).attr("data-id");
     $.ajax({
       url: '/Invoice/DeleteInvItem',
       data: { id: invId },
       success: function (data) {
          $("[id$=viewAPInvoiceIndex]").html(data);
       },
       error: function (request, textStatus, errorThrown) {
          alert(textStatus + " " + errorThrown);
       }
      });
  });
  </code></pre>
  
  <p>Also please advice whether this is the correct way to implement the above said scenario(creation of Invoice and InvoiceItems).</p>
  
  <p>Thanks for your time.</p>