繁体   English   中英

ASP.NET MVC-刷新CodeMirror编辑器onclick

[英]ASP.NET MVC -Refresh CodeMirror editor onclick

我在局部视图中有一个Codemirror编辑器,在主视图中有一个文件列表。 单击文件名后,我想刷新编辑器。 我尝试了StackOverflow和其他网站上提供的许多解决方案,但没有任何效果,这是我第一次使用Javascript,因此我无法弄清楚我在做什么错。

这是我的代码:

控制器:

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个编辑器重叠并显示最后一个文件的内容。 并且<li>项不可单击。 我的代码在做什么错?

编辑 :按如下所示更新脚本后:

<script>
        $(document).ready(function() {
            $(".filelist").on("click",function (e) {
                $("#partial").load('DevelopmentPartial');

            });
        });
    </script>

它刷新了部分视图,但编辑器始终为空,而Model始终为null 使用“ 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>

和控制器:

 public PartialViewResult DevelopmentPartial(string path1)
    {
        modelSC.path = path1;
        return PartialView(modelSC);

    }

其中modelSC是控制器中的全局变量。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM