Refresh table list using Ajax in Asp.Net Mvc

Question

I have a problem with a modal, after I create a new entry, my table list doesn't show me the last created row in the table (in my database it allready exists), it display's it only after I refresh the page.

I tried something but only worked the first time (from: Refresh table using AJAX in ASP.NET MVC).

Here is my controller code for it:

public ActionResult IndexEvent()
    {
        return View(db.tbl_Event.ToList());
    }

    [HttpGet]
    public ActionResult Add()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Add(BOL3.tbl_Event eve)
    {
        if(ModelState.IsValid)
        {
            db.tbl_Event.Add(eve);
            db.SaveChanges();
        }
        return IndexEvent();
    }

, here is the action button and modal:

<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#enquirypopup">Add</button>

<div id="enquirypopup" class="modal fade in" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content row">
            <div class="modal-header custom-modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Event</h4>
            </div>
            <div class="modal-body">
                <form id="myForm">

                   <div class="modal-body">
                        <div class="row form-group">
                            <div class="col-md-12">
                                <div class="input-group">
                                    <span class="input-group-addon"></span>
                                    <input type="text" class="form-control" name="Event" id="Event" placeholder="Event Name">
                                </div>
                            </div>
                        </div>     
                        <div class="row form-group">
                            <div class="col-md-12">
                                <div class="input-group">
                                    <span class="input-group-addon"></span>
                                    <input type="text" class="form-control" name="Start_Date" id="Start_Date">
                                </div>
                            </div>
                        </div>                        
                        <div class="row form-group">
                            <div class="col-md-12">
                                <div class="input-group">
                                    <span class="input-group-addon"></span>
                                    <input type="text" class="form-control" name="End_Date" id="End_Date">
                                </div>
                            </div>
                        </div>                        
                        <br />
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-success" id="btnSubmit">Save</button>
                        </div>
                </form>
            </div>
        </div>
    </div>
</div>

and here is the table and script part:

<script>
    $(document).ready(function () {
        $("#btnSubmit").click(function () {
            var myformdata = $("#myForm").serialize();

            $.ajax({
                type: "POST",
                url: "/Prog/Add",
                data: myformdata,
                success: function () {
                    $("#enquirypopup").modal("hide");
                    $("#tbl").load("/Prog/IndexEvent");
                    //$("#tbl").reload("/Prog/IndexEvent");
                }
            })

        })
    })
</script>

@model.....
<div class="table-responsive">
    <table class="table table-bordered table-striped" id="tbl">
        <thead>
            <tr>
                <th>Event Name</th>
                <th>Starting (Date and Time)</th>
                <th>Ending (Date and Time)</th>
                <th>All Day ?</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach(var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Event)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Start_Date)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.End_Date)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.All_Day)
                    </td>
                    <td style="align-content:center">
                        
                        <a href="@Url.Action("EditEvent", "Prog", new { id = item.ID})" class="editDialog">Edit</a> |                       
                        @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

I don't really know how exactly this modal's work, it's my first time using them so if you could help me out I really appriciate it. Thanks.

I used another method and it worked. For more info see this link: "stackoverflow.com/questions/43230009/…" — Jon A
– Jon A, Commented Apr 7, 2017 at 12:34

Zaheer Ul Hassan · Accepted Answer · 2017-04-05 12:01:17Z

0

Simple! Add location.reload() in success.

     $.ajax({
             type: "POST",
             url: "/Prog/Add",
             data: myformdata,
             success: function () {
             $("#enquirypopup").modal("hide");
             location.reload();
              }
            });

Hope Helps.

answered Apr 5, 2017 at 12:01

Zaheer Ul Hassan

7599 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jon A Over a year ago

It still doesn't work, but thank you for your answer.

Zaheer Ul Hassan Over a year ago

if you want to reload the current page then it works.

Jon A Over a year ago

What I'm aiming for is that when I submit the new inserted row from modal to be able to see it without refreshing the page. Thanks again.

Zaheer Ul Hassan Over a year ago

Update your controller method return type to JsonResult

Zaheer Ul Hassan Over a year ago

Debug your success method by adding alert("result");

Collectives™ on Stack Overflow

Refresh table list using Ajax in Asp.Net Mvc

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related