C#•13mo ago

✅ How can I pass data from JS to a ViewModel?

Sorry in advance if the issue is JS related. I'm trying to make a small MVC project - I'm having trouble trying pass an object from JS then to the Controller. I can pass the data normally when using a Model but I don't know how to do it when dealing with a ViewModel. The Transactions Model would always return a NULL. Any help is very much appreciated. Many Thanks! JS Function:

function insert() {
    var formData = {
        Transactions: {
            Transactions_Id: $('#Transactions_Id').val(),
            Transactions_TransactionName: $('#Transactions_TransactionName').val(),
            Transactions_Description: $('#Transactions_Description').val()
        }
    }

    $.ajax({
        url: '/customer/dashboard/insert', type: 'post', data: JSON.stringify(formData), contentType: 'application/json',

...

function insert() {
    var formData = {
        Transactions: {
            Transactions_Id: $('#Transactions_Id').val(),
            Transactions_TransactionName: $('#Transactions_TransactionName').val(),
            Transactions_Description: $('#Transactions_Description').val()
        }
    }

    $.ajax({
        url: '/customer/dashboard/insert', type: 'post', data: JSON.stringify(formData), contentType: 'application/json',

...

Controller:

public IActionResult Insert(TransactionsVM transactionsVM)
  {
      if (ModelState.IsValid)
      {
          _unitOfWork.Transactions.Add(transactionsVM.Transactions);
          _unitOfWork.Save();
          return Json("Transaction Recorded");
      }
      return Json("Model Invalid, not saved");
  }

public IActionResult Insert(TransactionsVM transactionsVM)
  {
      if (ModelState.IsValid)
      {
          _unitOfWork.Transactions.Add(transactionsVM.Transactions);
          _unitOfWork.Save();
          return Json("Transaction Recorded");
      }
      return Json("Model Invalid, not saved");
  }

ViewModel:

    public class TransactionsVM
    {
        public Transactions Transactions { get; set; }
        [ValidateNever]
        public IEnumerable<SelectListItem> IncomeList { get; set; }
        [ValidateNever]
        public IEnumerable<SelectListItem> ExpenseList { get; set; }
    }
}

    public class TransactionsVM
    {
        public Transactions Transactions { get; set; }
        [ValidateNever]
        public IEnumerable<SelectListItem> IncomeList { get; set; }
        [ValidateNever]
        public IEnumerable<SelectListItem> ExpenseList { get; set; }
    }
}

5 Replies

Angius•13mo ago

Well, the shape of the data doesn't match You're sending

{
  Transactions: {
    Transactions_Id: ...,
    Transactions_TransactionName: ...,
    Transactions_Description: ...
  }
}

{
  Transactions: {
    Transactions_Id: ...,
    Transactions_TransactionName: ...,
    Transactions_Description: ...
  }
}

but the TransactionsVM your endpoint expects is

{
  Transactions: ...,
  IncomeList: ...
  ExpenseList: ...   
}

{
  Transactions: ...,
  IncomeList: ...
  ExpenseList: ...   
}

And you seem to be just discarding the two list properties...?

Ugly GodOP•13mo ago

Thanks for the answer. I'm only using the lists to display contents for a select input, they're on ValidateNever, because I'm trying to have all CRUD operations on one page. But I'm not sure if its a smart idea. Since im trying to return only the Transactions, it should look something like this right?

Transactions:id":8,"name":"Salary","categoryType":"Income"...

Transactions:id":8,"name":"Salary","categoryType":"Income"...

Angius•13mo ago

Create a DTO just for data input, something like

public record TransactionData(int Id, string Name, string Description);

public record TransactionData(int Id, string Name, string Description);

make your controller take a TransactionData data, and send a JSON like

const data = {
  Id: ...,
  Name: ...,
  Description: ...
};

const data = {
  Id: ...,
  Name: ...,
  Description: ...
};

You don't have to — and shouldn't, really — use the same class for data input and data output

Ugly GodOP•13mo ago

Got it working now, thanks so much. Its a small personal project but I'll try to clean up my code as a learning experience.

Accord•13mo ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

✅ How can I pass data from JS to a ViewModel?