Data not loaded in table using ajax in ASP.net mvc

Question

I want to retrieve data in an html table using Ajax in ASP.net mvc but the success part is not executing and do not know how to show returned data in a table using Ajax. Please suggest any method to solve this issue. thanks..

Index.cshtml

@model IEnumerable<MvcApplication4.Models.tbl_product>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
    <title>Index</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#Button1').click(function () {
                alert("button clicked");
                $.ajax({
                    type: 'POST',
                    contentType: "application/json; charset=utf-8",
                    url: 'Home/Index',
                    data: "{'searchString':'" + document.getElementById('searchString').value + "'}",
                    async: false,
                    Success: function (response) {
                        alert("Success");
                        window.location.reload();
                    },
                    error: function () { alert("error"); }
                });

            });
        });
    </script>
</head>
<body>

    @Html.TextBox("searchString");
    <input type="button" value="filter" id="Button1" />
    <table id="showData">
        @{Html.RenderPartial("SearchList");}
    </table>
</body>
</html>

HomeController.cs

 public class HomeController : Controller
    {
        //
        // GET: /Home/
        ProductEntities dbentity = new ProductEntities();
        public ActionResult Index()
        {
            return View(dbentity.tbl_product.ToList());
        }

        [HttpPost]
        public ActionResult Index(string searchString)
        {
            var query = dbentity.tbl_product.Where(c => c.ProductName.Contains(searchString));
            return View(query.ToList());
        }
    }

SearchList.cshtml

@foreach (var item in Model)
{ 
<tr>
<td>@item.ProductName</td>
<td>@item.ProductId</td>
<td>@item.ProductDesc</td>
</tr>
}

what error is it throwing. Is it hitting action in controller — Nitin Varpe
– Nitin Varpe, Commented Dec 9, 2013 at 11:15
After changing to lowercase now the success part is executing but how will i append the data search in a table and can i call ajax function on OnBlur event rather than clicking on the button... Thanks for the above suggestions.... — user2802591
– user2802591, Commented Dec 9, 2013 at 11:18

Satpal · Accepted Answer · 2013-12-09 11:36:11Z

1

Its success not Success
You need to return Partial View
You need to updated table HTML with returned partial view

Change You code as

success: function (response) {
    alert("Success");
    $('#showData').html(response)
},

Controller Code

 return PartialView("SearchList", query.ToList());

If you are not supplying ViewName, by convention It will use ActionName as view name. thus pass SearchList as ViewName

EDIT:

Also, You need to pass model to render partial

@{Html.RenderPartial("SearchList", Model);}

edited Dec 9, 2013 at 11:36

answered Dec 9, 2013 at 11:19

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

2 Comments

user2802591 Over a year ago

change the code, it is working but another textbox get generated when i click on Filter button. Why is this so.. Thanks..

Satpal Over a year ago

Try return PartialView("SearchList", query.ToList());. You need to use SearchList partial view

Collectives™ on Stack Overflow

Data not loaded in table using ajax in ASP.net mvc

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related