Asp.net mvc 4 在删除操作链接上显示确认框使用局部视图单击事件

Asp.net mvc 4 在删除操作链接上显示确认框使用局部视图单击事件,asp.net-mvc-4,kendo-ui,kendo-grid,kendo-asp.net-mvc,Asp.net Mvc 4,Kendo Ui,Kendo Grid,Kendo Asp.net Mvc,这是我的主视图页面,我在其中显示剑道网格以显示类别列表: <script> $(document).ready(function () { $("#categories-grid").kendoGrid({ dataSource: { type: "json", transport:

这是我的主视图页面,我在其中显示剑道网格以显示类别列表:

     <script>
            $(document).ready(function () {
                $("#categories-grid").kendoGrid({
                    dataSource: {
                        type: "json",
                        transport: {
                            read: {
                                url: "@Html.Raw(Url.Action("categoriesList", "Admin"))",
                                    type: "POST",
                                    dataType: "json",
                                    data: '',
                                }
                            },
                            schema: {
                                data: "Data",
                                total: "Total",
                                errors: "Errors"
                            },
                            error: function (e) {
                                display_kendoui_grid_error(e);
                                this.cancelChanges();
                            },
                            pageSize: 9,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        pageable: {
                            refresh: true,
                            pageSizes: [10, 20, 30]
                        },
                        editable: {
                            confirmation: false,
                            mode: "inline"
                        },
                        scrollable: false,
                        columns: [
                            {
                                field: "CategoryId",
                                title: "Action",
                                width: 10,
                                template: '<a title="Edit" href="/Admin/ViewCategoryDetails?categoryId=#=CategoryId#&categoryName=#=CategoryName#"><span class="k-icon k-edit"></span></a>'
                            },
                            {
                                field: "CategoryName",
                                title: "CategoryName",
                                width: 10
                            },
                            {
                                field: "CategoryId",
                                title: "Action",
                                width: 10,
                                //template: '<a class="delete" href="#"><span class="k-icon k-delete"></span></a>'
                                template: '<a href="/Admin/DeleteParentCategory"><span class="k-icon k-delete"></span></a>'

                            }]
                });

                });

        </script>

@Html.Partial("DeleteParentCategory")
在这个局部视图中,我只是使用模式弹出式html代码css和js引用

现在发生的情况是,当显示my主视图时,也会显示此模式弹出消息,当我单击删除操作链接时,弹出窗口打开,但my主视图不显示。我的主视图网格在删除操作链接时丢失。

有人能告诉我如何在我的网格显示中单击删除操作链接时只显示部分视图吗

我是mvc的新手,你们能帮帮我吗

这是我的删除部分视图(模态弹出框设计):


jQuery UI对话框-模式确认
@**@
$(函数(){
$(“#对话框确认”)。对话框({
可调整大小:false,
身高:140,
莫代尔:是的,
按钮:{
“删除所有项目”:函数(){
$(此).dialog(“关闭”);
},
取消:函数(){
$(此).dialog(“关闭”);
}
}
});
});
这些项目将被永久删除,无法恢复。你确定吗

我是自由人。Donec aliquet leo vel magna。红背相思。埃蒂安·比本杜姆、埃尼·福西布斯·阿利奎特·朗库斯、阿尔库·菲利斯·乌尔里西斯·内克、艾米特·拍卖行精英爱神之座


您的主视图如下所示

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src=" http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
        $(document).ready(function () {
            $("#categories-grid").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: {
                            url: "@Html.Raw(Url.Action("categoriesList", "Admin"))",
                                type: "POST",
                                dataType: "json",
                                data: '',
                            }
                        },
                        schema: {
                            data: "Data",
                            total: "Total",
                            errors: "Errors"
                        },
                        error: function (e) {
                            display_kendoui_grid_error(e);
                            this.cancelChanges();
                        },
                        pageSize: 9,
                        serverPaging: true,
                        serverFiltering: true,
                        serverSorting: true
                    },
                    pageable: {
                        refresh: true,
                        pageSizes: [10, 20, 30]
                    },
                    editable: {
                        confirmation: false,
                        mode: "inline"
                    },
                    scrollable: false,
                    columns: [
                        {
                            field: "CategoryId",
                            title: "Action",
                            width: 10,
                            template: '<a title="Edit" href="/Admin/ViewCategoryDetails?categoryId=#=CategoryId#&categoryName=#=CategoryName#"><span class="k-icon k-edit"></span></a>'
                        },
                        {
                            field: "CategoryName",
                            title: "CategoryName",
                            width: 10
                        },
                        {
                            field: "CategoryId",
                            title: "Action",
                            width: 10,
                            template: '<a class="delete" onClick="myFunction(); return false;"  href=""><span class="k-icon k-delete"></span></a>'

                        }]
                  });

            });

        function myFunction() {
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 190,
                modal: true,
                buttons: {
                    "Delete all items": function () {
                        $(this).dialog("close");
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        }
</script>
@Html.Partial("DeleteParentCategory")
<div id="dialog-confirm" title="Empty the recycle bin?" style="display:none">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
</span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

$(文档).ready(函数(){
$(“#类别网格”).kendoGrid({
数据源:{
键入:“json”,
运输:{
阅读:{
url:“@Html.Raw(url.Action(“分类列表”、“管理”)”)”,
类型:“POST”,
数据类型:“json”,
数据:“”,
}
},
模式:{
数据:“数据”,
总计:“总计”,
错误:“错误”
},
错误:函数(e){
显示网格错误(e);
这个.cancelChanges();
},
页面大小:9,
对,,
是的,
服务器排序:true
},
可分页:{
刷新:是的,
页面大小:[10、20、30]
},
可编辑:{
确认:假,
模式:“内联”
},
可滚动:false,
栏目:[
{
字段:“CategoryId”,
标题:“行动”,
宽度:10,
模板:“”
},
{
字段:“CategoryName”,
标题:“类别名称”,
宽度:10
},
{
字段:“CategoryId”,
标题:“行动”,
宽度:10,
模板:“”
}]
});
});
函数myFunction(){
$(“#对话框确认”)。对话框({
可调整大小:false,
身高:190,
莫代尔:是的,
按钮:{
“删除所有项目”:函数(){
$(此).dialog(“关闭”);
},
取消:函数(){
$(此).dialog(“关闭”);
}
}
});
}
@Html.Partial(“DeleteParentCategory”)
DeleteParentCategory部分视图如下所示

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src=" http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
        $(document).ready(function () {
            $("#categories-grid").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: {
                            url: "@Html.Raw(Url.Action("categoriesList", "Admin"))",
                                type: "POST",
                                dataType: "json",
                                data: '',
                            }
                        },
                        schema: {
                            data: "Data",
                            total: "Total",
                            errors: "Errors"
                        },
                        error: function (e) {
                            display_kendoui_grid_error(e);
                            this.cancelChanges();
                        },
                        pageSize: 9,
                        serverPaging: true,
                        serverFiltering: true,
                        serverSorting: true
                    },
                    pageable: {
                        refresh: true,
                        pageSizes: [10, 20, 30]
                    },
                    editable: {
                        confirmation: false,
                        mode: "inline"
                    },
                    scrollable: false,
                    columns: [
                        {
                            field: "CategoryId",
                            title: "Action",
                            width: 10,
                            template: '<a title="Edit" href="/Admin/ViewCategoryDetails?categoryId=#=CategoryId#&categoryName=#=CategoryName#"><span class="k-icon k-edit"></span></a>'
                        },
                        {
                            field: "CategoryName",
                            title: "CategoryName",
                            width: 10
                        },
                        {
                            field: "CategoryId",
                            title: "Action",
                            width: 10,
                            template: '<a class="delete" onClick="myFunction(); return false;"  href=""><span class="k-icon k-delete"></span></a>'

                        }]
                  });

            });

        function myFunction() {
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 190,
                modal: true,
                buttons: {
                    "Delete all items": function () {
                        $(this).dialog("close");
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        }
</script>
@Html.Partial("DeleteParentCategory")
<div id="dialog-confirm" title="Empty the recycle bin?" style="display:none">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
</span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>


这些项目将被永久删除,无法恢复。你确定吗


您能提供DeleteParentCategory部分视图的内容吗?不工作。我的主视图页面不显示,弹出窗口也没有打开。相反,它会在新页面上显示p标签中的消息,但如何触发post事件以及如何获取这些值(即“确定”和“取消”对话框的值)我不确定剑道如何内联删除网格行。。也许你可以在ajax调用成功后进行ajax调用以删除和更新网格。你可以通过我如何调用post方法以及传递modal ok值和cancle值来展示ajax的代码吗?我对ajax的相关知识知之甚少。所以你能帮我使用ajax吗?在我看来,这就像原始post的范围结束了一样在这里,对于其他与ajax相关的问题,您可以发布单独的问题,也可以在google上搜索。。
<div id="dialog-confirm" title="Empty the recycle bin?" style="display:none">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
</span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>