Javascript ASP.NET MVC-刷新代码镜像编辑器onclick
我在部分视图中有一个codemirror编辑器,在主视图中有一个文件列表。单击文件名后,我想刷新编辑器。我尝试了StackOverflow和其他网站上提供的许多解决方案,但都没有效果,这是我第一次使用Javascript,所以我无法找出我做错了什么 这是我的代码: 控制器:Javascript ASP.NET MVC-刷新代码镜像编辑器onclick,javascript,jquery,razor,asp.net-mvc-5,Javascript,Jquery,Razor,Asp.net Mvc 5,我在部分视图中有一个codemirror编辑器,在主视图中有一个文件列表。单击文件名后,我想刷新编辑器。我尝试了StackOverflow和其他网站上提供的许多解决方案,但都没有效果,这是我第一次使用Javascript,所以我无法找出我做错了什么 这是我的代码: 控制器: public ActionResult Index() { StudentsCodes model = new StudentsCodes(); model.S
public ActionResult Index()
{
StudentsCodes model = new StudentsCodes();
model.Student = (Student)CurrentUser;
var user = UserManager.FindById(((Student)CurrentUser).InstructorID);
model.Instructor =(Instructor) user;
return View(model);
}
public PartialViewResult DevelopmentPartial (StudentsCodes path )
{
return PartialView(path);
}
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.js"></script>
<ul id="tree">
@foreach (var file in Directory.GetFiles(Server.MapPath("~/Content/" + Model.Student.UserName + "/CompilerProject/" + name)))
{
var filename = Path.GetFileName(file);
<li id="filelist" onclick="@(Model.path = "~/Content/" + Model.Student.UserName + "/CompilerProject/src/" + @filename)">
<span class="glyphicon glyphicon-file"></span>
@filename
/li>
}
<div id="partial">
@{
Html.RenderPartial("DevelopmentPartial",null);
}
</div>
<script>
$(document).ready(function () {
$("#filelist").click(function (e) {
@{Html.RenderAction("DevelopmentPartial", Model);
}
});
});
</script>
@using (Html.BeginForm())
{
var fileContents= "";
if (Model==null)
{
fileContents = "";
}
else
{
fileContents = System.IO.File.ReadAllText(Server.MapPath(Model.path));
}
@Html.TextArea("code", fileContents, new { id = "code" })
}
主视图:
public ActionResult Index()
{
StudentsCodes model = new StudentsCodes();
model.Student = (Student)CurrentUser;
var user = UserManager.FindById(((Student)CurrentUser).InstructorID);
model.Instructor =(Instructor) user;
return View(model);
}
public PartialViewResult DevelopmentPartial (StudentsCodes path )
{
return PartialView(path);
}
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.js"></script>
<ul id="tree">
@foreach (var file in Directory.GetFiles(Server.MapPath("~/Content/" + Model.Student.UserName + "/CompilerProject/" + name)))
{
var filename = Path.GetFileName(file);
<li id="filelist" onclick="@(Model.path = "~/Content/" + Model.Student.UserName + "/CompilerProject/src/" + @filename)">
<span class="glyphicon glyphicon-file"></span>
@filename
/li>
}
<div id="partial">
@{
Html.RenderPartial("DevelopmentPartial",null);
}
</div>
<script>
$(document).ready(function () {
$("#filelist").click(function (e) {
@{Html.RenderAction("DevelopmentPartial", Model);
}
});
});
</script>
@using (Html.BeginForm())
{
var fileContents= "";
if (Model==null)
{
fileContents = "";
}
else
{
fileContents = System.IO.File.ReadAllText(Server.MapPath(Model.path));
}
@Html.TextArea("code", fileContents, new { id = "code" })
}
我无法为列表元素分配ID,因为它们的编号在编译时是未知的,并且在用户添加或删除文件时会发生变化,这就是为什么提供的大多数解决方案都不起作用。这里的结果是3个编辑器重叠并显示最后一个文件的内容。和
项是不可单击的。我在代码中做错了什么
编辑:
按照以下方式更新脚本后:
<script>
$(document).ready(function() {
$(".filelist").on("click",function (e) {
$("#partial").load('DevelopmentPartial');
});
});
</script>
$(文档).ready(函数(){
$(“.filelist”)。在(“单击”上,函数(e){
$(“#部分”).load('DevelopmentPartial');
});
});
它刷新局部视图,但编辑器始终为空,并且模型始终为空。使用“onclick”更新模型是否错误?如果有人遇到同样的问题,我通过在列表中将id更改为class来解决,然后使用以下脚本:
<div id="partial">
@{
Html.RenderAction("DevelopmentPartial", new { path1 = Model.path});
}
</div>
<script>
$(document).ready(function () {
$('.filelist').on('click', function (e) {
alert('Im clicked on filePath = ' + $(this).attr('value'));
var filePath = $(this).attr('value'); //value is attribute set in Html
$('#partial').load('DevelopmentPartial', { path1: filePath });
});
});
</script>
其中modelSC是控制器中的全局变量