How to apply search filter in mvc5 without refreshing the page

Question

0.00/5 (No votes)

See more:

my page is being refreshed on every click. I want without refreshed.

My View is

HTML

@using Inspinia_MVC5.Models
@model IEnumerable<Inspinia_MVC5.Models.Dashboard>

@{
    ViewBag.Title = "Dashboard_Default1";
}

@{
    IEnumerable<Dashboard> Dash = ViewData["Dashboards"] as IEnumerable<Dashboard>;
    IEnumerable<Report> Rep = ViewData["Reports"] as IEnumerable<Report>;
        
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Dashboard_Default</title>
    <link href="~/Content/background.css" rel="stylesheet" />
    <script src="~/Content/Script/jquery-1.4.4.min.js"></script>
    <script src="~/Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">



        function changeImage(element) {
            element.src = element.bln ? "/Content/images/FavGrey.png" : "/Content/images/FavOrange.png";
            element.bln = !element.bln;
        }


        $(document).ready(function () {
            $("#txtFilter").keyup(
                function filter() {
                    debugger;
                    $.ajax({
                        type: "POST"
                    , url: "Dashboards/Filter"
                    , data: JSON.stringify({ filterText: $("#txtFilter").val() })
                    , contentType: 'application/json;'
                    , success: function (result) {
                        $("#tbldash").html(result);
                    }
                    });
                });
            });
       

    </script>
</head>
<body>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-6">

                        <div id="tbldash">
                               @Html.Partial("_Dashboard_Default",Model)
                           </div>                 

                    </div>
                </div>
            </div>

            
            
    

</body>
</html>

My partial View is (_Dashboard_Default)

HTML

@model IEnumerable<Inspinia_MVC5.Models.Dashboard>
@{
    Layout = null;
}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5 id="header">My Dashboard </h5>
                        <div class="ibox-tools">
                            <a href="~/Dashboards/Create_Dashboard_Default">
                                <img src="~/Content/images/AddRpt.png" /></a>
                        </div>
                    </div>
                    <div class="ibox-content">
                     
                        <table class="table table-striped">

                            <thead>
                                <tr>
                                    <th>Icon
                                    </th>
                                    <th>
                                        @Html.ActionLink("DashboardID", "Dashboard_Default", new { order = ViewBag.sort_DashID })

                                    </th>
                                    <th>
                                        @Html.ActionLink("Dashboard Name", "Dashboard_Default", new { order = ViewBag.sort_DashName })
                                    </th>



                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                @using (Html.BeginForm())
                                {
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td>
                                           <input type="text" id="txtFilter" name="search" placeholder="  Search" /><input type="submit" value="search" onclick="filter()" />
                           
                                        </td>
                                        <td></td>
                                    </tr>  
                                }
                                
                               
                                
                                @foreach (var item in Model)
                                {
                                    using (@Html.BeginForm("Delete", "Dashboards", new { id = item.DashboardID }))
                                    {
                                    <tr>
                                        <td>
                                            <img src="~/Content/images/best_fit.png" />
                                        </td>
                                        <td>
                                            @item.DashboardID
                                        </td>

                                        <td id="dashname">
                                            @item.DashboardName
                                        </td>
                                        <td>

                                            @if (@item.IsPublic == true)
                                            {
                                                <img id="fav" src="~/Content/images/FavGrey.png" /> 
                                                <a href="@Url.Action("Edit", "Dashboards", new { id = @item.DashboardID })">
                                                    <img src="~/Content/images/edit.png" /></a>
                                                <button type="submit" value="Delete" onclick="return confirm('Are you sure want to delete?')" style="border: none 0px; background-origin: padding-box; padding: 0px;">
                                                    <img src="~/Content/images/delete.png" /></button>
                                                
                                            }

                                        </td>
                                    </tr>
                                   
                                    }
                                }
                             </tbody>
                        </table>


                    </div>
                </div>
        </div>
    </div>
 </div>

My controller is

C#

[ActionName("Dashboard_Default")]
       public ActionResult Dashboard_Default_Get(string order)
       {
           RegisterLogic logic = new RegisterLogic();
           string name = Session["LoginName"].ToString();
           ViewData["UserName"] = name;  //Login Name

           logic.Name = name;  //Assigning to static variable in bussiness

           ViewData["Dashboards"] = logic.dashboardsss();
           ViewData["Reports"] = logic.reportsss();
           List<Dashboard> dash = new List<Dashboard>();
           dash = logic.dashboardsss();

           ViewBag.sort_DashID = string.IsNullOrEmpty(order) ? "OrderByID" : "";    //sorting
           ViewBag.sort_DashName = string.IsNullOrEmpty(order) ? "OrderByName" : "";
           ViewBag.sort_ByDate = order == "createdDate" ? "LasModifiedDate" : "Date";

           //if (!String.IsNullOrEmpty(search))
           //{
           //    dash = dash.Where(st => st.DashboardName.ToUpper().Contains(search.ToUpper()) || st.CreatedDate.ToString().ToUpper().Contains(search.ToUpper())).ToList();

           //}


           switch (order)
           {
               case "OrderByID":
                   dash = dash.OrderByDescending(dash1 => dash1.DashboardID).ToList();
                   break;
               case "OrederByName":
                   dash = dash.OrderByDescending(dash1 => dash1.DashboardName).ToList();
                   break;
               case "createdDate":
                   dash = dash.OrderByDescending(dash1 => dash1.CreatedDate).ToList();
                   break;
               default:
                   dash = dash.OrderBy(dash1 => dash1.DashboardID).ToList();
                   break;
           }

           return View(dash.ToList());
       }

       [HttpPost]
       [ActionName("Dashboard_Default")]
       public ActionResult Filter(string search)
       {
           RegisterLogic logic = new RegisterLogic();
           List<Dashboard> dash = new List<Dashboard>();
           dash = logic.dashboard.ToList();
           if (!String.IsNullOrEmpty(search))
           {
               dash = dash.Where(st => st.DashboardName.ToUpper().Contains(search.ToUpper()) || st.CreatedDate.ToString().ToUpper().Contains(search.ToUpper())).ToList();

           }
           return View(dash);
       }

Posted 31-Mar-15 0:34am

Jayesh27j

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)

Afzaal Ahmad Zeeshan · Answer 1 · 2015-03-31T00:58:00

To do that, you're using the function named filter. You need to handle this event and prevent the form to be submitted (which is the actual intended action to be triggered when user clicks on submit button). To prevent this, you can add

JavaScript

event.preventDefault();

To prevent the default functionality of any event. This would help you to create your own manual functions for every event. Thus, you function would now be like this,

JavaScript

function filter() {
    // in the first line
    event.preventDefault();
    // remaining code
    debugger;
    $.ajax({
         type: "POST"
         , url: "Dashboards/Filter"
         , data: JSON.stringify({ filterText: $("#txtFilter").val() })
         , contentType: 'application/json;'
         , success: function (result) {
              $("#tbldash").html(result);
         }
    });
});

You should add this code at the top of the event handling code. So that, JavaScript can guide the browser to ignore handling the event itself and allow you to handle the event, in a way that you want it to be handled. You can read more about this function on MDN[^].