passing model from view to controller using jquery

Question

I have a view

@using staffInfoDetails.Models
@model staffInfo

<link href="../../Content/myOwn.css" rel="stylesheet" type="text/css" />
@{staffInfo stf = Model; 
  }

<div id="education1">
@using (Html.BeginForm("addNewEdu","Home",FormMethod.Post))
{
    @Html.HiddenFor(x=>x.StaffId)
    <table>    
    <tr>
        <th>Country</th>
        <th>Board</th>
        <th>Level</th>
        <th>PassedYear</th>
        <th>Division</th>
    </tr>     
    <tr> 
       @Html.EditorFor(x => x.eduList)
    </tr>
    <tr>
    @*<td><input type="submit" value="create Another" id="addedu"/> </td>*@
    @*<td>@Html.ActionLink("Add New", "addNewEdu", new {  Model })</td>*@    
    </tr>
    </table>  
}
<button id="addedu">Add Another</button>
</div>

I want to pass the model staffInfo to controller using jquery as below

<script type="text/javascript">
    $(document).ready(function () {
        $("#addedu").live('click', function (e) {
//            e.preventDefault();           
            $.ajax({
                url: "Home/addNewEdu",
                type: "Post",
                data: { model: stf },//pass model
                success: function (fk) {
                    //                    alert("value passed");
                    $("#education").html(fk);
                }

            });
        });
    });
</script>

the jquery seems to pass only elements not whole model so how can I pass model from the view to the controller so that I don't have to write the whole parameters list in jquery

Deepak Murali · Accepted Answer · 2012-10-03 12:25:15Z

5

u can give ID to the form by using this

@using (Html.BeginForm("addNewEdu", "Home", FormMethod.Post, new { id = "addNewEduForm" }))
{

}

Then in the script

<script type="text/javascript">
    $('#addedu').click(function(e) {
      e.preventDefault();
      if (form.valid()) { //if you use validation
        $.ajax({
          url: form.attr('action'),
          type: form.attr('method'),
          data: $("#addNewEduForm").serialize(),
       success: function(data) {
                }
        });
    }
});
</script>

answered Oct 3, 2012 at 12:25

Deepak Murali

2192 silver badges5 bronze badges

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

Comments

webdeveloper · Accepted Answer · 2012-09-19 08:48:54Z

2

As I can see you trying to submit form with AJAX? Look at serialize function.

$('#addedu').click(function(e) {
    e.preventDefault();
    var form = $('form');

    if (form.valid()) { //if you use validation
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            success: function(r) {

            }
        });
    }
});

answered Sep 19, 2012 at 8:48

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

Comments

Scott · Accepted Answer · 2012-09-19 09:17:01Z

0

You can get your values with getElementById then send your action:

$(document).ready(function () {
    var select = document.getElementById('...');
    $.ajax({
        type: "get", 
        url: "get_street_name", 
        data: { a: select },
        success: function (data) {
            $('#result').html(data);
        }
    });
}

edited Sep 19, 2012 at 9:17

Scott

21.6k8 gold badges67 silver badges73 bronze badges

answered Sep 19, 2012 at 8:47

Teodoris

1091 gold badge4 silver badges13 bronze badges

1 Comment

Teodoris Over a year ago

Furthermore you can use JSON Why you have to pass model to controller just send your parameters with ajax then you can do any action in your controller method with using your models

Collectives™ on Stack Overflow

passing model from view to controller using jquery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related