public ActionResult Index()
{
StudentsCodes model = new StudentsCodes();
model.Student = (Student)CurrentUser;
var user = UserManager.FindById(((Student)CurrentUser).InstructorID);
model.Instructor =(Instructor) user;
model.path = "~/Content/" + CurrentUser.UserName + "/CompilerProject/src";
return View(model);
}
public PartialViewResult DevelopmentPartial(StudentsCodes path)
{
var x = path.path;
return PartialView(path);
}
@foreach (var file in Directory.GetFiles(Server.MapPath("~/Content/" + Model.Student.UserName + "/CompilerProject/" + name)))
{
var filename = Path.GetFileName(file);
<li class="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", new application.Models.NewFolder1.StudentsCodes
{
Student = Model.Student,
Instructor=Model.Instructor,
code=Model.code,
path=Model.path
});
}
</div>
<!--
-->
<script>
$(document).ready(function () {
$(".filelist").on("click",function (e) {
$("#partial").load('DevelopmentPartial');
});
});
</script>
</div>
@using (Html.BeginForm())
{
var fileContents = "";
if (Model == null || Model.path==null)
{
fileContents = "";
}
else
{
//var filename = Path.GetFileName("");
try
{
fileContents = System.IO.File.ReadAllText(Server.MapPath(Model.path));
}
catch(Exception e)
{
fileContents = "";
}
}
@Html.TextArea("code", fileContents, new { id = "code" })
}
</div>
.load
it always becomes non-clickable.
it always becomes non-clickable.It is not true! You are just loading another page's content to particular DIV, so if event is written for separate element, then it will always works!
var filePath = (this).value;Did your controller gets the path in back-end using?
$("#partial").load('DevelopmentParti al',{path: filePath});
{path: filePath}
path is Model.path? or the value to be passed to the controller?
path is Model.path?No, it a variable used in controller method
<li class="filelist" value="@(Model.path = "~/Content/" + Model.Student.UserName + "/CompilerProject/src/" + filename)")" >
And this is how it looks in the browser: <li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\alaa.java" >
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<meta http-equiv="Access-Control-Allow-Origin" content="*"/>
</head><body>
<h1>Test class value</h1>
<ul>
<li class='filelist' value="1">1 item</li>
<li class='filelist' value="2">2 item</li>
<li class='filelist' value="3">3 item</li>
</ul>
<div id="checkValue">Your clicked Item will display here!</div>
<div id="partial"></div>
<script>
$(document).ready(function () {
$(".filelist").on("click",function (e) {
alert('Im clicked on filePath = '+(this).value);
var filePath = (this).value; //value is attribute set in Html
$("#partial").text('You Clicked on '+filePath+' item!\tIt will load in a moment!');
$("#partial").load('DevelopmentPartial',{path: filePath});
});
});
</script>
</body>
</html>
In above code I used alert() to be display when any LI tag is clicked. This alert will show the selected LI tag's value.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<t
itle>Development</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">CPE543 project</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/Development">Development</a></li>
<li><a href="/Development/Micro">Micro.g4</a></li>
<li><a href="/Home/Test">Test</a></li>
<li><a href="/Home/Submit">Submit</a></li>
<li><a href="/Account/Logout">Logout</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<br/>
<br/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="∼/Content/bootstrap.css" rel="stylesheet" />
<link href="∼/Content/bootstrap-theme.css" rel="stylesheet" />
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript" src="/Scripts/jquery-3.1.1.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse " style="left:0; width:300px;bottom:3px; position:fixed; top:50px; color:#4e4a4a; font:bold;">
<ul class="nav nav-pills nav-stacked">
<li>
<span class="glyphicon glyphicon-folder-open"></span>
Auy00114
<ul>
<li>
<span class="glyphicon glyphicon-folder-open"></span>
CompilerProject
<ul>
<li>
<span class="glyphicon glyphicon-folder-open"></span>
external libraries
<ul id="tree">
</ul>
</li>
<li>
<span class="glyphicon glyphicon-folder-open"></span>
src
<ul id="tree">
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\alaa.java">
<span class="glyphicon glyphicon-file"></span>
alaa.java
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\Driver.java">
<span class="glyphicon glyphicon-file"></span>
Driver.java
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\Instruction.java">
<span class="glyphicon glyphicon-file"></span>
Instruction.java
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\Label.java">
<span class="glyphicon glyphicon-file"></span>
Label.java
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\Micro.tokens">
<span class="glyphicon glyphicon-file"></span>
Micro.tokens
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\MicroBaseVisitor.java">
<span class="glyphicon glyphicon-file"></span>
MicroBaseVisitor.java
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\MicroLexer.java">
<span class="glyphicon glyphicon-file"></span>
MicroLexer.java
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\MicroLexer.tokens">
<span class="glyphicon glyphicon-file"></span>
MicroLexer.tokens
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\MicroParser.java">
<span class="glyphicon glyphicon-file"></span>
MicroParser.java
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\MicroVisitor.java">
<span class="glyphicon glyphicon-file"></span>
MicroVisitor.java
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\MyVisit.java">
<span class="glyphicon glyphicon-file"></span>
MyVisit.java
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\new.java">
<span class="glyphicon glyphicon-file"></span>
new.java
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\Scope.java">
<span class="glyphicon glyphicon-file"></span>
Scope.java
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\SubScope.java">
<span class="glyphicon glyphicon-file"></span>
SubScope.java
</li>
<li class="filelist" value="D:\cloud\asp\application\application\Content\Auy00114\CompilerProject\src\Variables.java">
<span class="glyphicon glyphicon-file"></span>
Variables.java
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="partial">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="/Scripts/codeMirror-2.37/lib/codemirror.js"></script>
<script src="/Scripts/codeMirror-2.37/mode/clike/clike.js" type="text/javascript"></script>
<link href="/Scripts/codeMirror-2.37/lib/codemirror.css" rel="stylesheet" type="text/css" />
<link href="/Scripts/codeMirror-2.37/theme/lesser-dark.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<link href="∼/Content/bootstrap.min.css" rel="stylesheet" />
<script src="/Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="CodeMirror cm-s-lesser-dark cm-error cm-bracket" style="position:absolute;border:solid;top:150px;left:450px;width:700px">
<div class="navbar navbar-inverse" style="border:none">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
File <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/Development/CreateNewFile">New</a></li>
<li><a href="/Development/UpdateFile">Save</a></li>
<li><a href="/Development/DeleteFile?VirtualPath=~%2FContent%2FAuy00114%2FCompilerProject%2Fsrc">Delete</a></li>
</ul>
</li>
<li><a href="/Development/Compile">Compile</a></li>
<li><a href="/Development/Run">Run</a></li>
</ul>
</div>
</div>
</div>
<form action="/Development/Index" method="post"><textarea cols="20" id="code" name="code" rows="2">
</textarea></form>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-java",
theme: "cm-s-lesser-dark"
});
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"475cf23b349f4d82928f04112d33521f"}
</script>
<script type="text/javascript" src="http://localhost:50070/efbd8f69ba88447fb1b0d01443973ec1/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
</div>
<script>
$(document).ready(function () {
$(".filelist").on("click", function (e) {
alert('Im clicked on filePath = ' + (this).value);
var filePath = (this).value; //value is attribute set in Html
$("#partial").load('DevelopmentPartial', { path: filePath });
});
});
</script>
</body>
</html>
<!--<hr />-->
</div>
<script src="/Scripts/jquery-3.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>
<script>
$(".filelist").click(function() {
var filepath = $(".filelist").attr("value");
alert(filepath);
$("#partial").load("DevelopmentPartial", { path: filepath });
});
</script>
Now it passes the path to the script, but not to the controller .<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', { path: filePath });
});
});
</script>
Open in new window
Change in HTML!Open in new window
You have to pass selected file path to it to work it out!Open in new window
Hope this will work!