在mvc4中的浏览器knockout.js中显示json数据 [英] displaying json data in browser knockout.js in mvc4

查看：75
本文介绍了在mvc4中的浏览器knockout.js中显示json数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在mvc4中的浏览器knockout.js中显示json数据



   controller 
  public  JsonResult FetchEmployees（）
 {
  return  Json（db.EmployeeInfoes.ToList（），JsonRequestBehavior.AllowGet）; 
 
} 
 
 employeelistvm.js 
 
 
 
 var urlPath = window.location.pathname; 
 $（ function （）{
 ko.applyBindings（EmployeeListVM）; 
 EmployeeListVM.getEmployees（）; 
} ）; 
 
 //查看模型
 var EmployeeListVM = {
员工：ko.observableArray（[]），
 getEmployees：功能（）{
 var self = this; 
 $ .ajax（{
 type：  GET，
 url：'  / EmployeeInfo / FetchEmployees'，
 contentType：  application / json; charset = utf-8，
 dataType：   json，
成功：功能（数据）{
 self.Employees（data）; //将响应放在 ObservableArray 
}中，
错误： function （错误）{
 alert（err.status +  ： + err.statusText）; 
} 
}）; 
}，
}; 
 
 self.editEmployees =  function （学生）{
 window.location.href = '  / EmployeeInfo / Edit /' + employee.EmpID; 
}; 
 self.deleteEmployees =  function （学生）{
 window.location.href = '  / EmployeeInfo / Delete /' + employee.EmpID; 
}; 
 
 //模型
 函数员工（数据）{
 this.EmpID = ko.observable（data.EmpID ）; 
 this.EmpName = ko.observable（data.EmpName）; 
 this.Salary = ko.observable（data.Salary）; 
 this.DeptName = ko.observable（data.DeptName）; 
 this.Designation = ko.observable（data.Designation）; 
 
} 
 
 fetchemployees.cshtml 
 
  @ model  IEnumerable< KOSetup.EmployeeInfo> 
 
 @ {
 ViewBag.Title =  索引; 
布局=  〜/ Views / Shared / _Layout.cshtml; 
} 
 
< h2>员工清单< / h2> 
 
< p> 
  @ Html  .ActionLink（  Create New ， 创建）
< / p> 
< table> 
< thead> 
< tr> 
< th> 
  @ Html  .DisplayNameFor（model => model.EmpName）
< / th> 
< th> 
  @ Html  .DisplayNameFor（model => model.Salary）
< / th> 
< th> 
  @ Html  .DisplayNameFor（model => model.DeptName）
< / th> 
< th> 
  @ Html  .DisplayNameFor（model => model.Designation）
< / th> 
< th>< / th> 
< / tr> 
< / thead> 
< tbody data-bind =   foreach：Employees> 
< tr> 
< td data-bind =   text：EmpID>< / td> ; 
< td data-bind =   text：EmpName>< / td> ; 
< td data-bind =   text：Salary>< / td> ; 
< td data-bind =   text：DeptName>< / td> ; 
< td data-bind =   text：Designation>< / td> ; 
 
< td> 
< a data-bind =   click：editEmployees>编辑< / a> ; 
< a data-bind =   click：deleteEmployees>删除< / a> ; 
< / td> 
< / tr> 
< / tbody> 
 
< / table> 
 
  @ section 脚本{
  @ Scripts  .Render（< span class =code-string> 〜/ Scripts / ViewModels / EmployeeListVM.js）
} 
 
返回数据
 
 [{  EmpID：1，  EmpName：  yashica， 薪水：12345678，  DeptName：  xyz， 名称：  xyz，  EntityState ：2，  EntityKey：{  EntitySetName：  EmployeeInfoes，   EntityContainerName：  ExamplesEntities，  EntityKeyValues：[{ 键：  EmpID， 值：1}]，  IsTemporary：false}}，{  EmpID：3，  EmpName：  pranali， 薪水：12345678，  DeptName：  abc， 名称：   abc，  EntityState：2，  EntityKey：{   EntitySetName：  EmployeeInfoes，  EntityContainerName：  ExamplesEntities，  EntityKeyValues：[ { 密钥：  EmpID， 值：3}]，  IsTemporary：false}}]

解决方案

（ function （）{
ko.applyBindings（EmployeeListVM）;
EmployeeListVM.getEmployees（）;
}）;

//查看模型
var EmployeeListVM = {
员工：ko.observableArray（[]），
getEmployees： function （）{
var self = this;


.ajax（{
type： GET，
url：' / EmployeeInfo / FetchEmployees'，
contentType： application / json; charset = utf- 8，
dataType： json，
成功： function （data）{
self.Employees（data）; //将响应放在 ObservableArray
}，
错误： function （错误）{
alert（错误） .status + ： + err.statusText）;
}
}）;
}，
};

self.editEmployees = function （学生）{
window.location.href = ' / EmployeeInfo / Edit /' + employee.EmpID;
};
self.deleteEmployees = function （学生）{
window.location.href = ' / EmployeeInfo / Delete /' + employee.EmpID;
};

//模型
函数员工（数据）{
this.EmpID = ko.observable（data.EmpID ）;
this.EmpName = ko.observable（data.EmpName）;
this.Salary = ko.observable（data.Salary）;
this.DeptName = ko.observable（data.DeptName）;
this.Designation = ko.observable（data.Designation）;

}

fetchemployees.cshtml

@ model IEnumerable< KOSetup.EmployeeInfo>

@ {
ViewBag.Title = 索引;
布局= 〜/ Views / Shared / _Layout.cshtml;
}

< h2>员工清单< / h2>

< p>
@ Html .ActionLink（ Create New ， 创建）
< / p>
< table>
< thead>
< tr>
< th>
@ Html .DisplayNameFor（model => model.EmpName）
< / th>
< th>
@ Html .DisplayNameFor（model => model.Salary）
< / th>
< th>
@ Html .DisplayNameFor（model => model.DeptName）
< / th>
< th>
@ Html .DisplayNameFor（model => model.Designation）
< / th>
< th>< / th>
< / tr>
< / thead>
< tbody data-bind = foreach：Employees>
< tr>
< td data-bind = text：EmpID>< / td> ;
< td data-bind = text：EmpName>< / td> ;
< td data-bind = text：Salary>< / td> ;
< td data-bind = text：DeptName>< / td> ;
< td data-bind = text：Designation>< / td> ;

< td>
< a data-bind = click：editEmployees>编辑< / a> ;
< a data-bind = click：deleteEmployees>删除< / a> ;
< / td>
< / tr>
< / tbody>

< / table>

@ section 脚本{
@ Scripts .Render（< span class =code-string> 〜/ Scripts / ViewModels / EmployeeListVM.js）
}

返回数据

[{ EmpID：1， EmpName： yashica， 薪水：12345678， DeptName： xyz， 名称： xyz， EntityState ：2， EntityKey：{ EntitySetName： EmployeeInfoes， EntityContainerName： ExamplesEntities， EntityKeyValues：[{ 键： EmpID， 值：1}]， IsTemporary：false}}，{ EmpID：3， EmpName： pranali， 薪水：12345678， DeptName： abc， 名称： abc， EntityState：2， EntityKey：{ EntitySetName： EmployeeInfoes， EntityContainerName： ExamplesEntities， EntityKeyValues：[ { 密钥： EmpID， 值：3}]， IsTemporary：false}}]


< blockquote> 

 ... 
成功：函数（数据）{
 for（var i = 0;我< data.length; i ++）{
 
 
displaying json data in browser knockout.js in mvc4




in controller
public JsonResult FetchEmployees()
       {
          return Json(db.EmployeeInfoes.ToList(), JsonRequestBehavior.AllowGet);

       }

employeelistvm.js



var urlPath = window.location.pathname;
$(function () {
    ko.applyBindings(EmployeeListVM);
    EmployeeListVM.getEmployees();
});

//View Model
var EmployeeListVM = {
    Employees: ko.observableArray([]),
    getEmployees: function () {
        var self = this;
        $.ajax({
            type: "GET",
            url: '/EmployeeInfo/FetchEmployees',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                self.Employees(data); //Put the response in ObservableArray
            },
            error: function (err) {
                alert(err.status + " : " + err.statusText);
            }
        });
    },
};

self.editEmployees = function (student) {
    window.location.href =  '/EmployeeInfo/Edit/' + employee.EmpID;
};
self.deleteEmployees = function (student) {
    window.location.href = '/EmployeeInfo/Delete/' + employee.EmpID;
};

//Model
function Employees(data) {
    this.EmpID = ko.observable(data.EmpID);
    this.EmpName = ko.observable(data.EmpName);
    this.Salary = ko.observable(data.Salary);
    this.DeptName = ko.observable(data.DeptName);
    this.Designation = ko.observable(data.Designation);
   
}

fetchemployees.cshtml

@model IEnumerable<KOSetup.EmployeeInfo>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Employee List</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.EmpName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Salary)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DeptName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Designation)
        </th>
        <th></th>
    </tr>
    </thead>
<tbody data-bind="foreach: Employees">
        <tr>
            <td data-bind="text: EmpID"></td>
            <td data-bind="text: EmpName"></td>
            <td data-bind="text: Salary"></td>
            <td data-bind="text: DeptName"></td>
            <td data-bind="text: Designation"></td>
            
            <td>
                <a data-bind="click: editEmployees">Edit</a>
                <a data-bind="click: deleteEmployees">Delete</a>
            </td>
        </tr>
    </tbody>

</table>

@section Scripts {
    @Scripts.Render("~/Scripts/ViewModels/EmployeeListVM.js")
}

returned data

[{"EmpID":1,"EmpName":"yashica","Salary":12345678,"DeptName":"xyz","Designation":"xyz","EntityState":2,"EntityKey":{"EntitySetName":"EmployeeInfoes","EntityContainerName":"ExamplesEntities","EntityKeyValues":[{"Key":"EmpID","Value":1}],"IsTemporary":false}},{"EmpID":3,"EmpName":"pranali","Salary":12345678,"DeptName":"abc","Designation":"abc","EntityState":2,"EntityKey":{"EntitySetName":"EmployeeInfoes","EntityContainerName":"ExamplesEntities","EntityKeyValues":[{"Key":"EmpID","Value":3}],"IsTemporary":false}}]
 解决方案 
(function () {
    ko.applyBindings(EmployeeListVM);
    EmployeeListVM.getEmployees();
});

//View Model
var EmployeeListVM = {
    Employees: ko.observableArray([]),
    getEmployees: function () {
        var self = this;

.ajax({
            type: "GET",
            url: '/EmployeeInfo/FetchEmployees',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                self.Employees(data); //Put the response in ObservableArray
            },
            error: function (err) {
                alert(err.status + " : " + err.statusText);
            }
        });
    },
};

self.editEmployees = function (student) {
    window.location.href =  '/EmployeeInfo/Edit/' + employee.EmpID;
};
self.deleteEmployees = function (student) {
    window.location.href = '/EmployeeInfo/Delete/' + employee.EmpID;
};

//Model
function Employees(data) {
    this.EmpID = ko.observable(data.EmpID);
    this.EmpName = ko.observable(data.EmpName);
    this.Salary = ko.observable(data.Salary);
    this.DeptName = ko.observable(data.DeptName);
    this.Designation = ko.observable(data.Designation);
   
}

fetchemployees.cshtml

@model IEnumerable<KOSetup.EmployeeInfo>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Employee List</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.EmpName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Salary)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DeptName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Designation)
        </th>
        <th></th>
    </tr>
    </thead>
<tbody data-bind="foreach: Employees">
        <tr>
            <td data-bind="text: EmpID"></td>
            <td data-bind="text: EmpName"></td>
            <td data-bind="text: Salary"></td>
            <td data-bind="text: DeptName"></td>
            <td data-bind="text: Designation"></td>
            
            <td>
                <a data-bind="click: editEmployees">Edit</a>
                <a data-bind="click: deleteEmployees">Delete</a>
            </td>
        </tr>
    </tbody>

</table>

@section Scripts {
    @Scripts.Render("~/Scripts/ViewModels/EmployeeListVM.js")
}

returned data

[{"EmpID":1,"EmpName":"yashica","Salary":12345678,"DeptName":"xyz","Designation":"xyz","EntityState":2,"EntityKey":{"EntitySetName":"EmployeeInfoes","EntityContainerName":"ExamplesEntities","EntityKeyValues":[{"Key":"EmpID","Value":1}],"IsTemporary":false}},{"EmpID":3,"EmpName":"pranali","Salary":12345678,"DeptName":"abc","Designation":"abc","EntityState":2,"EntityKey":{"EntitySetName":"EmployeeInfoes","EntityContainerName":"ExamplesEntities","EntityKeyValues":[{"Key":"EmpID","Value":3}],"IsTemporary":false}}]


...
 success: function (data) { 
                for (var i = 0; i < data.length; i++) {


这篇关于在mvc4中的浏览器knockout.js中显示json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆