How to update partialview on ajax call

Question

We are having this situation where we stuck in ajax:

This is how we use partial from our view:

<div class="MyCheck check-come" id="checklist">
                @if (Model.CurToDo.TrnToDoList != null)
                {<ul>
                    @foreach (var item in Model.CurToDo.TrnToDoList)
                    {
                        <li>@Html.Partial("ToDoChecks", item)</li>
                    }
                </ul>
                }
            </div>

And it is being called using ajax like this:

$("#CurToDo_ToDoTitle").blur(function () {
                    var formdata = new FormData($('#form0').get(0)); // serialize the form
                    formdata.append('ButtonType', 'Save'); // add additional properties
                    $.ajax({
                        url: "/Tasktd/Postit",
                        type: "POST",
                        data: formdata,
                        dataType: "json",
                        processData: false,
                        contentType: false
                    }).success(function (model) {
                        $("#CurToDo_ToDoId").val(model.CurToDo.ToDoId);
                        $("#CurToDo_ToDoTitle").val(model.CurToDo.ToDoTitle);
                        $("#CurToDo_ToDoDesc").val(model.CurToDo.ToDoDesc);
                        $(".panel-header").addClass("show");
                        //$(".check-come").addClass("show");
                        $("#checklist li").html(model);
                        $(".MyCheck").show();
                    });
                });

We would like to have this partial view active as soon as the tasktd is created like as shown in above code of jquery. But it do nothing. At the other end we revisit the page with the same created id as querystring, it loads the partial view.

We just want to show the partial view as soon as data is saved for main view.

And the rendered snippet is this:

<div class="MyCheck check-come" id="checklist">
            </div>

Note, there is no html generated within it.

Controller:

public ActionResult Index(int tdid = 0)
        {
            ToDoList tdl = new ToDoList();
            ToDo t = new ToDo ();
           // ToDoTrn ttrn = new ToDoTrn();
            List<ToDo> tds = ToDo.Load();
            tdl.ToDos=tds;
            UserView u = new UserView();
            t.CreatedBy = User.Identity.GetUserId();
            u.UserId = User.Identity.GetUserId();
            u.UserName = User.Identity.Name;
           // tdl.tditems.CreatedBy = Convert.ToInt32(userID);
            if (tdid != 0)
            {                
                t = t.LoadToDo(tdid);
                tdl.CurToDo=t;
                ToDoTrn trn = new ToDoTrn(tdid);
                List<ToDoTrn> tlist = new List<ToDoTrn>();
                tlist.Add(trn);
                tdl.CurToDo.TrnToDoList = tlist;
                //tdl.CurToDoTrn = ttrn;
                tdl.UserModel = u;
               // t.UserModel = u;
            }
            else
            {
                tdl.CurToDo=t;
               // tdl.CurToDoTrn = ttrn;
                tdl.UserModel = u;
               // t.UserModel = u;
            }
            return View(tdl);
        }

Saving Action

public async Task<ActionResult> Postit(ToDoList td, string ButtonType)
        {
            if (ButtonType == "Delete")
            {
                td.CurToDo.Delete();
                ToDo tt = new ToDo();
                td.CurToDo = tt;
                return Json(new { redirectUrl = Url.Action("Index", "Tasktd"), isRedirect = true });
            }
            else if (ButtonType == "Prioritize")
            {
                td.CurToDo.Prioritize=td.CurToDo.TogglePrioritize();
            }
            else if (ButtonType == "Save")
            {
                var errors = ModelState.Values.SelectMany(v => v.Errors);
                ModelState.Remove("ToDoId");
                ModelState.Remove("ToDoTrnId");
                if (ModelState.IsValid)
                {
                    var t = await td.CurToDo.Save();
                    if (td.CurToDo.TrnToDoList==null)
                    {
                        try
                        {
                            ToDoTrn trn = new ToDoTrn(td.CurToDo.ToDoId);
                            List <ToDoTrn> tlist= new List<ToDoTrn>();
                            tlist.Add(trn);
                            td.CurToDo.TrnToDoList = tlist;
                        }
                        catch(Exception ex)
                        {
                        }

                    }
                   return Json(td, JsonRequestBehavior.AllowGet);
                }
            }
            else if (ButtonType == "CheckSave")
            {
                var errors = ModelState.Values.SelectMany(v => v.Errors);
               // ModelState.Remove("ToDoId");
                ModelState.Remove("ToDoTrnId");
                if (ModelState.IsValid)
                {
                    //td.CurToDoTrn.ToDoId = td.CurToDo.ToDoId;
                    //var t = await td.CurToDoTrn.ToDoTrnSave(td.CurToDoTrn);
                    return Json(td, JsonRequestBehavior.AllowGet);
                }
            }
            return Json("Oops! Please enter the required values");
        }

Answer 1

Just use a normal ActionResult with an [HttpPost] , initially you can use renderaction in Razer instead of partial. Then just do a normal AJAX call and use $("#").html(retVal);