Question

嗨，我有一个简单的MVC，具有Crud操作，如果我尝试在该字段中放置一个datepicker（我都没有用），问题总是会开始出现

<div class="form-group">
        @Html.LabelFor(model => model.Age, new { @class = "control-label" })
        @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
    </div>

datepicker来自https://jqueryui.com/datepicker/，问题在于字段模型。年龄是具有类"form-control"的表单的一部分，所以我必须添加第二个类才能提供给日期选择器？在我的索引文件中，我有很多脚本看起来像datepicker的脚本

function PopupForm(url) {
            var formDiv = $('<div/>');
            $.get(url)
            .done(function (response) {
                formDiv.html(response);

                Popup = formDiv.dialog({
                    autoOpen: true,
                    resizable: false,
                    title: 'Fill Employee Details',
                    height: 500,
                    width: 700,
                    close: function () {
                        Popup.dialog('destroy').remove();
                    }

                });
            });
    }
    function datepicker (){
        $(".example").datepicker();

    };

`

下面是另一个函数的问题。例如，如果我添加一个相同的新类，并且从model.age进行的调用不起作用，{example}上的datepicker函数就起作用了，最糟糕的情况是，经过几次尝试的应用程序都失去了分页功能，而我却失去了网站的原始视图。

所有索引

datepicker

以及包括表单和model.age的所有addoredit模型。

@{
    ViewBag.Title = "Employee List";
}

<h2>Employee CRUD Operations</h2>

<a class="btn btn-success" style="margin-bottom:10px" onclick="PopupForm('@Url.Action(" AddOrEdit","Employee")')"><i class="fa fa-plus"></i> Add New</a>
<table id="employeeTable" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
            <th></th>
        </tr>
    </thead>
</table>

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

@section scripts{
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script>
        var Popup, dataTable;
        $(document).ready(function () {
            dataTable =  $("#employeeTable").DataTable({
                "ajax": {
                    "url": "/Employee/GetData",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Name" },
                    { "data": "Position" },
                    { "data": "Office" },
                    { "data": "Age" },
                    { "data": "Salary" },
                    {"data":"EmployeeID" , "render" : function (data) {
                        return "<a class='btn btn-default btn-sm' onclick=PopupForm('@Url.Action("AddOrEdit","Employee")/" + data + "')><i class='fa fa-pencil'></i> Edit</a><a class='btn btn-danger btn-sm' style='margin-left:5px' onclick=Delete("+data+")><i class='fa fa-trash'></i> Delete</a>";
                    },
                        "orderable": false,
                        "searchable":false,
                        "width":"150px"
                    }

                ],
                "language": {

                    "emptyTable" : "No data found, Please click on <b>Add New</b> Button"
                }
            });
        });

        function PopupForm(url) {
            var formDiv = $('<div/>');
            $.get(url)
            .done(function (response) {
                formDiv.html(response);

                Popup = formDiv.dialog({
                    autoOpen: true,
                    resizable: false,
                    title: 'Fill Employee Details',
                    height: 500,
                    width: 700,
                    close: function () {
                        Popup.dialog('destroy').remove();
                    }

                });
            });
    }
    function datepicker (){
        $(".example").datepicker();

    };

        function SubmitForm(form) {
            $.validator.unobtrusive.parse(form);
            if($(form).valid()){
                $.ajax({
                    type : "POST",
                    url : form.action,
                    data : $(form).serialize(),
                    success : function (data) {
                        if(data.success)
                        {
                            Popup.dialog('close');
                            dataTable.ajax.reload();

                            $.notify(data.message,{
                                globalPosition :"top center",
                                className : "success"
                            })

                        }
                    }
                });
            }
            return false;
        }

        function Delete(id) {
            if(confirm('Are You Sure to Delete this Employee Record ?'))
            {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("Delete","Employee")/' + id,
                    success: function (data) {
                        if (data.success)
                        {
                            dataTable.ajax.reload();

                            $.notify(data.message, {
                                globalPosition: "top center",
                                className: "success"
                            })

                        }
                    }

                });
            }
        }
</script>
}

我想在原始视图上还原我的网站，其二是我想在@model Asp.NETMVCCRUD.Models.Employee @{ Layout = null; } @using (Html.BeginForm("AddOrEdit", "Employee", FormMethod.Post, new {onsubmit = "return SubmitForm(this)" })) { @Html.HiddenFor(model => model.EmployeeID) <div class="form-group"> @Html.LabelFor(model => model.Name, new { @class = "control-label" }) @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Name) </div> <div class="form-group"> @Html.LabelFor(model => model.Position, new { @class = "control-label" }) @Html.EditorFor(model => model.Position, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Position) </div> <div class="form-group"> @Html.LabelFor(model => model.Office, new { @class = "control-label" }) @Html.EditorFor(model => model.Office, new { htmlAttributes = new { @class = "form-control" } }) </div> <div class="form-group"> @Html.LabelFor(model => model.Age, new { @class = "control-label" }) @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } }) </div> <div class="form-group"> @Html.LabelFor(model => model.Salary, new { @class = "control-label" }) <div class="input-group"> <span class="input-group-addon">$</span> @Html.EditorFor(model => model.Salary, new { htmlAttributes = new { @class = "form-control" } }) </div> </div> <div class="form-group"> <input type="submit" value="Submit" class="btn btn-primary" /> <input type="reset" value="Reset" class="btn" /> </div> } datepicker上使用mode.age！

Answer 1

我看到您没有调用函数datepicker（）!，必须在确保打开对话框并显示其内容之后调用它。基于使用的jquery库在弹出窗口（对话框）中打开表单，您将使用after事件并在其处理程序中调用函数datepicker（）。

要将多个类添加到同一元素，您可以执行以下操作

@Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control example" } })

希望对您有帮助。

ASP.NET MVC Crud操作Datepicker

1 个答案: