Pass View Name to PartialViewResult By Jquery in MVC

Question

I need to pass Views names to PartialViewResult from Jquery, single Controller & single PartialViewResult method to use entire application,

working controller code:-

    public PartialViewResult addNew(string MenuId)
    {
        return PartialView(@"~/Views/Test/Add.cshtml");
    }

html jquery method:-

  $('#btn_add').click(function (e) {
      window.location.href = '@Url.Action("addNew", "Home")?MenuId=' + 1;
  });

this code working fine but why should we add-code the views name in controller rather pass views name from jquery method, it will be very easy to maintain and very easy method for code

Expected output: controller code:-

    public PartialViewResult addNew(string MenuId, string ViewNames)
    {
        return PartialView("@~/"+ ViewNames);

        //return PartialView(@"~/Views/Test/Add.cshtml");
    }

Expected output: html jquery method:-

  $('#btn_add').click(function (e) {
      window.location.href = '@Url.Action("addNew", "Home")?MenuId=' + 1 + '&viewname=' + 'Views/Test/Add.cshtml';

  });

above code showing An error occurred while processing your request. can anybody share your ideas?..

I need to pass views name from jquery method with single PartialViewResult method in MVC Controller

Answer 1

The actual problem here is you're passing slashes as query string value without using percent encoding, as shown in redirection code below:

window.location.href = '@Url.Action("addNew", "Home")?MenuId=' + 1 + '&viewname=' + 'Views/Test/Add.cshtml';

The generated URL from above example will look like this, which is not a valid URL because slash is a reserved character in URL string, hence "An error occurred while processing your request" message showed up:

/Home/addNew?MenuId=1&viewName=Views/Test/Add.cshtml => invalid trailing slashes

To fix this issue, it is necessary to put @Url.Encode() helper so that the slashes are encoded as %2f instead:

window.location.href = '@Url.Action("addNew", "Home")?MenuId=' + 1 + '&ViewNames=' + '@Url.Encode("Views/Test/Add.cshtml")';

which generates URL-encoded query string:

/Home/addNew?MenuId=1&ViewNames=Views%2fTest%2fAdd.cshtml => valid

If you're passing the URL from server-side variable/viewmodel string properties, make sure that all special characters passed as query string are encoded first:

window.location.href = '@Url.Action("addNew", "Home")?MenuId=' + @MenuId + '&ViewNames=' + '@Url.Encode(ViewName)';

However, I think better to include file path inside action method and pass just viewname without extension if you want to load partial view from same folder, hence avoiding Url.Encode() usage:

public ViewResult addNew(string MenuId, string ViewNames)
{
    return View(@"~/Views/Test/" + ViewNames + ".cshtml");
}

Notes:

1) window.location.href will reload the whole page, you must use ViewResult to do so. If you want to refresh partial view without reloading entire page, use AJAX callback instead.

$('#btn_add').click(function (e) {
    $.ajax({
        url: '@Url.Action("addNew", "Home")',
        type: 'GET',
        data: { MenuId: 1, ViewNames: '@Url.Encode("Views/Test/Add.cshtml")' },
        success: function (result) {
            $('#targetElement').html(result);
        },
        error: function (xhr, status, err) {
            // error handling
        }
    });
});

2) The action method parameters are able to recognize percent encoding characters and revert them to original string.

Related issue:

Characters allowed in a URL