Question

我开始研究MVC 3项目，我在项目中使用jquery设计了带弹出视图的项目，但是我无法实现它。

这是我的主页代码：这里我将在表格视图中显示记录 -

@model EmpMvcApplication.Models.PagedEmployeeModel 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    WebGrid grid = new WebGrid(rowsPerPage: Model.PageSize);
    grid.Bind(Model.TblEmp, autoSortAndPage: false, rowCount: Model.TotalRows);
}
<link href="../../Content/themes/Webgrid.css" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-2.1.0.js"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $("CreateEmp").live("click", function (e) {
            // e.preventDefault(); use this or return false
            var url = $(this).attr('href');
            $("#dialog-edit").dialog({
                title: 'Create Employee',
                autoOpen: false,
                resizable: false,
                height: 355,
                width: 400,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);

                },
                close: function (event, ui) {
                    $(this).dialog('close');
                }
            });

            $("#dialog-edit").dialog('open');
            return false;
        });

        $(".editDialog").live("click", function (e) {
            // e.preventDefault(); use this or return false
            var url = $(this).attr('href');
            $("#dialog-edit").dialog({
                title: 'Edit Employee',
                autoOpen: false,
                resizable: false,
                height: 355,
                width: 400,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);

                },
                close: function (event, ui) {
                    $(this).dialog('close');
                }
            });

            $("#dialog-edit").dialog('open');
            return false;
        });

        $(".confirmDialog").live("click", function (e) {

            // e.preventDefault(); use this or return false
            var url = $(this).attr('href');

            $("#dialog-confirm").dialog({
                autoOpen: false,
                resizable: false,
                height: 170,
                width: 350,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                        window.location = url;

                    },
                    "Cancel": function () {
                        $(this).dialog("close");

                    }
                }
            });
            $("#dialog-confirm").dialog('open');
            return false;
        });

        $(".viewDialog").live("click", function (e) {
            // e.preventDefault(); use this or return false
            var url = $(this).attr('href');
            $("#dialog-view").dialog({
                title: 'View Employee',
                autoOpen: false,
                resizable: false,
                height: 250,
                width: 400,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);

                },
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");

                    }
                },
                close: function (event, ui) {
                    $(this).dialog('close');
                }
            });

            $("#dialog-view").dialog('open');
            return false;
        });

        $("#btncancel").live("click", function (e) {
            // location.reload(true);
            $("#dialog-edit").dialog('close');

        });
    });
</script>
<h2>
    CRUD Operations using jQuery dialog and WebGrid</h2>
<br />
<div style="color: Green; font-weight: bold">
    @TempData["msg"]
</div>
<br />
@grid.GetHtml(
    fillEmptyRows: false,
    tableStyle: "Webgrid-table",
    headerStyle: "Webgrid-header",
    footerStyle: "Webgrid-footer",
    alternatingRowStyle: "Webgrid-alternating-row",
    rowStyle: "Webgrid-row-style",

    mode: WebGridPagerModes.All,
            firstText: "<< First",
            previousText: "< Prev",
            nextText: "Next >",
            lastText: "Last >>",
    columns: new[] {

        grid.Column("EmpID", header: "Employee ID"),
        grid.Column("EName", format:@<text>@Html.ActionLink((string)item.EName, "Details", "Home", new {id = item.EmpID}, null)</text>),
        grid.Column("EmailID",  header: "Email-ID"),
        grid.Column("Address",  header: "Address"),
})
<br />
@Html.ActionLink("Create", "Create")
@*<a id="CreateEmp" href="~\Home\Create">Create Employee</a>*@
<div id="dialog-confirm" style="display: none">
    <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
        Are you sure to delete ?
    </p>
</div>
<div id="dialog-edit" style="display: none">
</div>
<div id="dialog-view" style="display: none">
</div>

我想在点击特定记录时显示视图，下面是查看详细信息

@model EmpMvcApplication.Models.EmpModel
@{
    Layout = null;
}
<link href="../../Content/themes/Webgrid.css" rel="stylesheet" />
@using (Html.BeginForm("Details", "Home", "POST"))
{
    <fieldset class="DetailsFS">
        <legend>Employee Details</legend>

        <div>
            EmpID: @Html.DisplayFor(model => model.EmpID)
        </div>

        <div>
            Employee Name: @Html.DisplayFor(model => model.EName)
        </div>

        <div>
            Age:  @Html.DisplayFor(model => model.Age)
        </div>

        <div>
            Gender: @Html.DisplayFor(model => model.Gender)
        </div>

        <div>
            Qualification: @Html.DisplayFor(model => model.Qualification)
        </div>

        <div>
            Address: @Html.DisplayFor(model => model.Address)
        </div>

        <div>
            EmailID: @Html.DisplayFor(model => model.EmailID)
        </div>
        <div>
            Department Name: @Html.DisplayFor(model => model.DeptName)
        </div>
        <div>
            <p>
                @Html.ActionLink("Edit", "Edit", new { Id = Model.EmpID /* id=Model.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { ID = Model.EmpID }) | 
                @Html.ActionLink("Back to List", "Index")
            </p>
        </div>

    </fieldset>

}

这是控制器

   public ActionResult Details(int id)
        {
            var data = modlservices.GetEmployee(id);

            EmpModel emp = new EmpModel();
            emp.EmpID = data.EmpID;
            emp.EName = data.EName;
            emp.Gender = data.Gender;
            emp.Qualification = data.Qualification;

            //emp.Age = data.Age;
            emp.Address = data.Address;
            emp.EmailID = data.EmailID;

            return View("_ViewEmployee", emp);

        }

有人帮我做这件事，谢谢。

Answer 1

您正在进行两次对话构造函数调用。

例如：$("#dialog-edit").dialog({})和$("#dialog-edit").dialog('open');

可能是造成这个问题。

Answer 2

为什么有两个版本的jquery库??? 只需删除一个并尝试。

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-2.1.0.js"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>

Jquery Popup不在MVC中工作？

2 个答案: