在MVC 3 Razor CSHTML中使用konckout.js创建带有按钮的网格 [英] Create a Grid with buttons using konckout.js in mvc 3 razor cshtml

问题描述

大家好，我想在MVC 3剃须刀中使用konckout.js创建一个网格，我在网格中有3列，第一列应该是按钮，其余的列应该从控制器获取数据.能够实现所有这些功能，但是我无法将grid的按钮的class或id属性设置为.我希望该类为"select"，其中按钮的id应该是后续列中的值，以便我可以使用jquery执行一些客户端脚本.我的cshtml页面是

Hi all i want to create a grid using konckout.js in mvc 3 razor, i have 3 columns in grid first column should be of button and the rest of the columns should get data from the controller.The thing is that i am able to achieve all this but i am not able set class or id attribute to the button in the grid.I want the class to be "select" where as the id of the button should be the value in the subsequent column, so that i can perform some client side scriptings using jquery. my cshtml page is

    <table>
<thead>
    <tr>
        <th>Buttons</th>
        <th data-bind="text: column1"></th>
        <th data-bind="text: column2"></th>
    </tr>
</thead>
<tbody data-bind="foreach: Office">
    <tr>
    <td><input type="button" value="Select"/></td>
    <td data-bind="text: name"></td>
    <td data-bind="text: location"></td>
    </tr>
</tbody>

我的viewModel就是这样

My viewModel is like this

    var OfficeGrp = function(){
var self =this;
self.name = ko.observable();
self.location = ko.observable(); 
}
var OfficeVM = function () {
    var self = this;
    self.Office = ko.observableArray([new OfficeGrp()]);
    self.column1= ko.observable("Name");
    self.column2= ko.observable("Location");
    self.RadioBtnActive = function () {
        var self = this;
        self.Office.removeAll();
        $.getJSON(urlContent + "Office/GetOfficeGrid", { param: "true" }, function (data) {
            self.Office(data);
        });
    };
    self.RadioBtnAll = function () {
        var self = this;
        self.Office.removeAll();
         $.getJSON(urlContent + "Office/GetOfficeGrid", { param: "true" }, function (data) {
            self.Office(data);
        });
    };

};

$(document).ready(function () {
    var officeVM = new OfficeVM();
    ko.applyBindings(officeVM );
     officeVM.RadioBtnActive();
     $("input:button[class='select']").click(function () {
        alert('HELLO');
    });

});

即使我将类明确分配给按钮元素

Even though i explictly assign class to button element like this

    <input type="button" value="Select" class="select"/>

我给出的jQuery单击事件在单击按钮时没有被击中

Jquery click event which i have given does not get hit upon click of button

    $("input:button[class='select']").click(function () {
        alert('HELLO');
    });

我已经尝试过使用敲门.js中的这个

I have tried using this from knockout.js

    <input type="button" value="Select" class="select" data-bind="attr: { id: name}"/>

还有我忘了在开头添加单选按钮

And also the radio buttons i forgot to add at the beginning

    <input id="RadiobtnActive" type="radio" name="radioBtn" checked="checked" class="rdbtn" data-bind="click: RadioBtnActive"/>Active
   <input id="RadiobtnAll" type="radio" name="radioBtn" class="rdbtn" data-bind="click: RadioBtnAll"/> All

但是我首先希望Jquery Button click事件能够正常工作(我不知道为什么)，我想将id的值发送给控制器.在这种情况下的帮助将不胜感激..........

but i first want Jquery Button click event to work which is not working(i don't know why) upon which i would like to send the value of the id to controller. A help in this case would be highly appreciated..........

推荐答案

请尝试查看本教程

http://knockoutjs.com/examples/gridEditor.html

这篇关于在MVC 3 Razor CSHTML中使用konckout.js创建带有按钮的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！