How to refresh a div content in ASP.NET MVC 4 without page refresh and without using javascript?

Question

Noob needs help) I have a filelist of the root folder and I want to make of it a kind of file explorer, but I don't want to refresh a page every time. Here's the code of a partial view I try to make refreshable:

<div class="createdb">
@{
    string x = null;
    string[] list = Directory.GetDirectories(HostingEnvironment.ApplicationPhysicalPath);
    foreach(var item in list)
    {
        x = item.Replace(HostingEnvironment.ApplicationPhysicalPath, "");
        <div class="item"><img src="~/Img/fld.png" class="icon"/>@x</div>  
    }  

    string[] list2 = Directory.GetFiles(HostingEnvironment.ApplicationPhysicalPath);
    foreach(var item in list2)
    {
        x = item.Replace(HostingEnvironment.ApplicationPhysicalPath, "");
        <a href="@Html.Action("Refresh");"><div class="item"><img src="~/Img/file.png" class="icon"/>@x</div></a>
    }
}
</div>

Controller ActionResult returns only View. I don't know how to link another ActionResult to an existing view, just refreshing it's content. Thank you

Answer 1

您肯定需要JavaScript或JQuery或AJAX调用才能获取此信息。因为它是在客户端（Web浏览器）完成的。

Answer 2

You need to understand that once the HTML is in the client's browser, it is "dead". Unless the client does something that load the same page again (with the same or new parameters in the query-string or form) or loads a new page, nothing can change the HTML in the browser.

That is unless you use some sort of client-side script, like javascript.

So if you want to avoid page loads, you should use javascript (using AJAX).

If you want to avoid javscript, you need page loads/reloads.

Answer 3

Thank you very much. I already understood that I can't avoid using js in this case. That's how I did it:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    $(document).on('click','.createdb a .item', function(e) {
        e.preventDefault();
        var link = $(this).text();
        var p = $('.hid').text();
        $.ajax({
            url: '@Url.Action("DBView")',
            type: 'post',
            cache: false,
            async: true,
            data: { id: link, path: p },
            success: function (result) {
                $('.mainarea').html(result);
            }
        });
    });

And controller looks like this:

[HttpPost]
        public PartialViewResult DBView(string id, string path)
        {
            FileManager FM = new FileManager();
            FM.Path = path;
            if (id != "...")
            {
                FM.Path =  path + id + "\\";
            }
            else
            {
                FM.Path = FM.Path.Remove(FM.Path.LastIndexOf("\\"), 1);
                FM.Path = FM.Path.Remove(FM.Path.LastIndexOf("\\") + 1, y - x - 1);
            }
            return PartialView("CreateDB", FM);
        }