C# ASP.NET MVC - AJAX Post Method does not update the ModelView

Question

i am searching for the solution for hours now, but i can't find any.

In my C# Projekt i implement an Calendar in the Month View and via click on an arrow the previous month should displayed. That works, but only once. Because the View Model is not updated with Ajax.

-> First click on the Button, the Date changed -> Second click on the Button nothing changed

In the debug Mode i got the information, that the Model is updated for the Moment Ajax replaces the HTML-Code and after that the "old" information is in the Model.

Maybe i missed something in my Code or does it really not work? Here is my Code:

HomeController:

public ActionResult Index(string strdate)
    {
        DateTime date;

        if (strdate == null)
        {
            date = DateTime.Now;
        }
        else
        {
            date = DateTime.Parse(strdate);
        }

        var model = new AjaxView(date);

        return View(model);
    }

ModelView:

public class AjaxView
{
    public AjaxView(DateTime dateFnc)
    {
        Date = dateFnc;
    }

    public DateTime Date { get; set; }
}

The cshtml with the divs that should be replaced:

@using Ajax_Test.Models;
@model AjaxView

<div id="Date">
    @Model.Date
</div>
<p></p>
<button id="prev">Previous</button>

And at least the AJAX Script:

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#prev").click(function () {
            @{
                DateTime prvmonth = new DateTime(Model.Date.Year, Model.Date.Month - 1, 1);
             }
                var jsdate = "@prvmonth.ToString("yyyy-MM-dd")"
            $.ajax({
                cache: false,
                async: false,
                type: "POST",
                url: '@Url.Action("Index","Home")',
                data: JSON.stringify({ strdate: jsdate }),
                dataType: 'html',
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    $('#Date').html($('#Date', data).html());
                    },
                error: function (xhr, error) {
                        debugger;
                    }
            });
        });

    });
</script>

If anything is not clear or something ist missing, please let me know. Thanks!

Edit: i cleaned the code for better reading and understanding

Answer 1

It looks like you're getting your previous month from the model.

 @{
    DateTime prvmonth = new DateTime(Model.Date.Year, Model.Date.Month - 1, 1);
  }

So, from a quick look, it looks like you have a set date for the model, and then you're constantly asking it to subtract one month. But you're always asking it to subtract from the same date.

It might be worth it to have another variable that the stores the current month shown on the view. This could be a hidden input, or what not, and then subtract one month from that.

The other thing you could do is to POST to a different method, and then return JSON instead of HTML, and not change the model or view at all.

Answer 2

As mentioned in my comment, here the Code that works:

@using Ajax_Test.Models;
@model AjaxView

<div id="Date">
    @Model.Date

    <script> 
        AjaxThingshere 
    </script>
</div>

<p></p>
<button id="prev">Previous</button>