如何更新 ajax 调用的局部视图

Posted 2023-02-26

【中文标题】如何更新 ajax 调用的局部视图

【英文标题】：How to update partialview on ajax call

【发布时间】：2015-07-08 05:33:50

【问题描述】：

我们遇到了卡在 ajax 中的这种情况：

从我们的角度来看，这就是我们使用 partial 的方式：

<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>

它是这样使用 ajax 调用的：

$("#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();
                    );
                );

我们希望在创建 tasktd 后立即激活此部分视图，如上面的 jquery 代码所示。但它什么也没做。在另一端，我们使用与查询字符串相同的创建 id 重新访问页面，它会加载部分视图。

我们只想在为主视图保存数据后立即显示部分视图。

渲染出来的sn-p是这样的：

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

注意，里面没有生成html。

控制器：

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);
        

保存动作

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");
        

【问题讨论】：

你能显示渲染的 html 吗？可能是选择器问题

@teovankot 使用呈现的 html 编辑了问题。

我猜你的问题是Model.CurToDo.TrnToDoList 是null =)

是的，在第一次加载时它为空，因此它不会进入循环，但是当保存失去焦点的主视图时，此时它不为空，但我们也无法绑定一段代码。我们正在获取控制器以清楚地了解情况。

@teovankot 我们已经编辑了问题。

【参考方案1】：

只需使用普通的ActionResult 和[HttpPost]，最初您可以在Razer 中使用renderaction 而不是部分使用。然后只需进行正常的 AJAX 调用并使用$("#").html(retVal);