How do I call/open a Razor view on a button click

Question

I have a grid in a view, User has an option to select one/more rows from the Grid and on clicking of a "Next" button, I need to show them a another view, where they can do additional tasks.

I created two views from Same Controller.

    public BatchController() : base("BATCH")
    {
    }

    // GET: BatchProcess
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Final()
    {
        return View();
    }

Javascript:

    $("#btnNext").click(e => {
    var url = "/Batch/Final";
    window.open('@Url.Action("Final", "Batch")');

Result:

what I am missing here?

Answer 1

The reason for why did your url is not correct is that @Url.Action("Final", "Batch") failed to parse successfully. When I input an incorrect URL:window.open('Url.Action("Final", "Batch")')(missing @ would caused the parse failure), the generated url is as follows:

But I could see you have coded it in a correct way:window.open('@Url.Action("Final", "Batch")').So I guess this js code may be placed in an external js file.If it is an external javascript file, it cannot be parsed. The above situation will also appear.

If you must put @Url.Action in an external JavaScript file, you can add attributes to the Next button.

<button class="btn-outline-info" id="btnNext" requestUrl="@Url.Action("Final", "Batch")">Next</button>

Then the external js get the url through attribute.

window.open(document.getElementById('btnNext').getAttribute('requestUrl'))

If your js code is not in external file,please check the @Url.Action if it is be broken.You could write the @Url.Action("Final", "Batch") in your razor view(e.g Inde.cshtml):

@Url.Action("Final", "Batch")

And then run the application to see the url if it is like below: