Posting form elements with jQuery in ASP.NET MVC not working

Question

I am using ASP.NET MVC and jQuery.

I have a textbox and an HTML table with data in, for example:

<form action="/Server/Test" method="post">

     <input type="text" id="ServiceAccount" />

     <table>
          <tr>
               <th>Heading 1</th>
               <th>Heading 2</th>
          </tr>
          <tr>
               <td>Cell data 1</td>
               <td>Cell data 2</td>
          </tr>
     </table>

</form>

The table above is not bound to a view model, it gets populated via AJAX/JSON.

I need the value of the textbox and the cell data to be posted to my controller's action method. So if I typed in 1234567 in the textbox then I need this value posted to the action method together with the contents of the table. I need the table data also for processing. Is this possible? I can't find a sample.

My action method looks like this:

[HttpPost]
public ActionResult Test(string[] data)
{
     // Use the value Cell data 1
     // Use the value Cell data 2

     return View();
}

Given my code below it is not hitting my action method:

$('form').submit(function () {
     $.post('@Url.Action("Test", "Server")', $('form').serialize(), function (data) {
          alert('success');
     });
     return false;
});

I'm not understanding what I am doing wrong.

It just has the default configuration as when you start the MVC project. — Brendan Vogt
– Brendan Vogt, Commented Feb 25, 2013 at 8:05
There is either a javascript error or its a routing issue. If you open the debug console in your browser, do you see any JS errors ? Ifyou open the network tab, are you getting a 404 ? — Matt Randle
– Matt Randle, Commented Feb 25, 2013 at 8:20
You also need a name attribute on your input field and to set the name of the parameter of your action method to the same name. Change the type to a string from a string array. — Matt Randle
– Matt Randle, Commented Feb 25, 2013 at 8:23

Community · Accepted Answer · 2017-05-23 12:18:59Z

0

I need the value of the textbox and the cell data to be posted to my controller's action method. So if I typed in 1234567 in the textbox then I need this value posted to the action method together with the contents of the table. I need the table data also for processing. Is this possible? I can't find a sample.

Yes, it's possible, but your table must contain hidden inputs, tr and td data can't be sended with submit (normal submit, not ajax), also serialize() do not serialize table rows. Look at this question:

How to submit a table with dynamic rows of data via asp.net mvc or jquery?

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Feb 25, 2013 at 8:29

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brendan Vogt Over a year ago

Thanks. I had a look at the code and it mentions input types. How does this relate to tables? Have you got some sample working code for me please?

webdeveloper Over a year ago

@BrendanVogt As you wrote, you want to submit table content, just add hidden inputs with same data in td tags with jquery. The main idea is to create correct names, which will be binded on server side. How it could be done, you can see in article from my link.

Murali Murugesan · Accepted Answer · 2013-02-25 09:41:28Z

0

Basically when you submit the form, Only form elements like INPUT, Hidden, TextAra are submitted, NOT div, table, span, etc.

So use hidden fields for the table data if you want to submit.

Or better way is loop the table data, prepare JSON and post it as a parameter.

$('form').submit(function () {

     var myPostData=//construct this from table and convert as JSON
     $.post('@Url.Action("Test", "Server")', {data:myPostData}, function (resp) {
          alert('success');
     });
     return false;
});

answered Feb 25, 2013 at 9:41

Murali Murugesan

22.6k18 gold badges76 silver badges123 bronze badges

Comments

user1193035 · Accepted Answer · 2013-03-06 18:02:29Z

0

Set WebMethod in your controler action methode for

[WebMethod]
[HttpPost]
public ActionResult Test(string[] data)
{
     // Use the value Cell data 1
     // Use the value Cell data 2

     return View();
}

answered Mar 6, 2013 at 18:02

user1193035

Collectives™ on Stack Overflow

Posting form elements with jQuery in ASP.NET MVC not working

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest