个人学习jQuery uI dialog +mvcpager心得
浏览数：152 /
时间：2015年06月09日
最近上班过程中用到了jQuery ui,说实话我也没得用过这个jQuery ui 框架，写的不好的地方希望大家多多指点。
首先，我们在用到这个dialog这个弹出层方法事，先定义一个 ,当然你也可以直接用这个dialog方法里面的属性来实现，本人针对这个dialog的方法做了一个增删查改。
控制器方法：
///
/// 公共字典信息集合
///
///
///
@Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ShowPageIndexBox = true, PageIndexBoxType = PageIndexBoxType.DropDownList, ShowGoButton = false }, new MvcAjaxOptions { UpdateTargetId = "articles" })
主页面 Vocabulary 视图
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
不然会报错，
下面我们来看jQuery ui dialog 弹出层来添加数据
$("#NewAdd").click(function () {
$("#dialog-message").dialog({
width: 600,
Heigth: 600,
dialogClass: true,
modal: true,
buttons: {
"保存": function (e) {
if ($("#TypeCode").val() == "") { alert("类别代码不能为空"); e.preventDefault(); $("#TypeCode").focus(); }
else if ($("#TypeName").val() == "") { alert("类别名称不能为空"); e.preventDefault(); $("#TypeName").focus(); }
else if ($("#TypeShortName").val() == "") { alert("类别简称不能为空"); e.preventDefault(); $("#TypeShortName").focus(); }
else if ($("#PYCode").val() == "") { alert("名称拼音码不能为空"); e.preventDefault(); $("#PYCode").focus(); }
else if ($("#WBCode").val() == "") { alert("名称五笔码不能为空"); e.preventDefault(); $("#WBCode").focus(); }
else if ($("#txttar").val() == "") { alert("备注不能为空"); e.preventDefault(); $("#txttar").focus(); }
else {
var TypeCode = $("#TypeCode").val();
var TypeName = $("#TypeName").val();
var TypeShortName = $("#TypeShortName").val();
var PYCode = $("#PYCode").val();
var WBCode = $("#WBCode").val();
var txttar = $("#txttar").val();
var IfUse = $("#IfUse").val();
$.post("/Memorial/AddList", { TypeCode: TypeCode, TypeName: TypeName, TypeShortName: TypeShortName, PYCode: PYCode, WBCode: WBCode, txttar: txttar, IfUse: IfUse, }, function (data) {
if (data == "OK") {
$("#TypeCode").attr("value", "");
$("#TypeName").attr("value", "");
$("#TypeShortName").attr("value", "");
$("#PYCode").attr("value", "");
$("#WBCode").attr("value", "");
$("#txttar").attr("value", "");
alert("添加成功");
location.replace(location);
}
else if (data == "NO") {
alert("添加失败");
return false;
}
});
}
}, "关闭": function () { $(this).dialog("close"); }
},
})
});
删除数据
$("#Rome").click(function () {
if ($("input[name=chec]").is(‘:checked‘) == true) {
if (confirm("确认删除吗？")) {
var str = "";
$("input[name=chec]:checkbox:checked").each(function () {
str += $(this).val() + ":";
});
$.post("/Memorial/RomecoList", { kid: str }, function (data) {
if (data == "OK") {
alert("删除成功！");
window.location.reload(true);
}
else {
alert("删除失败");
}
});
}
}
else {
alert("请选择一条或多条数据源");
return;
}
});
这个地方的后台的接受方法
string kid= Request["kid"];
kid= kid.Substring(0, kid.Length - 1);
string[] id = kid.Split(‘:‘);
修改数据
$(function () {
$(".butt").click(function () {
var comm_DictType = $(this);
$("#Skid").attr("value", comm_DictType.attr("kid"));
$("#STypeCode").attr("value", comm_DictType.attr("TypeCode"));
$("#STypeName").attr("value", comm_DictType.attr("TypeName"));
$("#STypeShortName").attr("value", comm_DictType.attr("TypeShortName"));
$("#SPYCode").attr("value", comm_DictType.attr("PYCode"));
$("#SWBCode").attr("value", comm_DictType.attr("WBCode"));
$("#SIfUse").attr("value", comm_DictType.attr("IfUse"));
$("#SRemark").attr("value", comm_DictType.attr("Remark"));
$("#window").dialog({
title: "修改信息",
width: 500,
height: 420,
modal: true,
buttons: {
"修改": function () {
var kid = $("#Skid").val();
var TypeCode = $("#STypeCode").val();
var TypeName = $("#STypeName").val();
var TypeShortName = $("#STypeShortName").val();
var PYCode = $("#SPYCode").val();
var WBCode = $("#SWBCode").val();
var IfUse = $("#SIfUse").val();
var Remark = $("#SRemark").val();
$.post("/Memorial/NewUpdate", { kid: kid, TypeCode: TypeCode, TypeName: TypeName, TypeShortName: TypeShortName, PYCode: PYCode, WBCode: WBCode,IfUse:IfUse, Remark: Remark }, function (data) {
if (data == "OK") {
alert("修改成功");
location.replace(location);
}
else {
alert("修改失败");
}
});
},
"撤销": function () { $(this).dialog("close"); },
},
});
});
以上代码就是对dialog的使用
| 编号 | 类别代码 | 类别名称 | 类别简称 | 拼音码 | 五笔码 | 启用标识 | 备注 | 编辑 |
|---|---|---|---|---|---|---|---|---|
| @Html.DisplayFor(modelItem => item.TypeCode) | @Html.DisplayFor(modelItem => item.TypeName) | @Html.DisplayFor(modelItem => item.TypeShortName) | @Html.DisplayFor(modelItem => item.PYCode) | @Html.DisplayFor(modelItem => item.WBCode) | @Html.DisplayFor(modelItem => item.IfUse) | @Html.DisplayFor(modelItem => item.Remark) |
@Html.Partial("_PartialPage1",Model)
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}
注意MvcPager这个第三方插件要在模板页加
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
