CODEWITHSUNDEEP
asp.net-mvcfilter
Mohfath
Mohfath

Reputation: 57

Make a ASP.Net MVC Site, filtering the content

I recently started an MVC project to query and to report the company's users, everything seemed to be fine, except when I made a finduser form, I got all stuck!

you see I want the operator to be able to find the appropriate user by entering either hos pin,serial or calling number but the action links I make for the search operation all fail because they are made at the form_load time and so the empty string of text boxes get injected to them.

So my requests are:

  1. How to make this filters work.
  2. Now a little Ajax textbox suggester on user pin or serial would be great, please gimme a hint or two.

<table> <tr> <td> PIN:</td> <td> <asp:TextBox ID="txt_pin" runat="server"></asp:TextBox> </td> </tr> <tr> <td> Serial Number:</td> <td> <asp:TextBox ID="txt_sn" runat="server"></asp:TextBox> </td> </tr> <tr> <td> CallingNumber:</td> <td> <asp:TextBox ID="txt_callingNo" runat="server"></asp:TextBox> </td> </tr> <tr> <td> CalledThisNumberToday:</td> <td> <asp:TextBox ID="txt_calledNo" runat="server"></asp:TextBox> </td> </tr> <tr> <td> &nbsp;</td> <td> &nbsp;</td> </tr> <tr> <td> </td> <td> &nbsp;</td> </tr> </table>
<%:Html.ActionLink("Search for user", "Details", new { pin = txt_pin.Text })%>

Upvotes: 0

Views: 2225

Answers (2)

GalacticCowboy
GalacticCowboy

Reputation: 11759

Along with Darin's excellent answer (which you really need to follow in order to do things the "MVC" way...), you can also do AJAX filtering on a table using jQuery. There's even a plugin for jQuery that makes live table filtering as simple as adding a script reference and a textbox, then a couple lines of Javascript code to wire up the search. This will end up looking something like this:

<script language="javascript" type="text/javascript" src="/Scripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jquery.uitablefilter.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#myFilter").keyup(function () {
            $.uiTableFilter($("#myTable"), $(this).val());
        });
    });
</script>


<input type="text" id="myFilter" />

<table id="myTable">
...
</table>

As you start typing in the filter box, the table will be automatically filtered to only show rows that contain the specified value.

As for auto-complete suggestions, you might want to look into jQUery UI - they've got support for auto-complete using several different mechanisms to provide the hint values.

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1039050

<asp:TextBox>? In an ASP.NET MVC application? I am afraid you got it all wrong.

I would recommend you going through the getting started tutorials here in order to learn the basic concepts of ASP.NET MVC: http://asp.net/mvc

In ASP.NET MVC you use models and in the views you use helpers in order to generate input fields.

So in your case you could design a view model:

public class SearchViewModel
{
    public string Pin { get; set; }
    public string SerialNumber { get; set; }
    public string CallingNumber { get; set; }
    public string CalledThisNumberToday { get; set; }
}

then you could design a controller action which will pass this view model to the view for rendering the search form:

public ActionResult Index() 
{
    var model = new SearchViewModel();
    return View(model);
}

and finally in your strongly typed view you would use HTML helpers:

<%@ Page 
    Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
    Inherits="System.Web.Mvc.ViewPage<AppName.Models.SearchViewModel>" %>

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) { %>

        <div>
            <%= Html.LabelFor(x => x.Pin) %>
            <%= Html.EditorFor(x => x.Pin) %>
        </div>

        <div>
            <%= Html.LabelFor(x => x.SerialNumber) %>
            <%= Html.EditorFor(x => x.SerialNumber) %>
        </div>

        <div>
            <%= Html.LabelFor(x => x.CallingNumber) %>
            <%= Html.EditorFor(x => x.CallingNumber) %>
        </div>

        <div>
            <%= Html.LabelFor(x => x.CalledThisNumberToday) %>
            <%= Html.EditorFor(x => x.CalledThisNumberToday) %>
        </div>

        <p><input type="submit" value="Search for user" /></p>
    <% } %>

</asp:Content>

and the final step would be to implement the controller action that will perform the search and to which this form will be subimtted:

[HttpPost]
public ActionResult Index(SearchViewModel model)
{
    if (!ModelState.IsValid) 
    {
        // the model was not valid => redisplay the form
        // so that the user can fix his errors
        return View(model);
    } 

    // TODO: perform the search
    ...
}

Upvotes: 5

Related Questions