We help IT Professionals succeed at work.

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

zonkerman
zonkerman asked
on
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) + '}';

                $.ajax(
                    {
                        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) {
                        AddNewLineItemReceived(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:

[HttpPost]
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:

Diagram of mvc view to call a view
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.
Comment
Watch Question

View Solution Only

Eduard GherguArchitect - Coder - Mentor
CERTIFIED EXPERT

Commented:

Hi,

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.

Programmer Analyst
Commented:

The solution for me in this case was to use the TempData dictionary object to help transport data from the PurchaseOrder View request to the LineItem View and back. There is no sensitive data in this data transport so using TempData should be fine. Additionally, to launch the LineItem view to create a new Line Item worked better for me to just us the standard submit action from within an Html.BeginForm block. The standard post operation provided by the submit button is what I used in this case rather than a button to run $.Ajax code in a JavaScript. Ajax was really not needed in this case since the whole PurchaseOrder View was to be replaced by the LineItem create view.