个人学习jQuery uI dialog +mvcpager心得

时间：2014-12-03 15:37:36 阅读：320 评论：0 收藏：0 [点我收藏+]

最近上班过程中用到了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 == "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的使用

个人学习jQuery uI dialog +mvcpager心得

原文：http://www.cnblogs.com/btmc/p/4140203.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

类别代码		启用标志
类别名称		类别简称
拼音码		五笔码
备注