using jquery and asp.net mvc (razor)
How can i load dynamic content into a div?
e.g.
- user clicks button
- data fetched from db.
- fill up a div with this data with relevent markup - divs, id's classes surounding this data. PER row of data.
thanks
Add a comment
|
2 Answers
As usual you start with a model:
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
Then a repository which will define the operations on this model:
public interface IPersonsRepository
{
IEnumerable<Person> GetPersons();
}
Next you could implement it:
public class PersonsRepositoryInMemory: IPersonsRepository
{
public IEnumerable<Person> GetPersons()
{
return Enumerable.Range(1, 10).Select(i => new Person {
FirstName = "first " + i,
FirstName = "last " + i
});
}
}
Obviously depending on the data access technology and database type you are using this implementation will vary. In my example I am using an in-memory database.
Then a controller:
public class PersonsController : Controller
{
private readonly IPersonsRepository _repository;
public class PersonsController(IPersonsRepository repository)
{
_repository = repository;
}
public ActionResult Index()
{
return View();
}
public ActionResult List()
{
var persons = _repository.GetPersons();
return View(persons);
}
}
And finally we could define the corresponding views:
First we should include jquery into the <head> section of the layout:
<script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.4.4.js")"></script>
Then the index view (~/Views/Persons/Index.cshtml) could contain a button which will load the List action using an AJAX call and a content placeholder where the results will be shown:
@Html.ActionLink("Load persons", "list", null, new { id = "load" })
<div id="result"></div>
<script type="text/javascript">
$('#load').click(function() {
// unobtrusively enhance the anchor
// this script should be externalized into
// a separate file
$('#result').load(this.href);
return false;
});
</script>
and the last part will be the List view (~/Views/Persons/List.cshtml):
@model IEnumerable<YourAppName.Models.Person>
@{
Layout = null;
}
<table>
<thead>
<th>First name</th>
<th>Last name</th>
</thead>
<tbody>
@Html.DisplayForModel()
</tbody>
</table>
and the corresponding display template which will be rendered for each person into the collection (~/Views/Persons/DisplayTemplates/Person.cshtml):
@model YourAppName.Models.Person
<tr>
<td>@Model.FirstName</td>
<td>@Model.LastName</td>
</tr>
Comments
Here's one option...
When the button is clicked, call a javascript function that does an ajax call of a method on the controller. Set this method up to do the retrieve from the db. Format the returned value and insert it into the div.
The following example assumes that you have included the JQuery libraries on your page...
function JSFunctionThatFillsTheDiv()
{
methodAction = mainUrl + "/MyController/AddTextToMyDetail";
$.ajax({
dataType: 'html',
error: function(XMLHttpRequest, textStatus, errorThrown) {
// process you'd like to occur on error... ie: show error in another error div
},
success: function(data) {
$("#IDOfMyDetailsDiv").html(""); <-CLEAR the div
$("#IDOfMyDetailsDiv").html( data); <-INSERT the returned data
},
url: methodAction
});
