How to refresh a div without reloading the whole page-CodePudding

I have an ASP.Net Core MVC project and in it I implemented a DateTime, and I need that when I click on the button it reloads the div with the new date that I inserted, but without loading the entire page, just that div.

CodePudding user response：

I need that when I click on the button it reloads the div with the new date that I inserted, but without loading the entire page, just that div.

You need use AJAX to achieve your requirement.

Here is a simple demo about how to update the div without page reloading:

View

<div>
    <input type="datetime-local" id="MyDate" />
</div>

<input type="button" onclick="ChangeDatetime()" value="Change" />
@section Scripts
{
    <script>
        function ChangeDatetime()
        {
            $.ajax({
                url: "/Home/Update?MyDate="   $("#MyDate").val(),
                method:"Get",
                success:function(data){
                    $("#MyDate").val(data);
                }
            })
        }
    </script>
}

Controller

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    public string Update(DateTime MyDate)
    {
        MyDate = DateTime.Now;   //modify the datetime here
        //the browser only accepts yyyy-MM-ddThh:mm format for `datetime-local` type
        return MyDate.ToString("yyyy-MM-ddThh:mm");
    }
}