Post MVC view data with jQuery

Question

HI, I am sending Product Model to my controller method. i am getting string for posted form. it need to send it in key/value pair or whole product model. Any help would be apprecaited.

 var link = '/Product/AddRec?callback=?';

 var formdata = $("form").serialize(); 
               $.ajax({
                   url: link,
                   type: 'POST',
                   data: { 
                        'obj' : formdata,
                       'jin': 1,
                       'deb': 2)
                   },
                   dataType: "jsonp"

               });

Why are you including <br /> tags in your javascript?

Erik Funkenbusch
– Erik Funkenbusch

2011-02-23 21:17:08 +00:00
Commented Feb 23, 2011 at 21:17 — Erik Funkenbusch
– Erik Funkenbusch, Commented Feb 23, 2011 at 21:17
sorry ignore <br /> i did to format post here

Hidsman
– Hidsman

2011-02-23 21:29:02 +00:00
Commented Feb 23, 2011 at 21:29 — Hidsman
– Hidsman, Commented Feb 23, 2011 at 21:29

Kim Tranjan · Accepted Answer · 2011-02-23 22:46:00Z

1

I think it should work

$.ajax({
    url: '/Product/AddRec?callback=?',
    type: 'POST',
    data: $("form").serialize() + "&jin=1&deb=2"
});

edit:

as Darin Dimitrov requested, here go my humble explanation

Consider my Product class

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

I suppose your action is something like

[HttpPost]
public ActionResult AddRec(Product product, int jin, int deb) {
    // code
}

The form

<form id="productForm">
    <%: Html.HiddenFor(p => p.Id) %>
    <%: Html.TextBoxFor(p => p.Name) %>
    <input type="button" value="Send form" onclick="SendForm();" />
</form>

Suppose that Id = "1" and Name = "Darin Dimitrov".

jQuery will serialize my form like this

Id=1&Name=Darin+Dimitrov

and will concat with the extra data to become

Id=1&Name=Darin+Dimitrov&jin=1&deb=2

<script type="javascript/text">
    function SendForm() {
        $.ajax({
            url: '/Product/AddRec?callback=?',
            type: 'POST',
            data: $("#productForm").serialize() + "&jin=1&deb=2"
        });
    }
</script>

the action should receive

product.Id = 1
product.Name = "Darin Dimitrov"
jin = 1
deb = 2

that's all, sorry If I can't help you OP.

edited Feb 23, 2011 at 22:46

answered Feb 23, 2011 at 22:03

Kim Tranjan

4,5613 gold badges42 silver badges39 bronze badges

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

4 Comments

Kim Tranjan Over a year ago

That's odd, here works. Do you have another solution to share with us @Darin Dimitrov?

Darin Dimitrov Over a year ago

@Kim Tranjan, no, I don't, because I don't know what is being asked here :-) The OPs question is not clear to me. I don't know what is his scenario and what is he trying to achieve.

Darin Dimitrov Over a year ago

@Kim Tranjan, so probably you could explain better what is this code supposed to do? What is the actual request being sent? How does the controller action would look like, etc ...?

Darin Dimitrov Over a year ago

@Kim Tranjan, excellent answer, +1. It's a pity I can't upvote your answer multiple times. I don't know if this is the OPs scenario but your answer is definitely very good now and should serve as example.

Jeff S · Accepted Answer · 2011-02-23 21:34:45Z

0

I would use the jQuery form plugin to do this. It handles serializing the form contents and, if you look at the options, you can specify additional data. Your example above would become:

$.ajaxSubmit({
                   url: link,
                   type: 'POST',
                   data: { 
                       'jin': 1,
                       'deb': 2)
                   },
                   dataType: "jsonp"

               });

It takes care of serializing the form and sending the data to the server in the appropriate form.

answered Feb 23, 2011 at 21:34

Jeff S

7,49432 silver badges32 bronze badges

Collectives™ on Stack Overflow

Post MVC view data with jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related