asp.net mvc rendering partial view on-demand

Question

I'm a newbie to asp.net mvc and I'd like to know if what I do is correct.

I want to create a view for searching people. Here's what I have so far:

The business model class:

public class Person
{
  public int Id { get; set; }
  public string FirstName { get; set; }
  public string LastName { get; set; }
  public Address Address { get; set; }
  public DateTime DOB { get; set; }
  public List<Telephone> Telephones { get; set; }
}

The ViewModel class:

public class SearchPersonViewModel
{
  public int Id { get; set; }
  public string FullName { get; set; }
  public string LicencePlate { get; set; }
  public string CarMake { get; set; }
  public string CarModel { get; set; }
}

The partial view :

@model IEnumerable<MvcApplication2.Models.SearchPersonViewModel>

@foreach (var item in Model)
{
 @Html.DisplayFor(m => item.Id)
 @Html.DisplayFor(m => item.FullName)              
}

The view from which the partial view is called:
```
@Html.Action("Search", "Person");
```

*The controller method in the PersonController:

    [ChildActionOnly]
    public ActionResult Search()
    {
         List<SearchPersonViewModel> model = new List<SearchPersonViewModel>();
         model.Add(new SearchPersonViewModel() { FullName = "test", Id = 3 });

        return PartialView("_SearchPerson", model);
    }

Now the problem is that the Search method is called whenever the main View is loaded. What I want is to add a search textbox on the mainview for filtering the collection rendered in the partial view. How could I do that ?

score 2 · Answer 1 · answered Jan 31 '13 at 01:30

2

This way your partial will render on click only

<script>

(function($){
   $('#btn').click(function(){
      $('#searchresult').load('@Url.Content("~/Person/Search")');

}
</script>

answered Jan 31 '13 at 01:30

Renaissance

798
5
15

I've done it this way and now notice that I'm passing a parameter to the controller : $("#divResult").load('/Person/Search', $("#txtSearch").val()); The problem I have now is that the parameter always come as null in the controller. However if I browse to the url /Person/Search/s for instance, then the parameter comes as 's', which is correct. So what am I doing wrong this time in the javascript ? – Sam Jan 31 '13 at 09:45
I got it to work now: $("#divResult").load('/Person/Search?criteria=' + $("#txtSearch").val()); I was not passing the correct name for the parameter.... – Sam Jan 31 '13 at 10:14
1

nice. jquery to the rescue! – Renaissance Jan 31 '13 at 13:59

score 1 · Accepted Answer · answered Jan 30 '13 at 13:44

1

Make an ajax request to /search and append the data to your page.

<div id = 'searchresult'>
@Html.Action("Search", "Person");
</div>

whenever your want to filter call something like $('#searchresult').load('/search?q=xxx');

answered Jan 30 '13 at 13:44

Ankit

1,867
2
21
40

but the action method will still be called when the view is loaded. I only want it to be called when he user hit a search button. Also, what do you think of the way i've organised my code ? Is this proper architecture ? – Sam Jan 30 '13 at 13:45
remove this statement @Html.Action("Search", "Person"); – Ankit Jan 30 '13 at 13:46
yes you have orgnaised it well. Creating View Models for the views and partial views is a good approach to go with. – Ankit Jan 31 '13 at 12:17

score 1 · Answer 3 · edited May 23 '17 at 12:12

1

You could use 2 ways:

microsoft ajax helpers
jquery

For both of them you need to remove [ChildActionOnly] and @Html.Action("Search", "Person");

Look at this example: Using Ajax.BeginForm with ASP.NET MVC 3 Razor

edited May 23 '17 at 12:12

Community

1
1

answered Jan 30 '13 at 13:54

webdeveloper

17,174
3
48
47

why do I need to remove [ChildActionONly] ? – Sam Jan 30 '13 at 14:42
@user1098555 http://stackoverflow.com/questions/10253769/using-childactiononly-in-mvc – webdeveloper Jan 30 '13 at 15:48

asp.net mvc rendering partial view on-demand

3 Answers3