An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.

Question

0.00/5 (No votes)

See more:

Hi guys, I am using Knockout Js to do Crud operation in MVC. Select, Add, Delete operations are working fine, but showing an error with Update operation. Error is
-------------------------------------------------------
PUT XHR http://localhost:58258/Product/UpdateProduct [HTTP/1.1 404 Not Found 2ms]
--------------------------
When I click on the above link, it shows following error
-------------------------------------------------
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.JsonResult UpdateProduct(Int32, MvcWithKnockoutJS.Models.TblProductList)' in 'MvcWithKnockoutJS.Controllers.ProductController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters

What I have tried:

Coding on KnockoutJs file is
-------------------------------

function formatCurrency(value) {
return "₹ " + value.toFixed(2);
}

function ProductViewModel() {
// Make the self as 'this' reference
var self = this;
//Declare observable which will be bind with UI
self.Id = ko.observable("");
self.Name = ko.observable("");
self.Price = ko.observable("");
self.Category = ko.observable("");

var Product = {

Id: self.Id,
Name: self.Name,
Price: self.Price,
Category: self.Category
};

self.Product = ko.observable();
self.Products = ko.observableArray();//contains the list of products

// Initialize the view-model
$.ajax({
url: 'Product/GetAllProducts',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
self.Products(data); // Put the response in ObervableArray
}
});

// Calculate total Price after initialization
self.Total = ko.computed(function () {
var sum = 0;
var arr = self.Products();
for (var i = 0; i < arr.length; i++) {
sum += arr[i].Price;
}
return sum;
});

// Add New Item
self.create = function () {
if (Product.Name() != "" && Product.Price() != "" && Product.Category() != "") {
$.ajax({
url: 'Product/AddProduct',
cache: false,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: ko.toJSON(Product),
success: function (data) {
self.Products.push(data);
self.Name("");
self.Price("");
self.Category("");
alert('Product has been added successfully!');
}
}).fail(
function (xhr, textStatus, err) {
alert(err);
});
}
else {
alert('EMPLY FIELDS ARE NOT ALLOWED\n--------------------------------------------------------------\nPlease enter all the values.\nAll fields are required.');
}
}

// Delete Product Details
self.delete = function (Product) {
if (confirm('Are you sure to delete"' + Product.Name + '" product ??')) {
var id = Product.Id;

$.ajax({
url: 'Product/DeleteProduct/' + id,
cache: false,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: id,
success: function (data) {
self.Products.remove(Product);
alert('Product has been deleted!');
}
}).fail(
function (xhr, textStatus, err) {
self.status(err);
});
}
}

// Edit Product Details
self.edit = function (Product) {
self.Product(Product);
}

// Update Product Details
self.update = function () {
var Product = self.Product();
var id = Product.Id;
console.log(id);
if (Product.Name != "" & Product.Price != "" & Product.Category != "") {
$.ajax({
url: 'Product/UpdateProduct',
cache: false,
type: 'PUT',
contentType: 'application/json; charset=utf-8',
data: ko.toJSON(Product),
success: function (data) {
self.Products.removeAll();
self.Products(data); // Put the response in observableArray
self.Product(null);
alert('Record has been updated successfully!');
}
}).fail(function (xhr, textStatus, err) {
alert(err);
});
}
else {
alert('Empty fields are not allowed!');
}
}

// Reset Product Details
self.reset = function () {
self.Name("");
self.Price("");
self.Category("");
}

// Cancel Product Details
self.cancel = function () {
self.Product(null);
}
}
var viewModel = new ProductViewModel();
ko.applyBindings(viewModel);

----------------------------------------------
Coding in Controller Class is
----------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcWithKnockoutJS.Repositories;
using MvcWithKnockoutJS.Models;

namespace MvcWithKnockoutJS.Controllers
{
public class ProductController : Controller
{
// References - https://www.codeproject.com/Tips/1072693/CRUD-in-ASP-NET-MVC-with-KnockOut-JS
static readonly ProductRepository repository = new ProductRepository();
// GET: Product
public ActionResult Products()
{
return View();
}
public JsonResult GetAllProducts()
{
return Json(repository.GetAll(), JsonRequestBehavior.AllowGet);
}
public JsonResult AddProduct(TblProductList item)
{
item = repository.Add(item);
return Json(item, JsonRequestBehavior.AllowGet);
}
public JsonResult UpdateProduct(int id, TblProductList product)
{
product.Id = id;
if (repository.Update(product))
return Json(repository.GetAll(), JsonRequestBehavior.AllowGet);
return Json(null);
}
public JsonResult DeleteProduct(int id)
{
if (repository.Delete(id))
return Json(new { Status = true }, JsonRequestBehavior.AllowGet);
return Json(new { Status = true }, JsonRequestBehavior.AllowGet);
}
}
}

----------------------------------------------------
Coding in Interface class is
------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcWithKnockoutJS.Models;

namespace MvcWithKnockoutJS.Interfaces
{
interface IProductRepository
{
IEnumerable<tblproductlist> GetAll();
TblProductList Get(int id);
TblProductList Add(TblProductList item);
bool Update(TblProductList item);
bool Delete(int id);
}
}

-----------------------------------------------------------------
Coding in Interface Member implementation class
--------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcWithKnockoutJS.Interfaces;
using MvcWithKnockoutJS.Models;

namespace MvcWithKnockoutJS.Repositories
{
public class ProductRepository : IProductRepository
{
MvcWithKnockoutJSEntities connectDB = new MvcWithKnockoutJSEntities();

// Implementation of interface member to gett all records from database.
public IEnumerable<tblproductlist> GetAll()
{
// TO DO : Code to get the list of all the records in database
return connectDB.TblProductLists;
}
// Implementation of interface member to get record by Id From Database
public TblProductList Get(int id)
{
// TO DO : Code to find a record in database
return connectDB.TblProductLists.Find(id);
}
// Implementation of interface member to insert data
public TblProductList Add(TblProductList item)
{
if (item == null)
{
throw new ArgumentNullException("item");
}
// TO DO : Code to save record into database
connectDB.TblProductLists.Add(item);
connectDB.SaveChanges();
return item;
}
// Implementation of interface member to update data into database
public bool Update(TblProductList item)
{
if (item == null)
throw new ArgumentNullException("item");
// TO DO : Code to update record into database
var products = connectDB.TblProductLists.Single(a => a.Id == item.Id);
products.Name = item.Name;
products.Category = item.Category;
products.Price = item.Price;
connectDB.SaveChanges();
return true;
}
// Implementation of interface member to delete data from database
public bool Delete(int id)
{
// TO DO : Code to remove the records from database
TblProductList deleteItems = connectDB.TblProductLists.Find(id);
connectDB.TblProductLists.Remove(deleteItems);
return true;
}
}
}

Posted 9-Mar-17 18:34pm

Ajit Kumar Pandit

Updated 9-Mar-17 19:58pm

v4

Add a Solution

Comments

Karthik_Mahalingam 10-Mar-17 1:02am

which line

Ajit Kumar Pandit 10-Mar-17 1:26am

Following line
------------------------------
// Update Product Details
self.update = function () {
var Product = self.Product();
var id = Product.Id;
console.log(id);
if (Product.Name != "" & Product.Price != "" & Product.Category != "") {
$.ajax({
url: 'Product/UpdateProduct',
cache: false,
type: 'PUT',
contentType: 'application/json; charset=utf-8',
data: ko.toJSON(Product),
success: function (data) {
self.Products.removeAll();
self.Products(data); // Put the response in observableArray
self.Product(null);
alert('Record has been updated successfully!');
}
}).fail(function (xhr, textStatus, err) {
alert(err);
});
}
else {
alert('Empty fields are not allowed!');
}
}

Karthik_Mahalingam 10-Mar-17 1:31am

what you are getting in var Product = self.Product();

Ajit Kumar Pandit 10-Mar-17 1:37am

var Product = {

Id: self.Id,
Name: self.Name,
Price: self.Price,
Category: self.Category
};

Karthik_Mahalingam 10-Mar-17 1:50am

does id and self.id both are same ?

Ajit Kumar Pandit 10-Mar-17 2:07am

Yes, only Id and id are different.

Karthik_Mahalingam 10-Mar-17 2:08am

check the solution

Ajit Kumar Pandit 10-Mar-17 2:24am

I have tried your solution, but it is also throwing me with the same error. I have been trying to resolved it from day after yesterday, but still feeling helpless. Thanks for all your responses.

Karthik_Mahalingam 10-Mar-17 2:25am

try hardcoding a value id = 0 to it.

Ajit Kumar Pandit 10-Mar-17 2:11am

I mean id is a local variable and Id is global variable

Karthik_Mahalingam 10-Mar-17 2:18am

but your actionmethod has two arguments to specify, you have to pass 2 parameters else it will throw the error.

Ajit Kumar Pandit 10-Mar-17 2:38am

I am passing the same(two parameters) still getting the same issue. I have shown you all my codes on the above.

Karthik_Mahalingam 10-Mar-17 2:42am

this is what i have tried and it works cool

 var Product = {
            Id: 1,
            Name:'a' 
        };
        var id = 1; 
       
        $.ajax({
            type: "POST",
            url: './home/save1',
            data: { id: id, product: Product },
            dataType: "json",
            success: function (d) {
                console.log(d);
            }
        });


 public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }

    }

    public class HomeController : Controller
    {
        
        public ActionResult Save1(int id, Product prod)
        {
            return Json("");
        }

Ajit Kumar Pandit 10-Mar-17 2:57am

In my case, i am not facing any problem with Selecting, adding, or deleting, but getting problem during updating. Would you please take a look on below ajax calling to update View Model?
--------------------------------------------------
// Update Product Details
self.update = function () {
var Product = self.Product();
var id = Product.Id;
console.log(Product);
console.log(id);
if (Product.Name != "" & Product.Price != "" & Product.Category != "") {
$.ajax({
url: 'Product/UpdateProduct',
cache: false,
type: 'PUT',
contentType: 'application/json; charset=utf-8',
//data: ko.toJSON(id, Product),
data: { id: id, Product: Product },
success: function (data) {
self.Products.removeAll();
self.Products(data); // Put the response in observableArray
self.Product(null);
alert('Record has been updated successfully!');
}
}).fail(function (xhr, textStatus, err) {
alert(err);
});
}
else {
alert('Empty fields are not allowed!');
}
}

Karthik_Mahalingam 10-Mar-17 3:01am

data: { id: id, product: Product },

product - smaller case

Ajit Kumar Pandit 10-Mar-17 3:57am

Hello sir, I change
--------------------
type:'PUT' to type:'POST' and it is working fine.

Karthik_Mahalingam 10-Mar-17 3:58am

Good

Ajit Kumar Pandit 10-Mar-17 1:27am

Error
-----------
PUT XHR http://localhost:58258/Product/UpdateProduct [HTTP/1.1 404 Not Found 2ms]
--------------------------
When I click on the above link, it shows following error
-------------------------------------------------
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.JsonResult UpdateProduct(Int32, MvcWithKnockoutJS.Models.TblProductList)' in 'MvcWithKnockoutJS.Controllers.ProductController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2017-03-09T19:58:00

Solution 1

UpdateProduct(int id, TblProductList product)

For the UpdateProduct Method you will have to pass id and an object, since id is missing you are getting the error

add this

data: {id:id,product:product},

Posted 9-Mar-17 19:58pm

Karthik_Mahalingam

An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.

1 solution

Solution 1

Add your solution here

Preview 0

An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us