How to stop explorer Json downloading strange bahaviour? - asp.net-mvc

Question

i can not bind Json data to table. Also internet explorer wants to download Json data. How to stop explorer download request and fill table. i have been reading more stackoverflow questions and googling articles. i can not understand why knockout.js cannot bind data. i have been learned binding arhitecture in knockout and json binding.
like That:
http://jsfiddle.net/madcapnmckay/3rRUQ/1/
http://jsfiddle.net/rniemeyer/5EWDG/
i would like to use binding theese methods. but i can not stopping iexplorer downloading behavior.
var result = function () {
$.ajax({
type: "get",
url: "/Contact/GetEmployees/",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
viewModel = ko.mapping.fromJS(data, self.Employees);
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
};
ko.utils.arrayMap(result, function (i) { Directory.list.push(new Employee(i.EmployeeCode, i.EmployeeName)); });
also :
#{
ViewBag.Title = "GetPerson";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>GetPerson</h2>
<script type="text/javascript">
function Person(FirstName, LastName, Friends) {
var self = this;
self.FirstName = ko.observable(FirstName);
self.LastName = ko.observable(LastName);
self.FullName = ko.computed(function () {
return self.FirstName() + ' ' + self.LastName();
})
self.Friends = ko.observableArray(Friends);
self.AddFriend = function () {
self.Friends.push(new Person('new', 'friend'));
};
self.DeleteFriend = function (friend) {
self.Friends.remove(friend);
};
}
var viewModel = new Person();
$(document).ready(function () {
$.ajax({
url: 'Person/GetPerson',
dataType: 'json',
type: 'GET',
success: function (jsonResult) {
viewModel = ko.mapping.fromJS(jsonResult, mapping);
console.log(viewModel);
ko.applyBindings(viewModel);
}
});
});
var mapping = {
create: function (options) {
var person = options.data,
friends = ko.utils.arrayMap(person.Friends, function (friend) {
return new Person(friend.FirstName, friend.LastName);
});
return new Person(person.FirstName, person.LastName, friends);
}
};
</script>
#using (Html.BeginForm())
{
<p>First name: <input data-bind="value: FirstName" /></p>
<p>Last name: <input data-bind="value: LastName" /></p>
<p>Full name: <span data-bind="text: FullName" /></p>
<p>#Friends: <span data-bind="text: Friends().length" /></p>
#*Allow maximum of 5 friends*#
<p><button data-bind="click: AddFriend, text:'add new friend', enable:Friends().length < 5" /></p>
#*define how friends should be rendered*#
<table data-bind="foreach: Friends">
<tr>
<td>First name: <input data-bind="value: FirstName" /></td>
<td>Last name: <input data-bind="value: LastName" /></td>
<td>Full name: <span data-bind="text: FullName" /></td>
<td><button data-bind="click: function(){ $parent.DeleteFriend($data) }, text:'delete'"/></td>
</tr>
</table>
}
Controller Method:
public class PersonController : Controller
{
//
// GET: /Person/
public ActionResult GetPerson()
{
Person person = new Person
{
FirstName = "My",
LastName = "Name",
Friends = new List<Person>
{
new Person{FirstName = "Friend", LastName="Number1"},
new Person{FirstName = "Friend", LastName="Number2"}
}
};
return Json(person, "text/html", JsonRequestBehavior.AllowGet);
//return Json(person, JsonRequestBehavior.AllowGet); Not working
}
}
How to solve binding and downloading problem?