MVC的主从表编辑
刚学mvc没几天，想在mvc中搞个webform中gridView的效果
脚本：
(function ($) {
$.fn.nGridView = function () {
var m_Ndatas = new NDatas();
var r = new NRow();
var isInsert = true;
var strHtml = "";
this.addData = function (inputName, displayName) {
m_Ndatas.add(new NData(inputName, displayName));
return this;
};
this.addCell = function () {
var cell = new NCell();
r.Cells.push(cell);
return cell;
};
function NDatas() {
this.datas = new Array();
this.add = function (data) {
this.datas.push(data);
};
this.getI = function (dispalyName) {
var result = "";
$.each(this.datas, function (i, n) {
if (n.displayName.toLowerCase() == dispalyName.toLowerCase()) {
result = n.inputName;
return;
}
});
return result;
};
this.getD = function (inputName) {
var result = "";
$.each(this.datas, function (i, n) {
if (n.inputName.toLowerCase() == inputName.toLowerCase()) {
result = n.displayName;
return;
}
});
return result;
};
this.getIValue = function (tr, dispalyName) {
var result = "";
$.each(this.datas, function (i, n) {
if (n.displayName.toLowerCase() == dispalyName.toLowerCase()) {
result = tr.find("[name='" + n.inputName + "']").val();
return;
}
});
return result;
};
this.setIValue = function (tradd, tr) {
$.each(this.datas, function (i, n) {
tradd.find("[name='" + n.inputName + "']").val(tr.find("[name='" + n.displayName + "']").val());
});
};
this.init = function (paramTr) {
$.each(this.datas, function (i, n) {
paramTr.find("[name='" + n.inputName + "']").val("");
});
};
}
function NData(inputName, displayName) {
this.inputName = inputName;
this.displayName = displayName;
}
function NControl(dataName, normalHtml) {
this.Name = dataName;
this.Html = "<input type="hidden" name="[name]" value="[data]" />[data]";
if (normalHtml) {
this.Html = normalHtml;
}
this.toString = function (paramTr) {
return this.Html.replace(/\[data\]/g, m_Ndatas.getIValue(paramTr, this.Name)).replace(/\[name\]/g, this.Name);
};
}
function NCell(control) {
this.Controls = new Array();
this.toString = function (paramTr) {
var strResult = "<td>";
$.each(this.Controls, function (i, n) {
strResult += n.toString(paramTr);
});
return strResult + "</td>";
};
this.add = function (dataName, normalHtml) {
this.Controls.push(new NControl(dataName, normalHtml));
return this;
};
if (control) {
this.Controls.push(control);
}
}
function NRow(cell) {
this.Cells = new Array();
this.toString = function (paramTr) {
var strResult = "<tr>";
$.each(this.Cells, function (i, n) {
strResult += n.toString(paramTr);
});
return strResult + "<td><a href="java" + "script:void(0);" class="edit">编辑</a></td><td><a href="java" + "script:void(0);" class="del">删除</a></td></tr>";
};
if (cell) {
this.Cells.push(cell);
}
}
function getNormalTr(paramTr) {
return r.toString(paramTr);
}
function setUpdateCell(paramTr) {
paramTr.find(".add").replaceWith("<a href="javas" + "cript:void(0);" class="update">更新</a><a href="javas" + "cript:void(0);" class="cancel">取消</a>");
}
function setAddCell(paramTr) {
paramTr.find(".update").replaceWith("<a href="javas" + "cript:void(0);" class="add">添加</a>");
paramTr.find(".cancel").remove();
}
$(".add").live("click", function () {
var tr = $(this).parents("tr:first").eq(0);
tr.before(getNormalTr(tr));
m_Ndatas.init(tr);
});
$(".edit").live("click", function () {
var tr = $(this).parents("tr:first").eq(0);
var tradd = tr.siblings(".tradd:first").eq(0);
if (isInsert) {
strHtml = tr[0].outerHTML;
setUpdateCell(tradd);
m_Ndatas.setIValue(tradd, tr);
tr.replaceWith(tradd);
}
else {
// 恢复原html
tradd.prev().after(strHtml);
m_Ndatas.setIValue(tradd, tr);
strHtml = tr[0].outerHTML;
tr.replaceWith(tradd);
}
isInsert = false;
});
$(".update").live("click", function () {
var tr = $(this).parents("tr:first").eq(0);
var table = $(this).parents("table:first").eq(0);
tr.prev().after(getNormalTr(tr));
setAddCell(tr);
table.append(tr);
m_Ndatas.init(tr);
isInsert = true;
});
$(".cancel").live("click", function () {
var tr = $(this).parents("tr:first").eq(0);
tr.prev().after(strHtml);
var table = $(this).parents("table:first").eq(0);
setAddCell(tr);
table.append(tr);
m_Ndatas.init(tr);
isInsert = true;
});
$(".del").live("click", function () {
if (confirm("确定删除吗？")) {
var tr = $(this).parents("tr:first").eq(0);
tr.remove();
}
});
return this;
};
})(jQuery);
@model TestMvc.Models.Movie
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Movie</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Title)
@Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ReleaseDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ReleaseDate, "DateEditTemplate")
@Html.ValidationMessageFor(model => model.ReleaseDate)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Genre)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Genre)
@Html.ValidationMessageFor(model => model.Genre)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Price)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Price)
@Html.ValidationMessageFor(model => model.Price)
</div>
<table class="gv">
<tr>
<th>
Title
</th>
<th>
Title2
</th>
<th>添加</th>
<th>删除</th>
</tr>
@if(Model != null)
{
foreach(var item in Model.MovieDetails)
{
<tr><td><input type="hidden" name="DetailTitle" value="@item.Title" />@item.Title</td>
<td><input type="hidden" name="DetailTitle2" value="@item.Title2" />@item.Title2</td>
<td><a href="javascript:void(0);" class="edit">编辑</a></td><td><a href="javascript:void(0);" class="del">删除</a></td></tr>
}
}
<tr class="tradd"><td><input name="Detail_Title" /></td><td><input name="Detail_Title2" /></td><td><a href="javascript:void(0);" class="add">添加</a></td><td></td></tr>
</table>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
<input type="hidden" value="" />
@if(ViewData["script"] != null)
{
<script type="text/javascript">@Html.Raw(ViewData["script"].ToString())</script>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryGv");
@Styles.Render("~/Content/themes/base/css")
<script type="text/javascript">
$(function () {
$(".DateTime").datepicker({ showOn: "button", buttonImage: "@Href("~/images/calendar.gif")", buttonImageOnly: true });
var gv = $(".gv").nGridView();
gv.addData("Detail_Title", "DetailTitle").addData("Detail_Title2", "DetailTitle2");
gv.addCell().add("DetailTitle");
gv.addCell().add("DetailTitle2");
});
</script>
}
private ActionResult ShowMessage(object oo, string paramMessage)
{
ViewData["script"] = "alert('" + paramMessage + "');";
return View(oo);
}
//
// POST: /Movies/Create
[HttpPost]
public ActionResult Create(Movie movie)
{
movie.MovieDetails.Clear();
string[] strTitles = Request["DetailTitle"] == null ? new string[0] : Request["DetailTitle"].ToString().Split(new char[] { ',' });
string[] strTitle2s = Request["DetailTitle2"] == null ? new string[0] : Request["DetailTitle2"].ToString().Split(new char[] { ',' });
for(int i = 0; i <= strTitles.Length - 1; i++)
{
movie.MovieDetails.Add(new MovieDetail() { Title = strTitles[i].Trim(), Title2 = strTitle2s[i] });
}
if (ModelState.IsValid)
{
if(movie.MovieDetails.Count == 0)
{
return ShowMessage(movie, "明细不能为空！");
}
foreach(var item in movie.MovieDetails)
{
string strTemp = item.Title.Trim();
if(strTemp.Length == 0)
{
return ShowMessage(movie, "标题不能为空！");
}
}
db.Movies.Add(movie);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(movie);
}
你的代码的Request["DetailTitle"] 确实还是普通的方法。如果因为这一个而搞个model 得不偿失。
[解决办法]
建立两个表合起来的model类
[解决办法]
json传model吧！
[解决办法]
前台data={"name":"sdfdsf","set":"nv".......} 拼凑好。传递给后台。然后 序列化成model
