ASP.NET MVC: Redirecting from one view to another

Question

Hi I am using the following code to redirect from a kendo grid to another page (View):

@(Html.Kendo().Grid<WM.ViewModels.StockReceiptsGridViewModel>()
    .Name("Grid")
    .ToolBar(toolbar => toolbar.Template("<a class='k-button k-button-icontext' onclick='addMaterialPopup()' href='#'></span>Create Stock Receipt</a>"))
    .Columns(columns =>
    {
        columns.Bound(p => p.StockReceiptID);
        columns.Bound(p => p.SupplierName);
        columns.Bound(p => p.Product);
        columns.Bound(p => p.Dimensions);
        columns.Bound(p => p.Quantity);
        columns.Bound(p => p.QuantityReserved);
        columns.Bound(p => p.PurchaseNumber);
        columns.Bound(p => p.Cost);
        columns.Bound(p => p.PhotosLink).Title("").ClientTemplate("<a href='/Photos/index?StockReceiptID=#=StockReceiptID#'>#=GetText()#</a>");
        columns.Command(command => command.Custom("Edit").Click("editreceipt"));

    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(false)
        .Model(model => model.Id(p => p.StockReceiptID))
                    .Read(read => read.Action("Read", "StockReceiptsGrid").Data("ExtraData"))
  )
)

Javascript:

function editreceipt(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var stockReceiptId = dataItem.StockReceiptID;

    window.location.href = "@Url.Action("Update","StockReceipt")"+"/"+stockReceiptId; // Problem code...

    }

The receiving method on the StockReceipt Controller is:

public ActionResult Update(int stockReceiptId)
{
   var stockReceipt = _stockReceiptRepository.GetAllStockReceipts().ToList().Where(r => r.StockReceiptID == stockReceiptId);

    var model = new StockReceiptViewModel();


    model.Notes = stockReceipt.First().Notes;



    return View("Index", model);
}

And here is my route configuration:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );
}

The Problem:

.. is that the above Javascript code is not redirecting, it is taking me to this URL: http://localhost:50439/StockReceipt/6

And reporting the 'Yellow Screen of Death' with this error:

The parameters dictionary contains a null entry for parameter 'stockReceiptId' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Update(Int32)' in 'WorcesterMarble.Controllers.StockReceiptController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. Parameter name: parameters

Where 6 is the ID.

If I remove the id element to become like this:

window.location.href = "@Url.Action("Update","StockReceipt")"

It works, but I need the ID because I want to load the selected 'ViewModel' in the destination view.

I wonder what am I doing wrong?!

I have tried using this, but to no avail.:

window.location.href = @Url.RouteUrl("Default", new { @Controller = "StockReceipt", @Action = "Update"}) + '//' + stockReceiptId;

Answer 1

Solved like this:

function editreceipt(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var stockReceiptId = dataItem.StockReceiptID;

    window.location.href = "@Url.Action("Update","StockReceipt")?stockReceiptId=" + stockReceiptId; 
    }

More details here