Click here to Skip to main content
15,076,130 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello
Need help to sort this.

I have a category data table in MVC page with search field:

This is my table with search field:
<input type="text" id="search" placeholder="Search by category Name"/> 

<table id="catList" class="table table-bordered table-striped text-center" style="margin-top:20px;height:auto">
                    <thead class="text-uppercase" style="font-weight:bold; font-size:20px;">
                        <tr>
                            <td>Category Name</td>
                            <td>Category Image</td>
                            @if(Session ["ad_id"] != null)
                            {
                                <td>Delete</td>
                            }
                        </tr>
                    </thead>
                    <tbody>
                        @foreach(var item in Model)
                        {
                            <tr class="text-center" id="row_@item.cat_id">
                                <td style="padding-top:36px;font-size:20px;">@item.cat_name</td>
                                <td><img src="@Url.Content(item.cat_image)" style=" height:100px;width:150px ;border-radius: 2px" /></td>
                                @if(Session ["ad_id"] != null)
                                {
                                    <td style="padding-top:36px">
                                        <a href="javascript:void(0);" class="btn btn-danger" onclick="confirmDelete(@item.cat_id)"><span>class="glyphicon glyphicon-trash"></span></a>
                                    </td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>

When user enter any key in search field i made a ajax call to controller.
This is my controller's code:
public ActionResult ViewCategory( string searchString )
        {
            var categories = from m in dbnew.tbl_category
                             select m;
            if(!String.IsNullOrEmpty(searchString))
            {
                categories = categories.Where(s => s.cat_name.Contains(searchString));
            }

            return View(categories);
        }


What I have tried:

Here Ajax call is made successfully but now what i don't know is how to add result data in view page after Ajax call success.

i tried to do this but didn't get result.

Ajax code:
$(document).ready(function () {
        $("#search").keyup(function () {
            $("#catList").hide("fast");

            var newStrSearch = $("#search").val();

            //var newStrSearch = $("#search").val();


            $.ajax({
                type: "POST",
                url: "/Admin/ViewCategory",
                data: { searchString: newStrSearch },
                success: function (categories) {
                    //code to show result data in View page
                }
            });
        });
    });

Hope for better solution.
Thanks in Advanced.
Posted
Updated 23-Oct-19 4:56am

1 solution

Use jQuery's load method[^]:
JavaScript
$(function(){
    $("#search").keyup(function(){
        var data = { searchString: $(this).val() };
        $("#catList > tbody").load("/Admin/ViewCategory #catList > tbody", data);
    });
});
I'd also be inclined to return a PartialView from the action in response to an AJAX request:
C#
public ActionResult ViewCategory( string searchString )
{
    var categories = from m in dbnew.tbl_category
                     select m;

    if (!string.IsNullOrEmpty(searchString))
    {
        categories = categories.Where(s => s.cat_name.Contains(searchString));
    }

    if (Request.IsAjaxRequest()) return PartialView(categories);
    return View(categories);
}
That way, the response to the AJAX request doesn't include the HTML from the layout page, which it would ignore anyway.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900