如何阻止浏览器Json下载奇怪的行为?

时间:2013-02-05 09:57:14

标签: asp.net-mvc json knockout.js knockout-mapping-plugin

我无法将Json数据绑定到表。 Internet Explorer也想下载Json数据。如何停止资源管理器下载请求和填表。我一直在阅读更多stackoverflow问题和谷歌搜索文章。我无法理解为什么knockout.js无法绑定数据。我已经学会了在敲除和json绑定中绑定arhitecture。

喜欢那样:

http://jsfiddle.net/madcapnmckay/3rRUQ/1/

http://jsfiddle.net/rniemeyer/5EWDG/

我想使用绑定theese方法。但我无法阻止iexplorer下载行为。

  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)); });

还:


@{
    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>
}

控制器方法:


  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
        }
    }

如何解决绑定和下载问题?

0 个答案:

没有答案