Load partial page in jquery and ASP.Net MVC

-
In this post I will show you how much ASP.Net MVC and JQuery are making up a dangerous duet and how you can do big tasks in simple way with little efforts. We can take a look at a live example of what we will do in this post. In stackoverflow website specially users page and tags page you will find a text box to search users/tags. the page is loaded with some users info sorted with default setting. if you start to write something in that text box, the users collection will be filtered by the name you entered in ajax manner and ordered alphabetically(ascending).

The issue here is how using the same piece of code that produce the whole page when it be loaded in first time to filter the users when you type some letters in the text box and update just the part that display the users data. Here the magic of ASP.Net MVC and JQuery come to the scene.

Lets start to build our page first then start to filter our users collection. I will not show you how to create new ASP.Net MVC project this is beyond of scope of this post. I will concentrate on the pieces of code that serve the purpose of this post.

In the HomeController class we will add Index() method that will display all users into a view but we will add an optional string parameter called name that I will use to filter users collection.
public class HomeController
{
   public ActionResult Index(String name = "")
   {
      List<user> users = GetUsers()
                           .Where(u => u.Name.ToLower().StartWith(name.ToLower()) 
                                    || String.IsNullOrEmpty(search)).ToList();
      return view(users);
   }
}
Note, in Where method we select users who their name starts with the value of name variable or select all users if name variable is empty string and return the result into strongly typed view like this 
@model List<user>
.
.
.
<body>
<center>
    <div>
        Find :
        <input type="text" name="search" id="search" />
    </div>
    </center>
    <br />
    <div id="usersdiv">
        <table align="center" width="30%" cellspacing="0">
            <tr>
                <td style="border-bottom: 1px solid #000">
                    ID
                </td>
                <td style="border-bottom: 1px solid #000">
                    Name
                </td>
                <td style="border-bottom: 1px solid #000">
                    Age
                </td>
            </tr>
            @foreach (var user in Model)
            {
                <tr>
                    <td style="border-bottom: 1px solid #000">@user.ID
                    </td>
                    <td style="border-bottom: 1px solid #000">@user.Name
                    </td>
                    <td style="border-bottom: 1px solid #000">@user.Age
                    </td>
                </tr>
            }
        </table>
    </div>
</body>
Till now we just display all users into a view that contains an extra textbox for filtering users. Now we will start to add the required scripts that will actually do filter by an ajax call to the Index method, the method that has been called when page loaded. in the head tag of our view we will add the following scripts 
<script src="@Url.Content("https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
         $('#search').keyup(function () {
             $('#usersdiv').load('/home?name=' + $(this).val());
         });
    });
</script>
First we load jquery library itself then we declare the script that will run after loading all DOM objects of the page. We attach keyup event to the textbox to filter the users list each time we type something into textbox. load function is a jquery function that load data from the server and place the returned HTML into the matched element(using ajax call). Notice the argument that load function accept, it the url of the current page with query string(name). We set the query string paramter to the value of the textbox, that is the reason we attached keyup event not another event, keypress event for example, to get the last value of the textbox.

If we run this code as it is, that means we will load the whole html of our view into the div element with id usersdiv. But what we need is to update just the part that displays the users list. Here the magic of jquery come, we can select certain part of returned html by appending a selector to the url parameter as follows 
$('#usersdiv').load('/home?name=' + $(this).val() + ' #usersdiv');
Of course you can use any valid jquery selector
Now we can filter the users list using jquery without writting any extra piece of code in server side and without reloading the whole page.
Thanks for the awesome duet, ASP.Net MVC and JQuery.

you can download the full source code here
Location: Cairo, Egypt

Comments

Post a Comment

Popular posts from this blog

ASP.Net MVC : ActionLink with bootstrap icon

-
Image
How many times you wanted to add an icon to your action link?!. using Html.ActionLink method is not possible to add icon as it renders the link with just HtmlAttribute you provide. ex : @Html.ActionLink("My Link","actionName","controllerName",new {id = Model.Id}, new {style="margin:10px", @class="btn btn-info"}); this will be rendered as shown in   if I want to add icon using bootstrap css classes, I can not use HtmlHelper methods and have to use plain html tags like this <a href="url-here" class="btn btn-info" style="margin:10px;">         <i class="glyphicon glyphicon-pencil"></i>         <span>My Link</span>     </a> this will be rendered  as so to simplify my .cshtml file and make it easy for developers to add icon to their action links, I have created an extension method IconActionLink that will replace the previous html sinppe...
Read more

ASP.Net MVC : Conditional Validation using ValidationAttribute

-
In ASP.Net MVC we can validate each input field by decorating the corresponding property in the model class with some validation attributes like Required , MaxLength , MinLength ,...etc. Sometime we need to validate a property according to another property value for example if we have a registration form and we need the user enter his age if he is a male and age not required if the user sex is female. So if we decorated the Age property with Required attribute it will show error message even if the user is female, so we need to bypass this check with females. Assume our registration form will contains three fields, name, sex and age, and its model will be as follows public class RegisterationModel { [Required(ErrorMessage = "*")] public String Name { get; set; } [Required(ErrorMessage = "*")] [Display(Name = "Gender")] public Sex Sex { get; set; } [RequiredIf("Sex", Sex.Male, "enter your age")] pu...
Read more

Android : How to change progress bar color at runtime programmatically?

-
Image
I faced this problem while creating one of my android applications(in fact, it is my first application :) ). Lets consider we want to create an android application to calculate the commitments progress of a certain category for http://area51.stackexchange.com/  website ( note we will display a progress bar with one color red or green for simplicity ). Each time we run this application it calculate the commitment percentage and display a red progress bar if it is less than 50% or green one if it equal or greater than 50%. For learning purpose we will insert the number of total required committed users and the number of committed users and calculate the progress of commitment process. Now lets write our code. If it is your first android application you can refer to this post to know how to create an android application.        How to create the full layout of this simple application is beyond this post, we will concentrate on the progress bar....
Read more