后台的弹框异步修改
获取数据
首先从数据库取两部分数据，一是variant，二是variantImage。显示到页面，如下图
<table id="Gridtable_Variants" class="gridtable"> <thead> <tr> <th style="display:none;">VariantId</th> <th>SKU</th> <th>QTY</th> <th>Status</th> <th style="display:none;"></th> </tr> </thead> <tbody> @foreach (var v in Model.Variants) { <tr> <td style="display:none;">@v.VariantID</td> <td>@v.SKU</td> <td>@v.StockQuantity</td> <td>@Allure.BLL.DisplayStatus.DisplayVariantStatus(v.Status)</td> <td style="display:none;">@v.Status</td> </tr> } </tbody> <tfoot> <tr> <td colspan="5"> <input id="EditTest" type="button" value="Edit"/> </td> </tr> </tfoot> </table>
添加css，让table变的好看些
.gridtable { border-collapse: collapse; } .gridtable thead td,th { background-color: #E8F4FD; color: #2b5ba5; font-weight: bold; border: 1px solid #BCD2E6; } .gridtable td { border: 1px solid #BCD2E6; padding: 10px; } .gridtable tfoot td { background-color: #FFFFCC; }
添加dataTable
为table添加dataTable，这样table会加入排序等功能
1、添加js文件，查找js引用的网页 http://www.asp.net/ajaxlibrary/cdn.ashx
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js" type="text/javascript"></script>
2、添加js代码,XXX为table的Id，editorVariants后边会用到。这里的table必须是thead、tbody和tfoot的结构才行。
<script type="text/javascript">
var editorVariants;
$(function () {
$("#Gridtable_Variants").dataTable().fnDestroy();
editorVariants = $('#Gridtable_Variants').dataTable({
"bInfo": false,
"bServerSide": false,
'bPaginate': false, //是否分页。
"bProcessing": false, //当datatable获取数据时候是否显示正在处理提示信息。
'bFilter': false, //是否使用内置的过滤功能。
'bLengthChange': false, //是否允许用户自定义每页显示条数。
'sPaginationType': 'full_numbers', //分页样式
});
});
</script>
添加选择效果
下面要做的是选中某一行，可以将这一行的内容弹框。
首先做一个选择(单选)的效果
1、添加class
.row_selected { background-color:#E8F4FD; }
2、添加js，如果tr被选中，移除class。如果tr未被选中，移除其他class，为本tr添加class。
$("#Gridtable_Variants tbody tr").click(function (e) {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
}
else {
editorVariants.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});
添加弹框
现在需要一个弹框，是隐藏起来的，在tr被选中的时候将这一行数据赋值到弹框里去。tr被移除，值也被移除。
1、添加一个用来弹框的table，如下图。后面的两个text，第一个是variantId，第二个是productid，后面是要隐藏起来的。
<div id="e_Variants"> <table id="VariantsTable"> <tbody> <tr> <td> SKU </td> <td> <input id="SKU" name="SKU" type="text" class="required"/> * <input id="VariantID" name="VariantID" type="text" /> <input id="ProductID" name="ProductID" type="text" value="@Model.ProductID"/> </td> </tr> <tr> <td> QTY </td> <td> <input id="StockQuantity" name="StockQuantity" type="text" class="required"/> * </td> </tr> <tr> <td> Status </td> <td> @Html.DropDownList("Status",Dialoglearn.Models.HelperModel.VariantStatusList()) </td> </tr> </tbody> </table> </div>
2、在选中某一行的时候，把值赋到table里，再次点击取消赋值。这需要修改一下js代码，如下：
$("#Gridtable_Variants tbody tr").click(function (e) {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
$("#VariantID").val(null);
$("#SKU").val(null);
$("#StockQuantity").val(null);
$("#Status").val(null);
}
else {
editorVariants.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
var aData = editorVariants.fnGetData(this);
if (null != aData) {
$("#VariantID").val(aData[0]);
$("#SKU").val(aData[1]);
$("#StockQuantity").val(aData[2]);
$("#Status").val(aData[4]);
}
}
});
这里要说明的是，Status本来是short值，显示的时候根据enum转换成了string，但是要把值赋到dropdownlist里，需要的是short而不是string，所以在添加显示数据的时
候，已经在status后面又隐藏了一列，放入未经转化的status的short值。然后给dropdownlist赋值的时候取这个值，所以可以看到js代码里取值用的是aData[4]，而空过去了
aData[3]。
3、把div变成弹框。
这里需要添加两个引用，一个是jquery ui js，一个是 jquery ui css。
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
然后把div变成弹框，modal是遮蔽层。
$("#e_Variants").dialog({
modal: true,
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
width: 400
});
然后添加一个按钮，点击按钮的时候把弹框弹出来。
$("#EditTest").click(function () {
$("#e_Variants").dialog("open");
});
异步编辑
先添加js引用<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>，这里需要将jquery的引用改为较低的版本，2.0不工作，我改为了1.7.2
要做异步编辑的话，首先要对弹框进行修改，加入ajax的异步form，代码如下：
<div id="e_Variants"> @using (Ajax.BeginForm("UpdateVariant", "Product", new AjaxOptions { UpdateTargetId = "d_Variants", OnSuccess = "dialogClose_Variants", HttpMethod = "Post", })) { <table id="VariantsTable"> <tbody> <tr> <td> SKU </td> <td> <input id="SKU" name="SKU" type="text" class="required"/> * <input id="VariantID" name="VariantID" type="text" /> <input id="ProductID" name="ProductID" type="text" value="@Model.ProductID"/> </td> </tr> <tr> <td> QTY </td> <td> <input id="StockQuantity" name="StockQuantity" type="text" class="required"/> * </td> </tr> <tr> <td> Status </td> <td> @Html.DropDownList("Status",Dialoglearn.Models.HelperModel.VariantStatusList()) </td> </tr> </tbody> </table> } </div>
UpdateTargetId：要更新的元素的id。这里的_Variants是一个partial页面，他在layout里的显示如下：
<div id="d_Variants"> @Html.Partial("_Variants", Model) </div>
可以看到这里要更新的元素是包裹他的div。
OnSuccess：操作成功之后要调用的js方法，一般是用来关闭弹框的。
所以下来我们要做两个事情，第一是完成异步调用action UpdateVariant，第二是实现dialogClose_Variants。
UpdateVariant
public ActionResult UpdateVariant(Variant variant) { //更新Variant ProductBLL productBLL = new ProductBLL(); productBLL.UpdateVariant(variant); //获取新的product return Product product = productBLL.Retrieve(variant.ProductID); return PartialView("_Variants", product); }
dialogClose_Variants
function dialogClose_Variants() { $("#e_Variants").dialog("close"); }
最后把要隐藏的input隐藏掉，异步修改就完成了。
添加验证
最后一步是给text添加验证，分以下三步：
1、添加js
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
2、为字段添加验证条件
为字段添加验证的时候分两种情况
第一种是可以通过页面类型使用到HtmlHelper，如：Model.XXX。
是这种情况的话，首先在字段的顶部加上验证，然后把验证Message写到页面上就行了。
如：
[StringLength(10)] public string Name { get; set; }
@Html.ValidationMessageFor(x=>Model.Name)
第二种情况是无法通过Model和HtmlHelper来生成input的时候，通过Jquery来完成验证。其中rules是规则，message是提示信息。SKU是空间的name，他在rules和
message一一对应。
$("#FormId").validate({
rules: {
SKU: {
required: true,
maxlength: 5
}
},
messages: {
SKU: {
required: "123",
maxlength: "456"
}
}
});
