Pass list of objects from view to controller

Question

0.00/5 (No votes)

See more:

Hi,

I want to, pass the list of objects, from view to the controller's action.

My aim is, i will display, the list of all product's details. The user can able edit any data (even all the data).

So after editing, i want to post, entire list of the object, to controller's action, where i will decide something to continue on.

My sample code is:-

This is model:

C#

public class API_VM
    {
        public API_VM()
        {
            elemetnNames = new HashSet<string>();
        }
        public List<XElement> Stoklar { get; set; }
        public HashSet<string> elemetnNames { get; set; }
        public string PaketAgirligi { get; set; }
        public string PaketGenisligi { get; set; }
        public string PaketUzunlgu { get; set; }
        public string PaketYuksekligi { get; set; }
        public string StokAded { get; set; }
        public string UrunAciklama { get; set; }
        public string Kategori { get; set; }
        public string UrunMarka { get; set; }
        public string UrunAdi { get; set; }
        public string UrunFiyat { get; set; }
        public string UrunDil { get; set; }
        public string SkuKodu { get; set; }
        public string ServisPolitikaNo { get; set; }
        public string KargoSablonID { get; set; }
        public string StokAzaltmaStrateji { get; set; }
        public string KargoyaVerilis { get; set; }
        public string UrunFoto1 { get; set; }
        public string UrunFoto2 { get; set; }
        public string UrunFoto3 { get; set; }
        public string UrunFoto4 { get; set; }
        public string UrunFoto5 { get; set; }
        public string UrunFoto6 { get; set; }
        public string ParentElement { get; set; }
        public string TedarikciLink { get; set; }


    }

C#

public class API_List:PageModel
    {
        [BindProperty]
        public List<API_VM> ApiList { get; set; }
    }

HTML

@model API_List
@{
    ViewData["Title"] = "UrunlerListe";
    Layout = "~/Views/Shared/_Layout.cshtml";
    int i = 0;

}
    <<form class="form-horizontal" method="post" asp-action="UrunPost">
    <table class="table table-striped">
        <tr>
            <th>Product Name</th>
        </tr>
        @foreach (var item in Model.ApiList)
        {
            <tr>
                <td>
                    <input type="text" asp-for="ApiList[i].UrunAdi" value="@item.UrunAdi" />
                </td>
            </tr>
        }
    </table>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>

C#

[HttpPost]
       public IActionResult UrunPost(API_List model) */ Model is always null.
       {

       }

What I have tried:

I gave "IList<api_vm>, List<api_vm>, API_VM[ ]" as model but they didnt work.

Posted 12-Jul-20 7:15am

Member 14769019

Updated 13-Jul-20 4:30am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Asif 7969814 · Answer 1 · 2020-07-13T04:30:00

Hi,

use the ajax post method

ex. in view java scriopt (note S3 is @HtmlEditFor u can use input type=text too)

var S3 = ($('#S3').val())
               City.push(S3.toString());
               // City.push(S3.toString());
               $.ajax({
                   type: "POST",
                   url: "/EmpLoyee/Focus",
                   data: JSON.stringify(City),
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   traditional: true

               });

in Controller

public ActionResult Focus(string[] City)
       {

           foreach (var item in City)
           {
               if (item.ToString()=="NA")
               {
                   OBJEmployee.PresentCity = "NO City";
                   PersonCity = "NO City";
                   TempData["CityLov"] = PersonCity;

               }
           }
           return View();
       }

if you want to play with html table you should work like this.

view:

 <input type="button" onclick="myCreateFunction()" value="Add New Row" />
<input type="button" onclick="myDeleteFunction('2')" value="Delete row" class="hidden" />

<table id="TB1" class="table table-bordered table-striped">
                   <tr>
                       <th>Qualification</th>
                       <th>PassingYear</th>
                       <th>Division</th>
                       <th>Percnet</th>
                       <th>Institute</th>
                       <th>Remark</th>
                       <th class="hidden">EmpID</th>
                       <th></th>
                   </tr>
                   <tr>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td class="hidden"><input type="text" value="" /></td>
                       <td><input type="button" onclick="getId(this)" value="Delete row"  /></td>
                   </tr>
                   <tr>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td class="hidden"><input type="text" value="" /></td>
                       <td><input type="button" onclick="getId(this)" value="Delete row"  /></td>
                   </tr>
                   <tr>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td><input type="text" value="" /></td>
                       <td class="hidden"><input type="text" value="" /></td>
                       <td><input type="button" onclick="getId(this)" value="Delete row"  /></td>
                   </tr>
               </table>

<script>
function myCreateFunction() {
  var table = document.getElementById("TB1");
  var row = table.insertRow(table.length);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);
  var cell6 = row.insertCell(5);
  
  var cell7 = row.insertCell(6);
  cell1.innerHTML = "<input type='text' value='' />";
  cell2.innerHTML = "<input type='text' value='' />";
  cell3.innerHTML = "<input type='text' value='' />";
  cell4.innerHTML = "<input type='text' value='' />";
  cell5.innerHTML = "<input type='text' value='' />";
  cell6.innerHTML = "<input type='text' value='' />";
  cell7.innerHTML = "<input type='button' onclick='getId(this)' value='Delete row' />";
}

function myDeleteFunction(id) {
    document.getElementById("TB1").deleteRow(id.value);
}
</script>

<script>
    function SendData() {
        //document.getElementById('info').innerHTML = "";
        var myTab = document.getElementById('TB1');
        var Details = [[]];
        // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.

        for (i = 1; i < myTab.rows.length; i++) {

            Details.push([myTab.rows[i].cells[1].children[0].value, myTab.rows[i].cells[2].children[0].value, myTab.rows[i].cells[3].children[0].value]);                  
        };
  

        $.ajax({
            type: "POST",
            url: "/EmpLoyee/Create",
            data: JSON.stringify(Details),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            traditional: true

        });

    }
</script>

Class:

public class Details
   {
       public string Qualification { get; set; }
       public string PassingYear { get; set; }
       public string Division { get; set; }
       public string Percnet { get; set; }
       public string Institute { get; set; }
       public string Remark { get; set; }

   }

in Controller

 public ActionResult Create(EmployeeDAL OBJ, List<Details> Details, List<Details> Details2)
        {
if (Details!=null)
            {
                foreach (var item in Details)
                {
                    string q = item.Qualification;
                }
            }
return view();
}

I think you got the ruff idea how to do it. thanks