Passing a viewmodel to another view page through AJAX

Question

My users currently have a view where they have to select what happens to each part. (harvest/transfer/dispose). After the user makes their selection I want them to be given a summary page of what they just selected.

Here is my view for the summary Page

@model PIC_Program_1._0.Models.ItemViewModel
@using PIC_Program_1._0.Models
@{
    ViewBag.Title = "SpecialOrderSummary";
}

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @*@Html.HiddenFor(model => model.ID)*@
    @Html.HiddenFor(x => x.ID)
    <h2>Special Order Summary</h2>
    <p style="color:red" class="noprint">Please review and verify </p>


    <h2>
        Transfers
    </h2>
    <h3> 
    Parts 
    </h3>
    foreach (var part in Model.Parts)
    {
    <p>@part.PartName</p>
    }

}

I tried doing a POST that then called the summary page that looks like this

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult SpecialOrderSelection(JobOrder job, ItemViewModel model)
        {
            //list of transfers
            //list of harvests
            //list of disposals      
            if (ModelState.IsValid)
            {
                // do whatever with 'model' and return or redirect to a View
            }
            return SpecialOrderSummary(model);

        }

Here is my ViewModel for reference,


    public class ItemViewModel
    {
        [Required]
        public int ID { get; set; }
        public string ItemId { get; set; }
        public string ItemName { get; set; }
        public string MFGNumber { get; set; }
        public IList<ItemPartViewModel> Parts { get; set; }
        public IList<ItemComponentViewModel> Components{ get; set; }
        public IList<ComponentPartViewModel> ComponentParts { get; set; }
        public IList<ComponentSubCompViewModel> ComponentSubComps { get; set; }
        public IList<SubCompPartViewModel> SubCompParts { get; set; }

        public IList<SubCompSubCompViewModel> SubCompSubComps { get; set; }
        public IList<SubCompSubCompPartViewModel> SubCompSubCompParts { get; set; }

    }

But this doesn't work as it just is reloading the same 'SpecialOrderSelection' page again. I have read that it would probably be best to post the ViewModel through AJAX instead of doing a form post that way I avoid having to refetch all of the data in the ViewModel. But I'm not sure how to accomplish this. Any help is appreciated.

Heres what I tried doing

 $(document).ready(function () {
        $("button").click(function () {
            $.ajax({
                url: '@IGT.baseUrl/JODetails/SpecialOrderSummary',
                data: $('#form').serialize(),
                type: 'POST',
            });
        });
     }); //getting green line that says ',' expected on this line

You might find this helpful: https://stackoverflow.com/questions/5980389/proper-way-to-use-ajax-post-in-jquery-to-pass-model-from-strongly-typed-mvc3-vie — RonC, Jul 10 '20 at 15:06
Thanks that does help but I'm still a little confused about how to do this @RonC — , Jul 10 '20 at 15:24
Josh - the example is fairly complete. What specifically are you confused about? — RonC, Jul 10 '20 at 16:06
@RonC I added in to my question what I had tried. I am doing something wrong but I'm not exactly sure what. Maybe you can look at it and determine whats wrong? — , Jul 10 '20 at 16:16
You have a stray quote char here that doesn't belong`"@IGT.baseUrl` — RonC, Jul 10 '20 at 16:17
@RonC nice catch. But still when I select submit it goes to my specialorderselection POST method rather than my SpecialOrderSummary method. At the end of my document.ready function I am receiving a green line on the ending ```});``` that is saying ```JS ' , ' expected``` Maybe this has something to do with it? — , Jul 10 '20 at 16:27
You were missing an extra `);` after one of the close braces. I edited your code and added them for you. Try that. — RonC, Jul 10 '20 at 16:50
@RonC Awesome that was the issue. Now it goes to the correct method, but strangely its skipping over the return(model); And going back to to page that it was just on. — , Jul 10 '20 at 17:06
Glad I could be of help. When doing an ajax call, you will always stay on the same page regardless of what endpoint you make the ajax call to. — RonC, Jul 10 '20 at 17:19
@RonC Oh wow then I guess this isn't what I wanted to accomplish. I wanted to return a summary page of what was just returned on the selection page. That's what I was trying to do here — , Jul 10 '20 at 17:27

Passing a viewmodel to another view page through AJAX

0 Answers0