个人学习jQuery uI dialog +mvcpager心得

最近上班过程中用到了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) {

}

@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这个第三方插件要在模板页加

@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的使用