首页 > 代码库 > 个人学习jQuery uI dialog +mvcpager心得

个人学习jQuery uI dialog +mvcpager心得

2024-08-05 21:28:11   218人阅读

最近上班过程中用到了jQuery ui,说实话我也没得用过这个jQuery ui 框架，写的不好的地方希望大家多多指点。首先，我们在用到这个dialog这个弹出层方法事，先定义一个
,当然你也可以直接用这个dialog方法里面的属性来实现，本人针对这个dialog的方法做了一个增删查改。 控制器方法： /// /// 公共字典信息集合/// /// /// public ActionResult Vocabulary(int id=1){ var List = comm_DictTypeBLL.GetModel().OrderByDescending(a => a.kid).ToList().ToPagedList(id, 10); if (Request.IsAjaxRequest()) //PartialPage1指的是局部视图 return PartialView("_PartialPage1", List); return View(List);}局部视图PartialPage1 html 代码@using Webdiyer.WebControls.Mvc@model PagedList @foreach (var item in Model) { }
编号 类别代码 类别名称 类别简称 拼音码 五笔码 启用标识 备注 编辑
@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)
@Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ShowPageIndexBox = true, PageIndexBoxType = PageIndexBoxType.DropDownList, ShowGoButton = false }, new MvcAjaxOptions { UpdateTargetId = "articles" }) 主页面 Vocabulary 视图
@Html.Partial("_PartialPage1",Model)
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}
类别代码 启用标志
类别名称 类别简称
拼音码 五笔码
备注
类别代码:
类别名称:
类别简称:
拼 音 码:
五  笔 码:
启用标示:
备      注:
注意MvcPager这个第三方插件要在模板页加
@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 =http://www.mamicode.com/="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 =http://www.mamicode.com/="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 =http://www.mamicode.com/="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 =http://www.mamicode.com/="OK") { alert("修改成功"); location.replace(location); } else { alert("修改失败"); } }); }, "撤销": function () { $(this).dialog("close"); }, }, }); });以上代码就是对dialog的使用

个人学习jQuery uI dialog +mvcpager心得


联系
我们