Question posted in
You can find the official documentation here.

Update List Model with Ajax ASP .NET MVC5 – Jquery ajax

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?

Tags:

2

Answers


  1. 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:
    enter image description here

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search