View内容:
-----------------------------------------------------------------------------------------------------------
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
//同时解决了这个兼容性问题,因为火狐和iE的内核不同,火狐不用ie中的window.event事件,而是有个参数e
$(function () {
var i = 0;
$("#btn").click(function () {
i++;
$("#content").append($("<img src=\"/Images/iconpng.png\" id=\"icon" + i + "\"+\"></img>"));
$("#icon" + i + "").css({ "width": "20px", "height": "20px", "position": "absolute" });
$("#content").mousemove(function () {
if (arguments.length > 0) {
//非ie浏览器下的
var x1 = arguments[0].clientX;
var y1 = arguments[0].clientY;
}
else {
//ie浏览器下的
var x1 = window.event.clientX;
var y1 = window.event.clientY;
}
$("#icon" + i + "").css({ "left": x1 - 10, "top": y1 - $("#icon" + i + "").height() });
$("#btn").val(x1 + ";" + y1);
}).click(function () {
$("#content").unbind();
$("#formDiv").css({ "display": "block", "position": "absolute", "left": $("#icon" + i + "").position().left + $("#icon" + i + "").width(), "top": $("#icon" + i + "").position().top + $("#icon" + i + "").height() });
$("#x").val($("#icon" + i + "").position().left);
$("#y").val($("#icon" + i + "").position().top);
});
$("#save").click(function () {
$.post("/Image/AddMark", { x: $("#x").val(), y: $("#y").val(), MarkName: $("#name").val(), MarkRemark: $("#remark").val() }, function (msg) {
$("#formDiv").css("display", "none");
$("#name").val("");
$("#remark").val("");
});
});
});
});
</script>
</head>
<body>
<div>
<input type="button" id="btn" value="标记" />
<div id="content" style="width: 1024px; height: 682px; background-image: url(/Images/aa.jpg);">
<div style="width: 300px; height: 100px; border: 1px solid red; display: none" id="formDiv">
<input type="hidden" name="x" id="x" />
<input type="hidden" name="y" id="y" />
名称:<input type="text" id="name" name="MarkName"><br />
备注:<input type="text" id="remark" name="MarkRemark" style="width: 200px; height: 50px;" /><br />
<input type="button" id="save" value="保存" />
</div>
</div>
</div>
</body>
</html>
@*<script id="addMark" type="text/template">
<form action="/Image/AddMark/" method="post" >
<input type="hidden" name="x" id="x" value="[UserImg]" />
<input type="hidden" name="y" id="y" />
名称:<input type="text" id="name" name="MarkName"><br/>
备注:<input type="text" name="MarkRemark" style="width:200px; height:50px;" /><br/>
<input type="submit" οnclick=" return sub(this)" value="保存" />
</form>
</script>*@
--------------------------------------------------------------------------------------
控制器部分:
[HttpPost]
public ActionResult AddMark()
{
Mark_Info mark = new Mark_Info();
mark.MarkName = Request.Form["MarkName"];
mark.MarkRemark = Request.Form["MarkRemark"];
mark.MarkX = Convert.ToInt32(Request.Form["x"]);
mark.MarkY = Convert.ToInt32(Request.Form["y"]);
mark.ImageId = 1;
if (Mark_InfoBLL.AddMark(mark) > 0)
{
return Content("ok");
}
else
{
return Content("no");
}
}