Update List Model with Ajax ASP .NET MVC5

Question

Can somebody give me a hint how to pass a list from the controller to Model list in view page after call the Action Result whit ajax in page. (Meaning update current list model with ajax call back result)?

This is my default load view page code:

@model List<ChargeSystem.Models.Message>
@foreach (var item in Model)
    {
        <div class="container1">
                <p>@item.Msg</p>
                <span class="time-right">@item.MsgDate</span>
            </div>
    }

</div>
<div class="divContinMsg">
    <input type="text" id="txtMsg" name="txtMsg" />
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#txtMsg").keyup(function (e) {
            if (e.keyCode == 13) {
                $.ajax(
                    {
                        url: '/User/ajaxContactAdmin?msg=' + $("#txtMsg").val(),
                        type: 'Post',
                        data: "",
                        contentType: false,
                        success: function (result) {
                        //What can i do????
                        },
                        error: function () {
                            alert("error");
                        }
                    })
            };
        });
    });
</script>

This is the Ajax call action result:

 public ActionResult ajaxContactAdmin(string msg)
        {
            var result = new { model = messageRepository.Select().ToList()};
            return Json(result, JsonRequestBehavior.AllowGet);
        }

So, How can i refresh the model after ajax call back?

what does result has in it ? Add that as well .

Swati
– Swati

2020-08-11 03:51:40 +00:00
Commented Aug 11, 2020 at 3:51 — Swati
– Swati, Commented Aug 11, 2020 at 3:51

Vince · Accepted Answer · 2020-08-11 07:15:48Z

So what you would do is append the result to the existing result set.

Firstly I would add a container for easier reference, secondly you would add the item to the container:

@model List<ChargeSystem.Models.Message>
<div id="listContainer">
  @foreach (var item in Model)
    {
        <div class="container1">
                <p>@item.Msg</p>
                <span class="time-right">@item.MsgDate</span>
            </div>
    }
  </div>
</div>
<div class="divContinMsg">
    <input type="text" id="txtMsg" name="txtMsg" />
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#txtMsg").keyup(function (e) {
            if (e.keyCode == 13) {
                $.ajax(
                    {
                        url: '/User/ajaxContactAdmin?msg=' + $("#txtMsg").val(),
                        type: 'Post',
                        data: "",
                        contentType: false,
                        success: function (result) {
                         $('#listContainer').append('<div class="container1">'+
                             '<p>' + result.Msg + '</p>'+
                             '<span class="time-right">' + result.MsgDate +'</span>'+
                             '</div>');
                        },
                        error: function () {
                            alert("error");
                        }
                    })
            };
        });
    });
</script>

Yiyi You · Accepted Answer · 2020-08-11 05:53:56Z

0

It looks like you want to enter information in your text box and save and update it in the view. I think you can do this.

Here is an example:

Your Controller:

public IActionResult GetUser ()
        {
            var messages = context.Messages.ToList();
            return View(messages);
        } 
        [HttpPost]
        public IActionResult ajaxContactAdmin(string msg)
        {
            var message = new Message
            {
                Msg = msg,
                MsgDate = DateTime.Now
            };
            context.Add(message);
            context.SaveChanges();
            return Json(message);

        }

Js in your View:

@section scripts{ 
    <script>
        $(document).ready(function () {
            $("#txtMsg").keyup(function (e) {
                if (e.keyCode == 13) {
                    var msg = document.getElementById("txtMsg").value
                    $.ajax(
                        {
                            url: '/Home/ajaxContactAdmin?msg=' + $("#txtMsg").val(),
                            type: 'Post',
                            data: { "msg": msg},
                            contentType: false,
                            success: function (message)
                            {
                                console.log(message);
                                window.location.reload();
                            },
                            error: function () {
                                alert("error");
                            }
                        })
                };
            });
        });
    </script>
}

Result display:

answered Aug 11, 2020 at 5:53

Yiyi You

18.4k1 gold badge19 silver badges31 bronze badges

2 Comments

Vince Over a year ago

You should no be doing reload on success

Aram Over a year ago

Thank you dear, but the location.reload(); is not real time change. its look like server side responded.

Collectives™ on Stack Overflow

Update List Model with Ajax ASP .NET MVC5

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related