Refresh Grid.Mvc after update data

Question

I have such Grid Mvc:

    @helper CustomRendering(int id)
{
    @*<button class="btn btn-primary" onclick="location.href='@Url.Action("AcceptRequest", "TableRequest", new { id = id })'"> Accept</button>*@
    <button class="btn btn-primary" onclick="postAccept(@id)" id="@id"> Accept</button>
    <button class="btn btn-danger" onclick="setWindowId(@id)" id="@id">Decline</button>
}
@Html.Grid(Model).Columns(columns =>
                    {                                                
                        columns.Add(c => c.UserName).Titled("Name").Filterable(true);
                        columns.Add(c => c.DateStart).Titled("DateStart");
                        columns.Add(c => c.DateEnd).Titled("DateEnd");
                        columns.Add(c => c.Approved).Titled("Approved");
                        columns.Add(o => o.Id).Encoded(false).Sanitized(false)
                                    .Titled("Action")
                                    .RenderValueAs(o => CustomRendering(o.Id).ToHtmlString());                                           
                    }).WithPaging(10).Sortable(true)

And I have such js script:

var tempId;        
        function setWindowId(id) {
            $("#dialog").dialog();
            tempId = id;
        }       
        function postMessage() {        
            var message = $('textarea#commentForDecline').val();
            var obj = {};
            obj.mes = $('textarea#commentForDecline').val();
            obj.mes = message;
            obj.id = tempId;

            $.ajax({
                type: "POST",
                url: "/TableRequest/DeclineRequest",            
                data: {'message': obj.mes, 'id': obj.id},
                success: function (msg) {                    
                }
            });       
            $("#dialog").dialog('close');
            $('textarea#commentForDecline').val('');
        }

        function postAccept(id){
            $.ajax({
                type: "POST",
                url: "/TableRequest/AcceptRequest",
                data: {'id': id },
                success: function (msg) {
                }
            });
        }

As you can see this js functions I use for buttons, what you may see on block @helper. I just send two post ajax call into MVC actions. And I've got a problem: it's necessary to refresh page to see any updates. Is there is any way to refresh Grid MVC after DB update?

public virtual ActionResult AcceptRequest(int id)
        {           
            using(var _db = new ApplicationDbContext())
            {
                Shedule shedule = _db.Shedules.SingleOrDefault(x => x.Id == id);
                shedule.IsDirectorApproved = true;
                _db.SaveChanges();
            }
            return RedirectToAction("Index");
        }

        [HttpPost]
        public virtual ActionResult DeclineRequest(string message, int id)
        {
            using (var _db = new ApplicationDbContext())
            {
                Shedule shedule = _db.Shedules.SingleOrDefault(x => x.Id == id);
                shedule.IsDirectorApproved = false;
                shedule.Message = message;
                _db.SaveChanges();
            }
            return RedirectToAction(MVC.TableRequest.ActionNames.Index);
        }

Answer 1

Okay, so I managed to achieve this by the following method:

HTML:

Place your grid in a div container and inside a PartialView like this:

<div class="form-group" >
    @if (Model.myDataList != null)
    {
        <div id="myDataGrid">
            @Html.Partial("DisplayGridData", Model.myDataList);
        </div>                                                       
    }
</div>

Your DisplayGridData Partial View will look like:

@using GridMvc.Html

@model List<myProject.Models.MyGridData>

@Html.Grid(Model).Columns(column =>
 {
    column.Add(x => x.id).Titled("ID").Filterable(false);
    column.Add(x => x.name).Titled("Name").Filterable(false);
    column.Add(x => x.uniqueid).Titled("").Sanitized(false).Encoded(false).
    RenderValueAs(model => Html.Label("", "Delete", new { id = "btndelete",@class="btn btn-sm btn-success", onclick = "deleteContentFromDB(" + Convert.ToInt32(model.uniqueid) + ");" })
    .ToHtmlString()).Filterable(false). Sortable(false);
}).EmptyText("No data found").WithPaging(50).Sortable(false).Selectable(false)

Corresponding AJAX call:

function refreshGrid() {
    var selectedID = $('#mySelector').find(":selected").val();
    var param = { 'selectedID': selectedID };
    var url = "~/Home/GetSelectedIDDataGridRender?main_id=1";
    $.get(url, param, function (data) {
        $('#myDataGrid').html(data);
    });
}

And your Controller method will look like:

public ActionResult GetSelectedIDDataGridRender(int selectedID)
{
    List<MyGridData> myGridData = new List<MyGridData>();
    string AjaxCall = Convert.ToString(Request.QueryString["main_id"]);
    if (!string.IsNullOrEmpty(AjaxCall))
    {
        PropertyInfo isreadonly = typeof(System.Collections.Specialized.NameValueCollection).GetProperty("IsReadOnly", BindingFlags.Instance | BindingFlags.NonPublic);
        isreadonly.SetValue(this.Request.QueryString, false, null);
        this.Request.QueryString.Remove("main_id");

        dataaccess da= new dataaccess();
        myGridData = da.GetMyIDDataFromDB(selectedID);      
    }
    return PartialView("DisplayGridData", myGridData);
}

Hope this helps someone out.