您的位置:首页 > Web前端 > JQuery

ASP.NET MVC 4.0 CKEditor jquery 文章管理 图片上传 解决方案

2011-10-01 09:33 579 查看
文章修改,新增业务的C#代码

[HttpPost]
[ValidateInput(false)]
public ActionResult AddNew(FormCollection values)
{
var db = new ddrDBEntities();
XinWen obj = new XinWen();
if (!string.IsNullOrEmpty(Request["id"]))
{
var id = Guid.Parse(Request["id"]);
obj = db.XinWen.Where(m => m.Id == id).FirstOrDefault();
}
else
{
obj.Id = Guid.NewGuid();
db.XinWen.AddObject(obj);
}
obj.BiaoTi = values["BT"];
obj.NeiRong = values["NR"];
obj.ShiJian = DateTime.Now;
var pics = Request["filesHidden"].Split("#".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);
foreach (var pic in pics)
{
db.TuPian.Where(m => m.LuJing == pic).ToList().ForEach(m =>
{
m.FId = obj.Id;
});
}
db.SaveChanges();
db.Dispose();
return Redirect("/admin/news/");
}


文章修改,新增业务的cshtml代码

@model ddr.Models.XinWen
@{
ViewBag.Title = "德迪尔电器有限公司-后台管理-新闻";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<script type="text/javascript" src="/CONTENT/CK/ckeditor.js"></script>
<script type="text/javascript" src="/CONTENT/CK/adapters/jquery.js"></script>
<script>
var g_blnCheckUnload = false;
function BypassCheck() { g_blnCheckUnload = true; }
window.onbeforeunload = function () { if (g_blnCheckUnload) return ("确认离开当前页面吗?未保存的数据将会丢失!"); }
$(function () {
var config = {
height: 500
};
$('.ckeditor1').ckeditor(config);
var pics = '@ViewBag.Pics';
if(pics.length>0){
$("#filesHidden").val(pics);
setText();
}
});
function valChange(fn) {
var val = $("#filesHidden").val();
$("#filesHidden").val(val + "#" + fn);
var v = $(".ckeditor1").val();
$(".ckeditor1").val(v + "<img src='/content/wj/" + fn + "' style='border:0px;' />");
setText();
}
function setText() {
$("#files").empty();
var arr = $("#filesHidden").val().split('#');
var str = '';
for (var i = 0; i < arr.length; i++) {
if (arr[i].length > 0) {
str += "<div class=" + arr[i] + "><a href='/content/wj/" + arr[i] + "' target='_blank'>" + arr[i] + "</a>    ";
str += "<a href=\"javascript:delfile(\'" + arr[i] + "\');\">删除该图片</a></div>";
}
}
$("#files").append(str);
}
function delfile(p) {
g_blnCheckUnload = false;
$.getJSON("/file/delfile/?fn=" + p, function (data) {
if (data["flag"] == true) {
var val = $("#filesHidden").val();
$("#filesHidden").val(val.replace('#' + p, ""));
var v = $(".ckeditor1").val();
$(".ckeditor1").val(v.replace('<img src="/content/wj/' + p + '" style="border:0px;" />', ""));
setText();
}
});
}
</script>
<div style="margin-right: 60px; margin-left: 60px; text-align: left;">
<form action="/admin/addnew/?id=@Request["id"]" method="post">
<input type="text" name="BT" style="width: 100%;" value="@(Model == null ? "" : Model.BiaoTi)" /><br />
<div id="files">
</div>
<input type="hidden" name="filesHidden" id="filesHidden" />
<iframe src="/file/" style="height:30px; border:0px;" frameborder="0" width="100%"></iframe>
<textarea class="ckeditor1" name="NR">
@(Model == null ? "" : Model.NeiRong)
</textarea>
<div style="text-align: center;">
<input onclick="BypassCheck; return true;" type="submit" value="提交" style="width: 120px;" />
<input type="reset" value="重置" style="width: 120px;" />
</div>
</form>
</div>


图片上传IFRAME的C#代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
using ddr.Models;

namespace ddr.Controllers
{
public class FileController : Controller
{
//
// GET: /File/

public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult AddFile(HttpPostedFileBase wj)
{
string sn = string.Empty;
if (wj != null)
{
if (wj.ContentLength > 0)
{
sn = wj
.FileName
.Insert(wj.FileName.LastIndexOf('.'), "-"+DateTime.Now.ToString("yyyyMMddhhmmss"));
sn = Path.Combine(Server.MapPath("/Content/WJ"), sn);
wj.SaveAs(sn);

var db = new ddrDBEntities();
var obj = new TuPian();
obj.Id = Guid.NewGuid();
obj.LuJing = Path.GetFileName(sn);
db.TuPian.AddObject(obj);
db.SaveChanges();
db.Dispose();
}
}
return Redirect("/file/?fn=" + Path.GetFileName(sn));
}

public JsonResult DelFile()
{
var fn = Request["fn"];
if (!string.IsNullOrEmpty(fn))
{
var db = new ddrDBEntities();
var obj = db.TuPian.Where(m => m.LuJing == fn).FirstOrDefault();
db.TuPian.DeleteObject(obj);
db.SaveChanges();
db.Dispose();
fn = Path.Combine(Server.MapPath("/Content/WJ"), fn);
var fi = new FileInfo(fn);
fi.Delete();
}
var result = new JsonResult();
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
result.Data = new { flag = true };
return result;

}

}
}


图片上传IFRAME的cshtml代码

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>德迪尔电器</title>
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script>
$(function () {
var fn = '@(Request["fn"])';
if (fn.length > 0) {
parent.valChange(fn);
}
});
</script>
</head>
<body style="margin: 0px; padding: 0px; background: #e8e8e8; border: 0px;">
<form method="post" action="/file/AddFile/" enctype="multipart/form-data">
<input type="file" name="wj"  />
<input type="submit" value="上传" />
</form>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐