jquery post to asp.net mvc controller

Question

I have these two controller actions:

public ActionResult Index(string search, int? page)
{
    return View(db.powners.Where(x => x.petowner.StartsWith(search) || search == null).OrderBy(x => x.petowner).ToList().ToPagedList(page ?? 1, 5));
}

public ActionResult Ownerfind(string search, int? page)
{
    return View(db.powners.Where(x => x.petowner.StartsWith(search) || search == null).OrderBy(x => x.petowner).ToList().ToPagedList(page ?? 1, 5));
}

And this json method also:

public JsonResult Getowner(int nownerid)
{
    OwnerEntities owner = new OwnerEntities();
    var existingCust = owner.powners.Single(p => p.ownerid == nownerid);
    return Json(existingCust);
}

Index view:

@model PagedList.IPagedList<Mvc4test2.Models.powner>
@using PagedList.Mvc;
@using PagedList;

@{
ViewBag.Title = "Index";
}
<link href="../../Content/PagedList.css" rel="stylesheet" type="text/css" />
<div style="font-family:Arial">
<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<p>
@using (@Html.BeginForm("Index", "owner", FormMethod.Get))
{    
<b>Search</b>@Html.TextBox("search")<input type="submit" value="search" />
}
</p>

<table id="ownertable">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.First().petowner)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.First().ostreet)
    </th>
    <th></th>
</tr>

@foreach (var item in Model) {
<tr>
    <td>
        <a href="">  @Html.DisplayFor(modelItem => item.ownerid) </a>

    </td>
    <td>
        @Html.DisplayFor(modelItem => item.petowner)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.ostreet)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.ownerid }) |
        @Html.ActionLink("Details", "Details", new { id=item.ownerid }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.ownerid })
    </td>
</tr>
}

</table>
@Html.PagedListPager(Model, page=>Url.Action("Index", new{page, search=Request.QueryString["search"]}), new PagedListRenderOptions(){Display=PagedListDisplayMode.IfNeeded, DisplayPageCountAndCurrentLocation=true,MaximumPageNumbersToDisplay=5})

Ownerfind view:

@model PagedList.IPagedList<Mvc4test2.Models.powner>
@using PagedList.Mvc;
@using PagedList;

@{
ViewBag.Title = "Index";
}
<link href="../../Content/PagedList.css" rel="stylesheet" type="text/css" />
<div style="font-family:Arial">
<h2>Index</h2>

<p>
@Html.ActionLink("Create New", "Create")
</p>
<p>
 @using (@Html.BeginForm("ownerfind", "owner", FormMethod.Get))
{    
<b>Search</b>@Html.TextBox("search")<input type="submit" value="search" />
}
</p>
<p>
hello

</p>
<table id="ownertable">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.First().petowner)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.First().ostreet)
    </th>
    <th></th>
</tr>

@foreach (var item in Model) {
<tr>
    <td>
        <a href="">  @Html.DisplayFor(modelItem => item.ownerid) </a>

    </td>
    <td>
        @Html.DisplayFor(modelItem => item.petowner)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.ostreet)
    </td>

</tr>
}

</table>
@Html.PagedListPager(Model, page=>Url.Action("ownerfind","owner", new{page, search=Request.QueryString["search"]}), new PagedListRenderOptions(){Display=PagedListDisplayMode.IfNeeded, DisplayPageCountAndCurrentLocation=true,MaximumPageNumbersToDisplay=5})


</div>

Jquery segment:

$("#ownertable td:nth-child(1)").click(function (event) {
     event.preventDefault();
     var $td = $(this).closest('tr').children('td');
     var currentid = $.trim($td.eq(0).text());
     alert("hi:" + currentid);
     $.ajax({
         url: 'owner/Getowner',
         type: 'POST',
         data: 'nownerid=' + currentid,
         dataType: "json",
         success: function (result) {
             alert("hello");
             //alert(result.petowner);
             opener.$('input#ownerid').val(result.ownerid);
             opener.$('#petowner').val(result.petowner);
             opener.$('input#ostreet').val(result.ostreet);
             self.close();
         }
     });
 });

Here's the problem: If I use the first controller action public ActionResult Index(string search, int? page), then I get the json result as expected. However if I use the second controller action public ActionResult Ownerfind(string search, int? page) then the I donot get a json result back. Both controller actions work on screen, and I get the alert("hi:" + currentid); But I only get a json result if I use click on the table used in the Index view. Why isn't the ownerfind view working with jquery? It displays correctly just no json result. I want seperate view, because one will be a lookup and another a regular for adding and editing.

Alex Alex · Accepted Answer · 2013-11-29T14:55:58

Add [HttpPost] attribute to Getowner action from Contoller

And return from get owner something like this:

return Json(new { Data = existingCust });

jquery post to asp.net mvc controller

1 Answers