Question

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

我对这个控制器代码有几个问题。出于某种原因，在我按下＆＃34; NewStudent＆＃34;局部视图，每次我刷新页面后，新的学生都在那里，没有我进去并按提交...这是一个问题。

另外，我在堆栈上搜索了类似的主题，我似乎无法理解为什么返回PartialView（＆＃34; StudentManager＆＃34;，db.Students.ToList（））;不会自动刷新我的＆＃34; StudentManager＆＃34;视图。这段代码应该在一个局部视图中给我一个列表，另一个局部视图应该让我创建一个新的列表项，然后告诉列表局部视图更新。

控制器：

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>

这是＆＃34; NewStudent.cshtml＆＃34;视图：

@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 ......完美没有完成......

Answer 1

回答第二个问题（如果我明白你的意思）：

它并不像你预期的那么聪明。在POST之后更好地发送回JSON结果或简单null如果不使用Ajax。

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

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

这里是我通常如何做的简单＆＃34;管理页面＆＃34;形式。

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

如果应该是控制器的名称

Answer 2

这里有一个关于事情如何运作的根本误解。客户端向服务器发出请求，服务器返回响应。然后，客户端通常会使用该响应。对于Web浏览器，它会清除选项卡/窗口中的当前视图，解析响应并将其呈现到该选项卡/窗口中。实际上还有更多的事情发生，但我试图让它变得简单化。

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

认识到＆＃34;局部视图＆＃34;同样重要。只是事物服务器端。 MVC是返回局部视图，普通视图，还是由各种局部视图组成的视图都是无关紧要的。服务器返回客户端的只是一个HTML文档。在客户端是Web浏览器的情况下，它然后解析该HTML文档并构建称为文档对象模型或DOM的文档。然后它使用DOM来＆＃34;渲染＆＃34;页面为格式化图像和文本。

同样，所有AJAX请求都返回一个HTML文档，它本身只是一个文本文档，其mime类型为＆＃34; text / html＆＃34;通知客户端应将其视为HTML。正如我所说，AJAX回调的工作是对服务器的响应做一些事情，但这里的重点是你不能说＆＃34;用这个HTML取代那部分＃＆＃因为partials的概念并不存在于客户端。您所拥有的只是一个对象图（DOM），您必须从DOM中选择一些内容，然后将HTML插入其中。

部分视图更新另一个部分视图问题

2 个答案: