CODEWITHSUNDEEP
jqueryasp.net-core
SharkyShark
SharkyShark

Reputation: 380

ASP NET MVC CORE - refresh partial view every X seconds

I would like to create view with 2 partial views: first is whole conversation, and the second is form which allow to send new message

the first view should refresh every X seconds (lets say 5 seconds) but in this time user should can write a message in < textarea >

In controller (Messages) i have following methods:

   [HttpGet]
        public ViewResult Index()
        {
            var vm = _manager.GetAllConversations();
            return View(vm);
        }


        [HttpGet]
        public ViewResult Details(int speakerId)
        {
            _speakerId = speakerId;
            var vm = _manager.GetConversation(_speakerId);

            return View(vm);
        }


        [HttpPost]
    public IActionResult SendMessage(SendMessageViewModel vm)
    {
        _manager.SendMessage(vm.SpeakerId, vm.Content);
        return RedirectToAction("Details", vm.SpeakerId);
    }

and i have following views Details:

<div class="col-md-6" id="conversationDiv">
    <script type="text/javascript">
        setInterval("$('#conversationDiv').load('Messages/Details/1')", 2000);
    </script>


    @foreach (var speak in Model)
    {

                <div>@speak.SendDate @speak.SenderName</div>
                <div>@speak.Message</div>
                <hr />
    }

</div>

<div>
    @{
        await Html.RenderPartialAsync("SendMessage",
            new RandevouMVC.ViewModels.Messages.SendMessageViewModel());
    }
</div>

and the partial view SendMessage:

<form asp-controller="Messages" asp-action="SendMessage" method="post">

    <textarea asp-for="Content" class="form-control" rows="4" placeholder="message content...">
    </textarea>
    <button type="submit" class="btn btn-primary">Send</button>
</form>

but JQuery refresh script doesn't work...

in Shared/_Layout.cshtml i have :

 <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>

but the jquery try to load not 

localhost:port/messages/details/1

but: 

localhost:port/messages/details/1/~/messages/details/1

Upvotes: 0

Views: 1326

Answers (1)

Reinder Wit
Reinder Wit

Reputation: 6615

change 

setInterval("$('#conversationDiv').load('Messages/Details/1')", 2000);

into 

setInterval("$('#conversationDiv').load('/Messages/Details/1')", 2000);

with a slash in front to make sure the URL is loaded from the root of the site.

Upvotes: 1

Related Questions