Asp.net MVC - How to Make a Wizard / Details Page

Question

I want to create a wizard / details page. I see that it works in one of two ways:

• Clicking on a row in the grid again brings up the same page with the addition of a details panel.
• When you click on a line, javascript / JSON invokes a controller action that returns data and fills the panel.

I would like to highlight the highlighted line. The selected row may contain several pages in the paged grid.

That sounds easy. Unfortunately, I'm new to asp.net MVC, and I'm not an experienced programmer. However, I can follow and adapt the examples. I would appreciate examples of both of the above methods that would help me learn MVC.

Thanks in advance.

Answer 1

:

PartialViews jQuery.

( jQuery). jQuery GET/PurchaseOrder/Detail (PartialView).

Javascript:

function GetDetails(id, enableEdit) {

        var detailsRowExists = $().find("#detailsRow").size();

        if (detailsRowExists) {
            // Delete details row
            // Note: need to rename id for row to be deleted
            // because jQuery does not wait for the row to be
            // deleted before adding the new row.
            $("#detailsRow").attr("id", "detailsRowOld");
            $("#detail").slideUp("normal", function() {
                $("#detailsRowOld").remove();
            });
        };


        // Put new row below selected one
        $("tr[id=" + id + "]").after("<tr id='detailsRow'><td colspan='4'><div id='detail'><img src='../../Content/wait20trans.gif' />Loading...</div></td></tr>");

        // Pull details into new row
        $.get("/PurchaseOrder/Detail/" + id, { enableEdit: enableEdit },
            function(data) {
                $("#detail").hide();
                $("#detail").html(data);
                $("#detail").slideDown("normal");
            }
        );

    }

, /.