MVC 5 的 Ajax 问题?

我正在学习MVC 5,正在尝试实现一个简单的页面来添加和显示students。这个问题需要很大的篇幅,但却是极其基本的。

下面是模型:

public class Student
{
    public int StudentId { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

以下是action方法:

public ActionResult Index()
    {
        return View(db.Students.ToList());
    }

    public ActionResult Create()
    {
        return PartialView();
    }


    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(Student student)
    {
        if (ModelState.IsValid)
        {
            db.Students.Add(student);
            db.SaveChanges();
            return PartialView();
        }

        return PartialView(student);
    }

下面是父视图:Index.cshtml

@model IEnumerable<MVCAjax.Models.Student>
<h2>Index</h2>
<div class="row" id="myformbase">
    <div class="col-md-6">
        <table class="table">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Age)
                </th>
                <th></th>
            </tr>

            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Age)
                    </td>
                </tr>
            }

        </table>
    </div>
    <div class="col-md-6">
        @Html.Action("Create")
    </div>
</div>

这是子视图: Create.cshtml

@model MVCAjax.Models.Student
@using (Ajax.BeginForm("Create", "Student", new AjaxOptions { UpdateTargetId = "myform" }))
{
    <div id="myform">
        <h2>Create</h2>
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <h4>Student</h4>
            <hr />
            @Html.ValidationSummary(true)
            <div class="form-group">
                @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Name)
                    @Html.ValidationMessageFor(model => model.Name)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Age, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Age)
                    @Html.ValidationMessageFor(model => model.Age)
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>

        </div>
    </div>
}

现在我有几个问题:

  1. 当我键入学生姓名和年龄并单击创建时,文本框仍显示值而不是被清除。 数据也会被保存在数据库中。
  2. 如果我想在添加新学生后立即更新左侧的列表,该怎么办?

我对MVC4有一点经验,如果我(在AjaxOptions中)传递了包含两个子div(在我的情况下为“ myformbase”)的div的ID,那么它将用于更新它。但不确定为什么这在MVC5中不起作用。

  1. Just add ModelState.Clear(); after you have saved record in to database;
  2. Try to change UpdateTargetId to the base container ID:

    @using (Ajax.BeginForm("Create", "Student", new AjaxOptions { UpdateTargetId = "myformbase" })){...}

When I type student name and age and click create, the text boxes still show values instead of getting cleared. The data gets saved in the db.

A Right way to solve this problem is to do a POST-REDIRECT-GET (PRG). Alternatively you can create a empty model and bind it with view (I mean Student s = new Student(); return PartialView(s);).

What if I want to update the List on the left part as soon as new student is added.

PRG will solve your problem in this case also. So redirect to Index Action, once Create is completed. Alternatively you can use AJAX GET to the Index Action and load the html in the view.