Link to home
Start Free TrialLog in
Avatar of zonkerman
zonkermanFlag for United States of America

asked on

How does an MVC 5 view request with parameter data a controller to launch another view

This is an MVC 5 project. I am having a problem getting a second view to be shown from a parent view. My parent view is a purchase order which has line items. The line items are to be added by launching a second view from the parent view. Both views use the same controller but each has their own action method. I use the below JavaScript from the PurchaseOrder view to pass data to PurchaseOrderAddItem view (child view):

$(document).ready(function () {
        $('#PurchaseOrderLineItemAddId').click(function () {
            var aPurchaseOrderViewModel = @Html.Raw(Json.Encode(Model));    
            var selectedVendorText = $('#ddlvendors option:selected').text();
            var selectedVendorValue = $('#ddlvendors option:selected').val();  
            var LineItemReqJsonObj = {};

            LineItemReqJsonObj.PurchaseOrderId = aPurchaseOrderViewModel.PurchaseOrderId;
            LineItemReqJsonObj.VendorText = selectedVendorText;
            LineItemReqJsonObj.VendorValue = selectedVendorValue;

            var dataToPass = '{aLineItemReqJsonObj: ' + JSON.stringify(LineItemReqJsonObj) + '}';

                        type: "POST",
                        //data: '{ aPurchaseOrderViewModel: ' + JSON.stringify(aPurchaseOrderViewModel) + ' }',
                        //data: aPurchaseOrderViewModelStr,
                        data: dataToPass,
                        url: '@Url.Action("PurchaseOrderAddItem")',
                        contentType: "application/json; charset=utf-8",
                        datatype: "json"
                    .done(function (aNewLineItemViewModel) {
                    .fail(function (xhr) {
                        alert('error', xhr);

Open in new window

Below is the action method in the controller which receives the above ajax request:

public ActionResult PurchaseOrderAddItem(LineItemReqJsonObj aLineItemReqJsonObj)
  LineItemViewModel aLineItemViewModel = new LineItemViewModel();

  aLineItemViewModel.PurchaseOrderId = aLineItemReqJsonObj.PurchaseOrderId;
  aLineItemViewModel.VendorId = Convert.ToInt32(aLineItemReqJsonObj.VendorValue);

  return View(aLineItemViewModel);

Open in new window

Below is the class in the controller which gets data filled into it as it is passed in from the JavaScript:

public class LineItemJsonObj
      public string PurchaseOrderId {get;set;}
      public string VendorText { get; set; }
      public string VendorValue { get; set; }

Open in new window

The below diagram illustrates what I am trying to do:

User generated image
As the diagram shows, I am unable to get the PurchaseOrderAddItem View to be shown. How do I get the PurchaseOrderAddItem View to show, receiving parameter data, after the PurchaseOrder View has invoked the PurchaseOrderAddItem Action From the controller? Thanks in advance.

-- UPDATE 2/17/2020 1:38PST--
I am probably incorrect in thinking the controller could start the PurchaseOrderAddItem View which when
closed could get the resulting new model data somehow back to the PurchaseOrder
View with the JavaScript that started this.

I am beginning to think this approach using the JavaScript $Ajax to
reach the controller is not the right way to do this. I'm checking now to see
if maybe I should of just loaded another web page from the PurcahseOrder View
with parameter data to create a new PurchaseOrderAddItem View.  The challenge here though would
be to probably pack up the entire PurchaseOrder view model data to go with the
PurchaseOrderAddItem View request. If I have the entire PurchaseOrder View Model
data when I exit the PurchaseOrderAddItem View I will be able to load a new
PurchaseOrder View and pass it all the data that was in the first instance so it
is repopulated to include the newly added line items. I'm not sure this is
the right way to do this. I have not seen any examples yet of how this type of
application view presentation problem is handled. I would appreciate it if anyone can
point me to any internet articles that perhaps cover how to design this type of
MVC application. This is very easy to do in desktop apps but web development
with MVC makes this very different and needing a lot more work than something
in WPF or WinForms.
Avatar of Eduard Ghergu
Eduard Ghergu
Flag of Romania image


You have over-engineered the functionality. The normal way of doing it is to display the view with the order items. When you press Add New Item, a new view with the New Item fields should be displayed. After pressing Save or Cancel, the initial view should be displayed with the order items rerendered. If you have a different scenario that you need to implement, please describe it.

Avatar of zonkerman
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial