如何获得自举模式C#中的数据输入值

问题描述 投票:1回答:1

嗨因此Im使用jQuery数据表工作,我想在数据表中编辑记录所以这里是我的DataTable代码,我得到了员工的ID

"columns": [
                { "data": "Department", "name": "Department", "autoWidth": true },
                { "data": "Name", "name": "Name", "autoWidth": true },
                { "data": "CardNumber", "name": "Card Number", "autoWidth": true },
                {
                    "data": "Id",
                    "render": function (data , type , full , meta)
                    {
                        return '<a href="#" onclick="EditEmployee(' + full.Id + ')"<i class="fa fa-edit fa-2x" ></i></a> &nbsp &nbsp &nbsp &nbsp <a href="#" onclick="DeleteEmployee(' + full.Id + ')"<i class="fa fa-trash fa-2x" style="color:red;"></i></a>'
                    }
                },

            ],

我得到full.id id和我将它传递给这个函数

<script>

var EditEmployee = function (Id) {

    $("#myModal1").modal("show");

};

但我不知道如何将值传递给此模式视图

@foreach (var item in Model.EmployeeCollection)
            {
            <div class="modal fade" id="myModal1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <a href="#" class="close" data-dismiss="">&times;</a>
                            <h3 class="modal-title">Edit Employee</h3>
                        </div>
                        <div class="modal-body" id="myModalBodyDiv1">
                            @while (item.Id == ?????)
                            {
                            <label>Employee Id</label>
                            <input id="txtId" type="text" class="form-control" value="@item.Id" disabled/>

                            <label>Name</label>
                            <input id="txtName" type="text" class="form-control" value="@item.Name" />

                            <label>Department</label>
                            <input id="txtDepartment" type="text" class="form-control" value="@item.Department" />

                            <label>Card Number</label>
                            <input id="txtCardNum" type="text" class="form-control" value="@item.CardNumber" />

                            <div class="modal-footer">
                                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-white" onclick="saveUser();">Save</button>
                            </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
            }

我试过,但它没有工作,我不知道如何通过该ID从js函数的视图。

c# datatables bootstrap-modal
1个回答
1
投票

如果你能重复使用的网格(例如)第一数据:

render: function (data, type, row) {<a data-info="' + row.IdUser + '" data-toggle="modal" data-target="#modalGridTable" ...

现在你可以打开与引导JS或局部视图一个模式:

自举(读取DOC)

在row.IdUser我有我的身份证。现在,当我点击$( '#modalGridTable')。在( 'show.bs.modal',函数(事件)...

    var button = $(event.relatedTarget);
    var id = button.data('info');
    var data = Grid.ajax.json().data;
    function getDataJson(IdUsuario) {
        return data.filter(
            function (data) {
                return data.IdUser === IdUser;
            }
        );
    }

    var result = getDataJson(id);

所以你可以使用这样的:

result[0].Phone

局部视图

发送JSON到控制器是这样的:

i.href ='@Url.Action("Edit")'; 
$('#modal > .modal-dialog > div').load(i.href, { data: jsondata }, function () {
                    $('#modal').modal({
                        backdrop: 'static',
                        keyboard: false
                    }, 'show');
                    bind(this);
                });
            function bind(dialog) {
                $('form', dialog).submit(function () {
                    if ($(this).valid()) {
                        $.ajax({
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (result) {

                            },
                            error: function () {

                            }
                        });
                    }
                    return false;
                });
            }

你可以用模型调用。

© www.soinside.com 2019 - 2024. All rights reserved.