【问题标题】:Partial view updating another partial view issues部分视图更新另一个部分视图问题
【发布时间】:2016-11-03 12:13:34
【问题描述】:

我有一个包含学生列表的页面。呈现列表的局部视图称为“StudentManager”。我在模态中用于创建新学生的局部视图称为“NewStudent”。

这个控制器代码有几个问题。出于某种原因,在我在“NewStudent”部分视图上按下提交后,每次刷新页面时都会有一个新学生在那里,而我没有进入并按下提交......这是一个问题。

另外,我在堆栈上搜索了类似的主题,我似乎无法理解为什么 return PartialView("StudentManager",db.Students.ToList());不会自动刷新我的“StudentManager”视图。 这段代码应该在一个局部视图中给我一个列表,另一个局部视图应该让我创建一个新的列表项,然后告诉列表局部视图进行更新。

控制器:

public ViewResult Index()
    {
            return View();
    }
public ActionResult StudentManager()
    {
        return PartialView(db.Students.ToList());
    }
public ActionResult NewStudent()
    {
    return PartialView();
    }
//
// POST: 
[HttpPost]
public ActionResult NewStudent(Student student)
{
    if (ModelState.IsValid)
    {
        db.Students.Add(student);
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return PartialView();
}

Index.cshtml:

@Html.Action("StudentManager", "StudentController")
<div class="modal modal-wide fade" id="myModal4" role="dialog">
    <div class="modal-dialog">
        @Html.Action("NewStudent", "StudentController")
    </div>
</div>

这是“NewStudent.cshtml”视图:

@model GunneryTracker.Models.Student
    <fieldset>
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <center>
                    <h4 class="modal-title">New Student</h4>
                </center>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="clearfix"></div>
                    <div class="x_content">
                        <br />
                        <form class="form-horizontal form-label-left" >
                            <div class="form-group">
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <label class="control-label col-md-2 col-sm-2 col-xs-12" style="margin-right:10px">Course</label>
                                    <div class="col-md-3  col-sm-3 col-xs-12">
                                        @Html.DropDownList("CourseID", null, "-- Select Course --", htmlAttributes: new { @class = "form-control" })
                                        @Html.ValidationMessageFor(model => model.CourseID, "", new { @class = "text-danger" })
                                    </div>
                                    <label class="control-label col-md-2 col-sm-2 col-xs-12" style="margin-right:10px">Location</label>
                                    <div class="col-md-3 col-sm-3 col-xs-12">
                                        @Html.DropDownList("LocationID", null, "-- Select Location--", htmlAttributes: new { @class = "form-control" })
                                        @Html.ValidationMessageFor(model => model.LocationID, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                                <div class="editor-label">
            @Html.LabelFor(model => model.FName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FName)
            @Html.ValidationMessageFor(model => model.FName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.LName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LName)
            @Html.ValidationMessageFor(model => model.LName)
        </div>
                            </div>
                            <br />
                            <br />
                            <div class="form-group">
                                <center>
                                    <p>
                                        <input type="submit" value="Create" />
                                    </p>
                                </center>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
            </div>
        </div>
    </fieldset>

请原谅懒散的 html... 美化还没有完成...

【问题讨论】:

    标签: asp.net asp.net-mvc


    【解决方案1】:

    回答第二个问题(如果我明白你的意思):

    它没有你想象的那么聪明。 POST 后最好发回 JSON 结果,如果不使用 Ajax,则返回简单的 null。

    我建议你在 POST 之后做return RedirectToAction("Index"); 然后页面自动刷新学生列表。

    或者通过 $.ajax 进行 POST 并在成功时使用 jquery 或 js 更新学生列表

    对于简单的“管理页面”表单,我通常会这样做。

        public ActionResult Teams()
        {
            var list = _data.GetTeams(true);
            return View(list);
        }
    
        public ActionResult TeamCreate()
        {
            var model = _data.GetTeamCRUDViewModel();
            return PartialView("_TeamCreate",model);
        }
    
    
        [HttpPost]
        public ActionResult TeamCreate(TeamCRUDViewModel model)
        {
            _data.SaveTeam(model);
            return RedirectToAction("Teams");
        }
    

    但在客户 UI 上,我建议使用 $.ajax 帖子。 更新: 好的,我看到你的问题了

    @model Student
    <fieldset>
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;       </button>
            <center>
                <h4 class="modal-title">New Student</h4>
            </center>
        </div>
        <div class="modal-body">
            <div class="col-md-12">
                <div class="clearfix"></div>
                <div class="x_content">
                    <br />
                 @using (@Html.BeginForm("NewStudent", "Home", FormMethod.Post))
                 {
                     <div class="form-group">
                         <div class="col-md-6 col-sm-6 col-xs-12">
                             <label class="control-label col-md-2 col-sm-2 col-xs-12" style="margin-right: 10px">Course</label>
                             <div class="col-md-3  col-sm-3 col-xs-12">
                                 @Html.DropDownList("CourseID", null, "-- Select Course --", htmlAttributes: new { @class = "form-control" })
                                    @Html.ValidationMessageFor(model => model.CourseID, "", new { @class = "text-danger" })
                             </div>
                             <label class="control-label col-md-2 col-sm-2 col-xs-12" style="margin-right: 10px">Location</label>
                             <div class="col-md-3 col-sm-3 col-xs-12">
                                 @Html.DropDownList("LocationID", null, "-- Select Location--", htmlAttributes: new { @class = "form-control" })
                                    @Html.ValidationMessageFor(model => model.LocationID, "", new { @class = "text-danger" })
                             </div>
                         </div>
                         <div class="editor-label">
                             @Html.LabelFor(model => model.FName)
                         </div>
                         <div class="editor-field">
                             @Html.EditorFor(model => model.FName)
                             @Html.ValidationMessageFor(model => model.FName)
                         </div>
                         <div class="editor-label">
                             @Html.LabelFor(model => model.LName)
                         </div>
                         <div class="editor-field">
                             @Html.EditorFor(model => model.LName)
                             @Html.ValidationMessageFor(model => model.LName)
                         </div>
                     </div>
                     <br/>
                     <br/>
                     <div class="form-group">
                         <center>
                             <p>
                                 <input type="submit" value="Create"/>
                             </p>
                         </center>
                     </div>
                 }
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
        </div>
    </div>
    

    也改变

    @Html.Action("StudentManager", "StudentController") to @Html.Action("StudentManager", "Student")
    

    like if 应该是控制器的名称

    【讨论】:

    • 我放的有什么不同? @Html.Action("NewStudent", "StudentController") 他们做的不一样吗?
    • 对不起,我想念你。它们是一样的
    • 那行不通。 CreateStudent post 操作属于 partialView,不允许 Child 操作执行重定向操作。
    • 如果您在模态视图表单上使用并提交,它将是标准发布,因此您可以进行重定向。从哪里调用 post 操作并不重要。部分视图它只是页面的一部分,它不是“孩子”。我有 100 个有效的例子
    • 我将代码更新为我相信您所说的内容,我在 post 方法中输入的内容是您的意思吗?
    【解决方案2】:

    这里对事物的运作方式存在根本性的误解。客户端向服务器发出请求,服务器返回响应。那么,客户端通常会根据该响应执行某事。对于 Web 浏览器,它会清除选项卡/窗口中的当前视图,解析响应并将其呈现到该选项卡/窗口中。实际上还有很多事情要做,但我尽量保持简单。

    但是,AJAX(或者特别是 JavaScript 中的 XMLHttpRequest 对象)就是您所说的瘦客户端。它就像您的网络浏览器中的一个小网络浏览器,只是没有所有的花里胡哨。它所做的只是提交请求并将响应传递给回调。该回调是一个 JavaScript 函数,其工作是对响应执行某些操作。如果目标是替换页面上的某些部分 HTML,则回调中的 JavaScript 代码必须这样做。它不会自动发生。

    认识到“局部视图”只是服务器端的事物,这一点也很重要。 MVC 是返回一个局部视图、一个普通视图,还是返回一个由各种局部视图组成的视图都是无关紧要的。服务器返回给客户端的只是一个 HTML 文档。在客户端是 Web 浏览器的情况下,它会解析 HTML 文档并构建所谓的文档对象模型或 DOM。然后它使用 DOM 将页面“呈现”为格式化的图像和文本。

    同样,所有 AJAX 请求返回的是一个 HTML 文档,它本身实际上只是一个具有“text/html”的 mime 类型的文本文档,它通知客户端它应该被视为 HTML。正如我所说,AJAX 回调的工作是对来自服务器的响应做一些事情,但这里的重点是你不能只说“用这个 HTML 替换那个部分”,因为部分的概念并没有存在客户端。您所拥有的只是一个对象图(DOM),您必须从 DOM 中选择一些内容,然后将 HTML 插入其中。

    【讨论】:

    • 这不是我 100% 关注的。鉴于部分是 100% 的服务器端,那么为什么当我提交帖子以重定向到 @Aleksei 建议的索引时,它给了我“不允许子操作执行重定向操作”错误?它怎么知道帖子不是索引的帖子?是因为函数名与当前 URL 不匹配吗?如果这是问题所在,那我该如何解决?
    • 我只是在谷歌上搜索该错误。也许如果您将 Html.Action 更改为 Html.RenderAction 它会修复它。导致 RenderAction 返回“正确”html
    • 错误来自 MVC 机器。当你渲染一个子动作时,虽然它被处理像一个动作,它在主请求之外。您不能从子操作重定向,因为它不是正在处理的实际请求。它只是 MVC 做一些事情作为渲染视图的一部分。
    • 那么必须使用 ajax 请求背后的原因是绕过 MVC 机制?
    • 没有。 AJAX 请求只是一个请求。任何请求,无论是否 AJAX,都通过 IIS,如果不是针对静态文件,则传递给 MVC 以完成。关键是子操作不是请求。 MVC 在其子操作的实现中,遵循对实际操作的请求将经历的过程,但子操作本身不是请求管道的一部分。这只是 MVC 作为渲染视图的一部分所做的事情,也可能只是调用任何随机函数。您无法重定向,因为子操作无法控制实际请求。
    猜你喜欢
    • 1970-01-01
    • 2014-05-26
    • 1970-01-01
    • 2018-05-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-26
    • 1970-01-01
    相关资源
    最近更新 更多