ASP.NET MVC 5- How can I post textarea value using @Html.ActionLink?

I have the following web page:

And this is part of the partial view code :

<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>@Html.ActionLink("New", "NewClass", "Development", null, new { @class = "modal-link" })</li>
                                        <li>@Html.ActionLink("Save","SaveClass",new { path2=Model.path})</li>
                                        <li>@Html.ActionLink("Delete", "DeleteFile")</li>


                                    </ul>
                                </li>
                                <li>@Html.ActionLink("Compile", "Compile", "Development")</li>
                                <li>@Html.ActionLink("Run", "Run", "Development")</li>
                            </ul>

Open in new window

                    @Html.TextAreaFor(m=>m.code, new { id = "code" })

Open in new window

I want to pass the value of the textarea to the controller at the "Save" actionlink. I don't want to use buttons for design purposes. I also need to pass the path of the file to write the text to it (since path is always lost when navigating between controller and views). I googled for the problem but the solutions provided either didn't work or I didn't understand them. Is there an easy way to do that?

I tried this:

                                        <li>@Html.ActionLink("Save","SaveClass",new { path2=Model.path,code="xxx"},new { id="save"})</li>

 <script>
       $("#save").click(function(evt) {
           var fakedUri = $("#save").attr("href");
           alert($('#code').val());
    var uri = fakedUri.replace("xxx", $("#code").val());
});
    </script>

Open in new window

but it throws: The requested content appears to be script and will not be served by the static file handler.

leen emadComputer engineerAsked: 2017-03-25

Who is Participating?

Experts Exchange Solution brought to you by

Enjoy your complimentary solution view.

Get this solution by purchasing an Individual license! Start your 7-day free trial.

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 10

Prakash SamariyaIT ProfessionalCommented: 2017-03-27

<li>@Html.ActionLink("Save","MySaveActionMethod","MyController",new { id="save"})</li>
Hope your action method has parameter in your controller (for e.g. below)
[HttpPost]

public  ActionResult  MySaveActionMethod(string codeValue){ 
...
}

Open in new window

Updated Script

<script>
       $("#save").click(function(evt) {
           var fakedUri = $("#save").attr("href");
           
           $.post( fakedUri , { codeValue: $("#code").val() } );
});
    </script>

Open in new window

but it throws: The requested content appears to be script and will not be served by the static file handler.

https://www.codeproject.com/Tips/882774/Fix-HTTP-Error-The-requested-content

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

leen emadComputer engineerAuthor Commented: 2017-03-27

Thank you! It now saves the correct value, but I couldn't get rid of the error. I only get it when I redirect to "Index" ActionMethod, but if I access it directly it works.

LVL 10

Prakash SamariyaIT ProfessionalCommented: 2017-03-27

but I couldn't get rid of the error. I only get it when I redirect to "Index" ActionMethod, but if I access it directly it works.

Have you tried resolution mentioned in link The requested content appears to be script...?

Could you show your code, which throws error (and also index method which is calling also) to check with?

leen emadComputer engineerAuthor Commented: 2017-03-28

Yes, I did. still didn't work!

This is my controller

 StudentsCodes modelSC = new StudentsCodes();
        MicroG4 m4 = new MicroG4();

        public ActionResult Index()
        {
            modelSC.Student = (Student)CurrentUser;
            var user = UserManager.FindById(((Student)CurrentUser).InstructorID);
            modelSC.Instructor =(Instructor) user;
            modelSC.path = "~/Content/" + CurrentUser.UserName + "/CompilerProject/src";
             return View(modelSC);
        }
 public PartialViewResult DevelopmentPartial(string path1)
        {
            modelSC.path = path1;
            modelSC.code = "";
            if (modelSC.path == null)
            {
                modelSC.code = "";
            }
            else
            {
                //var filename = Path.GetFileName("");
                try
                {
                   modelSC.code = System.IO.File.ReadAllText(Server.MapPath(modelSC.path));
                }
                catch (Exception e)
                {
                    modelSC.code = "";
                }
            }
            return PartialView(modelSC);

        }
 [HttpPost]
        [ValidateInput(false)]
        public ActionResult SaveClass(string path,string code)
        {
            modelSC.path = path;
            modelSC.code = code;
            System.IO.File.WriteAllText(Server.MapPath(modelSC.path), code);
            return RedirectToAction("Index");
        }

Open in new window

This is the index view:

@model application.Models.NewFolder1.StudentsCodes
@{
    ViewBag.Title = "Development";
    Layout = "~/Views/Shared/_Layout.cshtml";
  
}


<!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>
                @Model.Student.UserName
                <ul>
                    <li>
                        <span class="glyphicon glyphicon-folder-open"></span>
                        CompilerProject
                        <ul>
                            @{
                                var m = Directory.GetDirectories(Server.MapPath("~/Content/" + Model.Student.UserName + "/CompilerProject"));
                                foreach (var subdir in m)
                                {
                                    var name = Path.GetFileName(subdir);
                                    <li>
                                        <span class="glyphicon glyphicon-folder-open"></span>
                                        @name
                                        <ul id="tree">
                                            @foreach (var file in Directory.GetFiles(Server.MapPath("~/Content/" + Model.Student.UserName + "/CompilerProject/" + name)))
                                            {
                                                var filename = Path.GetFileName(file);

                                                <li class="filelist" value="@("~/Content/" + Model.Student.UserName + "/CompilerProject/src/" + filename)">
                                                    <span class="glyphicon glyphicon-file"></span>
                                                    @filename
                                                </li>
                                            }
                                        </ul>
                                    </li>
                                }
                            }
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    
        <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>

    </body>




</html>

Open in new window

And this is the partial view:

@model application.Models.NewFolder1.StudentsCodes
<!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>
    <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>


</head>
<body>
    
        @using (Html.BeginForm("SaveClass","Development"))
        {
            <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="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>@Html.ActionLink("New", "NewClass", "Development", null, new { @class = "modal-link" })</li>
                                        <li>@Html.ActionLink("Save","SaveClass","Development",null,new { id="save"})</li>
                                        <li>@Html.ActionLink("Delete", "DeleteFile")</li>


                                    </ul>
                                </li>
                                <li>@Html.ActionLink("Compile", "Compile", "Development")</li>
                                <li>@Html.ActionLink("Run", "Run", "Development")</li>
                            </ul>
                        </div>
                    </div>
                </div>
                    @Html.TextAreaFor(m=>m.code, new { id = "code" })
                @Html.HiddenFor(s => s.path)



            
            </div>

                    }
    

    <div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-content"></div>
    </div>

    <style>
        .modal-content {
         width: 600px !important;
         margin: 30px auto !important;
     }
    </style>
    <script>
        $(function(){

            $("#save").click(function(e){
                e.preventDefault();
                $(this).closest("form").submit();
            });

        });

    </script>
    
   
    <script>

        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
            lineNumbers: true,
            matchBrackets: true,
            mode: "text/x-java",
            theme: "cm-s-lesser-dark"
        });
    </script>

    <script type="text/javascript">
        $(function () {
            // Initialize numeric spinner input boxes
            //$(".numeric-spinner").spinedit();
            // Initialize modal dialog
            // attach modal-container bootstrap attributes to links with .modal-link class.
            // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
            $('body').on('click', '.modal-link', function (e) {
                e.preventDefault();
                $(this).attr('data-target', '#modal-container');
                $(this).attr('data-toggle', 'modal');
            });
            // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
            $('body').on('click', '.modal-close-btn', function () {
                $('#modal-container').modal('hide');
            });
            //clear modal cache, so that new content can be loaded
            $('#modal-container').on('hidden.bs.modal', function () {
                $(this).removeData('bs.modal');
            });
            $('#CancelModal').on('click', function () {
                return false;
            });
        });
    </script>

    
</body>

</html>

Open in new window

leen emadComputer engineerAuthor Commented: 2017-03-28

I didn't do anything, just restarted the laptop and the error is gone!! BUT, it's not showing the contents of the file onclick anymore! especially when redirecting to "index" from another webpage. But if I access it directly, it works.

LVL 10

Prakash SamariyaIT ProfessionalCommented: 2017-03-29

It seems that StudentCodes and MicroG4 objects initialized only once!
Put StudentCodes and MicroG4 objects initialization in Controller's constructor or in every action method!
Like below

public YOURCONTROLLER_CONSTRUCTOR()
{
            StudentsCodes modelSC = new StudentsCodes();
            MicroG4 m4 = new MicroG4();
}

        public ActionResult Index()
        {
           // IF you do have initialised in constructor, use below code
           // StudentsCodes modelSC = new StudentsCodes();
           // MicroG4 m4 = new MicroG4();

            modelSC.Student = (Student)CurrentUser;
            var user = UserManager.FindById(((Student)CurrentUser).InstructorID);
            modelSC.Instructor =(Instructor) user;
            modelSC.path = "~/Content/" + CurrentUser.UserName + "/CompilerProject/src";
             return View(modelSC);
        }

Open in new window

leen emadComputer engineerAuthor Commented: 2017-03-29

I tried but it still doesn't work! Now when I click on a file, it passes the correct path to the script, but it doesn't even call the action method.
But it only works if I access the "Development Index" directly. Why would the same code execute correctly if the "Index" is accessed directly, but wouldn't if I redirect to it or access it from another webpage?

I'm not sure if this is related, but the dropdown "file" menu in the image above doesn't always work. I mean, at the beginning it works, then if I click on a file and the partial view reloads, it doesn't (it doesn't show the list <New, Save, Delete>). But if I click on a file again it works, and so on...

leen emadComputer engineerAuthor Commented: 2017-03-29

I sloved it by updating the script that loads the partial view:

  <script type="text/javascript">
         $(document).ready(function () {
             $('.filelist').on('click', function (e) {
                 e.preventDefault();
                 alert('Im clicked on filePath = ' + $(this).attr('value'));
                 var filePath = $(this).attr('value');    //value is attribute set in Html
                 $('#partial').load('@Url.Action("DevelopmentPartial", "Development")', { path1: filePath });
             });
         });
    </script>

Open in new window

The partial view reloads correctly again, but I couldn't solve the problem with the "File" dropdown menu.

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

.NET MVC

From novice to tech pro — start learning today.

Web Development

By:

Gregor Dzierzon

Angular Fundamentals

i

Members can enroll in this course at no extra cost.

50 lessons
Web Development

By:

Adam Barney

Bootstrap 3.1: Fundamentals

i

Members can enroll in this course at no extra cost.

70 lessons
Web Development

By:

Alex Garrett

Fundamentals of Javascript

i

Members can enroll in this course at no extra cost.

33 lessons
Programming

By:

Brett Hooper

JavaScript Best Practices

i

Members can enroll in this course at no extra cost.

12 lessons
Business Management

By:

Martin VanDerSchouw

Certification
Certified Associate in Project Management (CAPM)® Exam Prep

i

Members can enroll in this course at no extra cost.

470 lessons
Microsoft Applications

By:

Patrick Loner

Certification
Certification: MOS Microsoft Office Specialist - Outlook 2016 Par…

i

Members can enroll in this course at no extra cost.

175 lessons
Virtualization

By:

Phil Phillips

FreeBSD Jails

i

Members can enroll in this course at no extra cost.

3 lessons
Microsoft Applications

By:

Mike Benkovich

Microsoft Azure 2017

i

Members can enroll in this course at no extra cost.

55 lessons
Server Hardware

By:

Ken Mayer

70-646 R3: Windows Server 2008 Administration

i

Members can enroll in this course at no extra cost.

281 lessons
Microsoft Applications

By:

Sandra Batakis

Microsoft Office Project 2007 Level 2

i

Members can enroll in this course at no extra cost.

81 lessons