How to add live search in MVC using AJAX and jquery.

Question

0.00/5 (No votes)

See more:

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 22-Oct-19 19:48pm

Harsh.Shah.ifour

Updated 23-Oct-19 4:56am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Answer 1 · 2019-10-23T04:56:00

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.