How to pass table data to controller in MVC

Question

0.00/5 (No votes)

See more:

I have a model with property named List<place>
place has property like
placename,
placedescription

now I have two textboxes to enter placename and description, after that I'm clicking add button and those data inserted in a table tbody just below the Add button by jquery. So table row is increasing.

<table id="tblPlacelist">
<thead>
<tr>
<th>Place Name</th>
<th>Place Description</th>
</tr>
</thead>
<tbody></tbody>
</table>

Now the thing is, how can I pass the table row data as list?

I have taken a partial razor view and the list<place> declared above of the view.

What I have tried:

The same problem what described above.

Posted 24-Jan-17 7:59am

souvikcode

Updated 24-Jan-17 18:01pm

Add a Solution

Comments

Afzaal Ahmad Zeeshan 24-Jan-17 14:52pm

Tables are generally used to render the results.

I can only suggest that you take the data and create a sample object from it. You can try to read the row and column values, and then have a simple JavaScript object. Then send it to the controller.

souvikcode 24-Jan-17 23:10pm

I'm very new in MVC. I need table here because user can delete row,add row to table by javascript. I don't know any other good way to make a collection in front end. So if you can post any sample code,that will be better.

2 solutions

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)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 1 · 2017-01-24T17:38:00

Solution 1

Check this out - How to Post HTML Table Rows as a List/Array to MVC Controller[^].

Posted 24-Jan-17 17:38pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Ramesh Kumar Barik · Answer 2 · 2017-01-24T18:01:00

Solution 2

Create jquery function to pass the table data into contoleer

function SaveData() {

//Create array object to push the table data into it.
var selected = new Array();
//Push the table data into it.

$('#table_bodyID tr').each(function () {
selected.push({
JsonObject1: $tr.find('td:eq(0) input[type=hidden]').val(),
JsonObject2:$tr.find('td:eq(1) input[type=Text]').val()
});
});

$.ajax
({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "ContollerName/ActionMethodname/",
data: JSON.stringify({ ActionMethodParamterName: selected }),
dataType: "json",
success: function (data) {
alert('Success')
},
error: function (x, e) {
alert('Failed')
}
});

}

Note: Here JsonObject1, JsonObject2 are the properties of the model which you are passing the data from view to controller.

Posted 24-Jan-17 18:01pm

Ramesh Kumar Barik

Comments

souvikcode 25-Jan-17 2:37am

This is same as when we pass data from ajax to asp webmethod. Its fine. But I have to post more data to that controller with that table.
Say, hallName,Hall description is property of a class hallmaster. and table will go to property "hall_place_link",which is list. Now you can understand I hope. In this case I have to post the full model in ajax?

souvikcode 25-Jan-17 5:06am

Its not working when I call this function on the button click which is posting the data to controller.

Ramesh Kumar Barik 25-Jan-17 5:09am

What is the issue?

1. Controller method is not called?
2. Or any issue in ajax call.

souvikcode 25-Jan-17 5:15am

see,I have created a javascript function like this

function saveData(model) {
alert('hi');
$("#tblPlaceList").find("tbody").find("tr").each(function () {
model.SelectHall.hall_Place_link.push({
hallPlaceId: $(this).find("td:eq(0)").html(),
placeName: $(this).find("td:eq(1)").html(),
placeDescription: $(this).find("td:eq(2)").html(),
avDrawing: "",
hallId: model.SelectHall.hallId
});
});

$.ajax
({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Hall/Insert",
data: JSON.stringify({ obj: model }),
dataType: "json",
success: function (data) {
alert('Success')
},
error: function (x, e) {
alert('Failed')
}
});
}

first of all how can I pass the model parameter from view to that javascript function. And will this be done by the button which is doing postback or I have to prevent the postback.

Ramesh Kumar Barik 25-Jan-17 5:32am

souvikcode 25-Jan-17 5:42am

I can understand it. but what I'm passing in "varhallId" is the model of this partial view. Now got it?
Because the model itself has more data filled up bu user. I just need to populate the hall_place_link in javascript.

Ramesh Kumar Barik 25-Jan-17 5:51am

The model of that view can not directly pass to the jquery function.
As you only want to pass the model single object data with the list of data to the action method. As you have created the class object for your action method. create same structure in Jquery and post same through ajax method.

souvikcode 25-Jan-17 6:41am

That means I have to create same model object in javascript. and pass data to javascript from view. No way to pass existing model.

Ramesh Kumar Barik 25-Jan-17 6:48am

Yes, Model is only the data communicate between view (html pages etc) and Controller.