C# Asp.net mvc crud操作日期选择器

嗨，我有一个简单的带crud操作的MVC。如果我尝试在该字段中放置一个

日期选择器（我也没有得到它），问题总是会开始

<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函数的问题。例如，如果我添加了一个新类，并从
模型调用该类。age
无法使用
datepicker
，
最糟糕的情况是，经过多次尝试后，应用程序失去了分页功能，我也失去了站点的原始视图

所有索引

@{
    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>
}

@{
ViewBag.Title=“员工列表”；
}
员工积垢操作
删除”；
},
“可订购”：错误，
“可搜索”：错误，
“宽度”：“150px”
}
],
“语言”：{
“emptyTable”：“未找到数据，请单击添加新按钮”
}
});
});
函数PopupForm（url）{
var formDiv=$（''）；
$.get（url）
.完成（功能（响应）{
html（回应）；
Popup=formDiv.dialog({
自动打开：对，
可调整大小：false，
标题：“填写员工详细信息”，
身高：500，
宽度：700，
关闭：函数（）{
对话框（'destroy'）.remove（）；
}
});
});
}
函数日期选择器（）{
$（“.example”）.datepicker（）；
};
函数提交表单（表单）{
$.validator.unobtrusive.parse（表单）；
if（$（form）.valid（））{
$.ajax({
类型：“POST”，
url:form.action，
数据：$（表单）.serialize（），
成功：功能（数据）{
if（data.success）
{
弹出对话框（“关闭”）；
dataTable.ajax.reload（）；
$.notify（data.message{
全球定位：“顶级中心”，
类名：“成功”
})
}
}
});
}
返回false；
}
函数删除（id）{
如果（确认（'您确定要删除此员工记录吗？'））
{
$.ajax({
类型：“POST”，
url:'@url.Action（“删除”、“员工”）/'+id，
成功：功能（数据）{
if（data.success）
{
dataTable.ajax.reload（）；
$.notify（data.message{
全球定位：“顶级中心”，
类名：“成功”
})
}
}
});
}
}
}

以及包含表单和model.age的all addoredit模型

@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>
}

@model Asp.NETMVCCRUD.Models.Employee
@{
布局=空；
}
@使用（Html.BeginForm（“AddOrEdit”，“Employee”，FormMethod.Post，new{onsubmit=“return SubmitForm（this）”}））
{
@Html.HiddenFor（model=>model.EmployeeID）
@LabelFor（model=>model.Name，新的{@class=“control label”}）
@EditorFor（model=>model.Name，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Name）
@LabelFor（model=>model.Position，新的{@class=“control label”}）
@EditorFor（model=>model.Position，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.Position）
@LabelFor（model=>model.Office，新的{@class=“control label”}）
@EditorFor（model=>model.Office，new{htmlAttributes=new{@class=“form control”}）
@LabelFor（model=>model.Age，新的{@class=“control label”}）
@EditorFor（model=>model.Age，new{htmlAttributes=new{@class=“form control”}）
@LabelFor（model=>model.Salary，新的{@class=“control label”}）
$
@EditorFor（model=>model.Salary，new{htmlAttributes=new{@class=“form control”}）
}

我想在原始视图上恢复我的站点，第二个是我想在
模式下使用
日期选择器
。age
文本框
！
我看到您没有调用函数datepicker（）！，您必须在确保对话框打开并显示其内容后调用它。
根据用于在弹出窗口（对话框）中打开表单的jquery库，您将使用after display事件并在其处理程序中调用函数datepicker（）

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

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

我希望这对您有所帮助。
既然您有
$（“.example”）.datepicker（）；
，只需将类名添加到相应的
EditorFor
：
@Html.EditorFor（model=>model.Age，new{htmlAttributes=new{@class=“form control example”}}）
。无需使用特殊函数来定义日期选择器，将其放入
$（document）.ready（）
应该足够了。这个对话框（formDiv.dialog）是bootstrap还是jqueryUI？我什么都没试过，看看上面的新示例，我把脚本放在表单中了
@Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control example" } })