asp.net mvc crud 操作 datepicker
Posted
技术标签:
【中文标题】asp.net mvc crud 操作 datepicker【英文标题】：Asp.net mvc crud operation datepicker 【发布时间】：2018-12-09 20:59:33 【问题描述】：您好，我有简单的 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/ 问题是字段 model.Age 是带有 class"form-control" 的表单的一部分，所以我必须添加第二个类来给 datepicker？
在我的索引文件中，我有很多脚本查看 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();
;
`
下面是另一个函数的问题是关于 .example 上的 datepicker 函数，如果我添加一个相同的新类并从 model.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>
以及包含表单和model.age的所有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>
我想在原来的视图上恢复我的网站，第二个是我想要datepicker上的mode.agetextbox！
【问题讨论】：
既然你有$(".example").datepicker();，只需将类名添加到对应的EditorFor：@Html.EditorFor(model => model.Age, new htmlAttributes = new @class = "form-control example" )。不需要使用特殊函数来定义datepicker，放在$(document).ready()就足够了。
这个对话框（formDiv.dialog）是bootstrap还是jqueryUI？
【参考方案1】：
我看到你没有调用你的函数 datepicker()!，你必须在确保对话框打开并显示其内容后调用它。 基于使用的 jquery 库在弹出（对话框）中打开表单，您将使用显示后的事件并在其处理程序中调用您的函数 datepicker()。
要将多个类添加到同一个元素，您可以执行以下操作
@Html.EditorFor(model => model.Age, new htmlAttributes = new @class = "form-control example" )
希望对你有所帮助。
【讨论】：
我试过什么都没发生看看我上面的新例子，我把脚本放在表单中以上是关于asp.net mvc crud 操作 datepicker的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET MVC 3 EF 代码优先 - 掌握详细信息 CRUD
CRUD Operations In ASP.NET MVC 5 Using ADO.NET
ASP.NET MVC 4 中 Controller 与 ApiController 做读取新增更新删除 ( CRUD )