Html.RenderAction with Angular

Question

I try to write something like below;

Html.RenderAction("Reviews", "Poetry", new { id = "{{ poetry.ID }}" });

But it gives an error like "The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.PartialViewResult"

But if i write something like below it works fine;

var url = Url.Action("Reviews", "Poetry", new { id = "{{ poetry.ID }}" });

How can i pass an angular value in Html.RenderAction method?

Answer 1

Suppose you have controller action like this:

public class PoetryController : Controller
{
    public PartialViewResult Reviews(int id)
    {
        // do something
    }
}

The RenderAction method is parsed and rendered from server before it sent to client's browser, therefore your first approach is not possible because Angular expressions like {{ poetry.ID }} cannot be parsed properly by server-side code as action parameter, hence it passed as null and throwing non-nullable parameter exception since id declared as int, not Nullable<int>.

Assumed you want to load partial view using Angular value (or JS value), usually $http() function is used inside the controller and then call the function name which contains HTTP request:

JS variable in Razor

var pageUrl = '@Url.Action("Reviews", "Poetry")';

Angular function

$http({
    method: 'GET',
    url: pageUrl,
    params: {
        id: poetry.ID
    }).then(function (response) {
        // load partial view here
        angular.element('#targetElement').html(response);
    });

Or using shorthanded $http.get() since RenderAction requires GET method to render partial view contents:

$http.get(pageUrl + '?id=' + poetry.ID).then(function (response) {
    // load partial view here
    angular.element('#targetElement').html(response);
});