Passing Id from javascript to Controller in mvc3

Question

How to pass Id from javascript to Controller action in mvc3 on ajax unobtrusive form submit

My script

   <script type="text/javascript">
    $(document).ready(function () {
        $("#tblclick td[id]").each(function (i, elem) {

            $(elem).click(function (e) {
                var ID = this.id;
                alert(ID);
               // var url = '@Url.Action("Listpage2", "Home")'; 
                var data = { Id: ID };
//                  $.post(url,data, function (result) {
//                 }); 
                e.preventDefault();
                $('form#myAjaxForm').submit();
            });
                       });
    });
</script>

the how to pass Id on using $('form#myAjaxForm').submit(); to controller instead of

$.post(url,data, function (result) {
    //                 });

My View

 @using (Ajax.BeginForm("Listpage2", "", new AjaxOptions
            {
                UpdateTargetId = "showpage"
            }, new { @id = "myAjaxForm" }))
            {

                <table id="tblclick">
                    @for (int i = 0; i < Model.names.Count; i++)
                    {
                        <tr>
                            <td id='@Model.names[i].Id'>
                                @Html.LabelFor(model => model.names[i].Name, Model.names[i].Name, new { @id = Model.names[i].Id })
                              <br />
                            </td>
                        </tr>
                    }
                </table>

            }
        </td>
        <td id="showpage">
        </td>

does this "$('form#myAjaxForm').submit()" do anything special or different than redirecting to the controller? If you just need redirected to the action with the correct ID i can help — John Sykor
– John Sykor, Commented Aug 27, 2012 at 14:20
ok I undeleted my method(answer) that I removed after seeing the changes made to the post because I was unsure if my answer would apply with the ajax but I know I currently use it in a redirect on click function and I was hoping you would find it useful for your situation — John Sykor
– John Sykor, Commented Aug 27, 2012 at 14:32
stackoverflow.com/questions/11405832/… Using this example you can send Id to Controller class — user1501399
– user1501399, Commented Aug 28, 2012 at 5:56

Shyju · Accepted Answer · 2012-08-27 14:25:55Z

I would avoid using the Ajax Beginform helper method and do some pure handwritten and Clean javascript like this

<table id="tblclick">
  @foreach(var name in Model.names)
  {
    <tr>
     <td id="@name.Id">
           @Html.ActionLink(name.Name,"listpage","yourControllerName", 
                         new { @id = name.Id },new { @class="ajaxShow"})         
     </td>
    </tr>
   }
</table>

<script>
 $(function(){
    $(".ajaxShow")click(function(e){
       e.preventDefault();
       $("#showpage").load($(this).attr("href")); 
    });
 });
</script>

This will generate the markup of anchor tag in your for each loop like this.

<a href="/yourControllerName/listpage/12" class="ajaxShow" >John</a>
<a href="/yourControllerName/listpage/35" class="ajaxShow" >Mark</a>

And when user clicks on the link, it uses jQuery load function to load the response from thae listpage action method to the div with id showPage.

Assuming your listpage action method accepts an id parameter and returns something

John Sykor · Accepted Answer · 2012-08-27 14:26:50Z

1

I am not sure for $.post but I know window.location works great for me. Use this instead and hopefully you have good results :)

window.location = "@(Url.Action("Listpage2", "Home"))" + "Id=" + ID;

replace $('form#myAjaxForm').submit(); with this code and nothing looks blatantly wrong with your jscript.

edited Aug 27, 2012 at 14:26

answered Aug 27, 2012 at 14:15

John Sykor

7275 silver badges15 bronze badges

1 Comment

Baqer Naqvi Over a year ago

place '?' sign before Id to make it parameter window.location = "@(Url.Action("Listpage2", "Home"))" + "?Id=" + ID;

bobek · Accepted Answer · 2012-08-27 14:14:59Z

0

Just use a text box helper with html attribute ID.

@Html.TextBox("ID")

You can do this too:

 var form = $('form#myAjaxForm');
 $.ajax({
       type: "post",
       async: false,
       url: form.attr("action"),
       data: form.serialize(),
       success: function (data) {
          // do something if successful
          }
 });

edited Aug 27, 2012 at 14:14

answered Aug 27, 2012 at 14:09

bobek

8,0388 gold badges41 silver badges76 bronze badges

5 Comments

user1501399 Over a year ago

I want to send it from javascript which i obtained var ID =this.id;

bobek Over a year ago

Why don't you want to use $.post then?

user1501399 Over a year ago

I am submiting an unobstrusive ajax form where i dont want my view to postback

user1501399 Over a year ago

How to send and retrieve Id in Controller class

bobek Over a year ago

Create textbox like I said and in your javascript do $("form #ID").val(id);

Collectives™ on Stack Overflow

Passing Id from javascript to Controller in mvc3

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related