如何在MVC中刷新页面

时间:2016-09-29 20:49:11

标签: c# asp.net-mvc

我发现我的页面实际上重新加载/刷新,但需要额外重新加载才能看到我刚刚添加的内容。但是我要重新加载 才能看到数据,添加其他数据以查看以前的数据..

我在下面添加了控制器代码:

(CreateComment 评论(显示评论)位于详细信息内(有关图书的详细信息)查看 < / p>

CreateComment

    public ActionResult CreateComment(Guid id) {
        return View(new CommentToBook { BookId = id });
    }

    [HttpPost]
    public ActionResult CreateComment(CommentToBookVm model) {
        if (ModelState.IsValid) {
            var m = new CommentToBook { Comment = model.Comment, BookId = model.BookId };
            m.UserId = new Guid(Session["UserID"].ToString());
            m.CreatedDate = DateTime.Now;
            db.CommentToBooks.Add(m);
            db.SaveChanges();

        }
        return View(model);
    }

查看for createComment

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(s => s.BookId)

<div class="form-horizontal">
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div class="form-group">
        @Html.LabelFor(model => model.Comment, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Comment, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Comment, "", new { @class = "text-danger" })
        </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>

详细信息(内置评论和CreateComment)

public ActionResult Details(Guid? id) {

        Book book = db.Books.Find(id);

        return View(book);
    }

查看

<h2>Details</h2>

@Html.Action("Rating", new { id = Model.Id })
<div>


    <h4>Books</h4>
    <hr/>
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Title)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Title)
        </dd>
 @*and so on...*@

   </dl>
</div>

@Html.Action("Comment", new { id = Model.Id })
@Html.Action("CreateComment", new { id = Model.Id })

评论列出所有评论。

public ActionResult Comment(Guid? id) {

                var comment = db.CommentToBooks.Where(c => c.BookId == id);

                return View(comment.ToList());
            }

视图:

<table class="table">
    <tr>
        <th>
            User
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Comment)
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.ActionLink(item.User.UserName, "VisitUser", new { id = item.UserId }) 
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Comment)
            </td>
        </tr>
    }
</table>

我认为它是关于我在控制器中返回的内容,我尝试了一些不同的选择,但我最终遇到了错误:

Description: 
  

执行当前期间发生了未处理的异常   网络请求。请查看堆栈跟踪以获取更多信息   错误以及它在代码中的起源。

     

异常详细信息:System.NullReferenceException:不是对象引用   设置为对象的实例。

     

来源错误:

     

第9行:@ Html.Action(&#34;评论&#34;,新{id = Model.Id})

OR

  

不允许子操作执行重定向操作。

如果我尝试RedirectToActionCreateComment

我很感激代码的一个例子,因为我发现很难通过单词理解新概念。

1 个答案:

答案 0 :(得分:5)

您的代码正在返回CreateComment方法的视图。您似乎只将此操作方法标记为ChildActions。您不应该将ChildAction用于此类用例。应该使用ChildActions为视图渲染内容。例如:您应用中的菜单栏。

即使从CreateComment操作方法中删除[ChildAction],当您将模型返回到表单时,它也将呈现CreateComment视图生成的标记。这意味着您将松开注释列表(在调用“详细信息”视图时加载)。

理想情况下,对于所有数据插入用例,您应该遵循 P-R-G 模式。

PRG代表 POST - REDIRECT - GET 。这意味着,您提交表单并在成功将数据保存到数据库后,您确实将重定向结果返回给客户端,并且客户端(浏览器)将为GET操作方法发出全新的http请求,您将在该方法中查询数据库表和返回结果。

但是,由于您的表单通过调用Html.Action方法加载到主视图,因此您将无法获得所需的结果(同一视图中的注释列表和验证消息)。使其工作的一件事是,通过启用不显眼的客户端验证。在这种情况下,表单将不会实际提交给服务器。相反,将调用客户端验证,并在同一页面中向用户显示验证消息(无页面重新加载!)。

您可以通过在视图(或布局)中添加对这两个脚本的引用来启用它

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

重定向到GET操作,以在成功保存发布的评论后显示所有评论。

[HttpPost]
public ActionResult CreateComment(CommentToBookVm model) 
{
  if (ModelState.IsValid) 
  {
    //your existing code to save data to the table

     return RedirectToAction("Details","Book", new { id=model.BookId} );

  }

  // Hoping that the below code might not execute as client side validation
 //  must have prevented the form submission if there was a validation error.
  return View(model);
}

另一个不依赖于客户端验证的选项是创建一个平面视图模型,其中包含新评论表单的现有注释和属性列表。提交表单时,如果验证失败,请再次重新加载Comments属性并将视图模型返回到表单。

public class ListAndCreateVm
{
  [Required]
  public string NewComment { set;get;}

  public Guid BookId { set;get;}

  public List<CommentVm> Comments { set;get;}
}
public class CommentVm
{
  public string Comment { set;get;}
  public string Author { set;get;}
}

并在“详细信息”操作中,加载“评论”并将其发送到视图

public ActionResult Details(Guid id)
{
   var vm = new ListAndCreateVm { BookId= id};
   vm.Comments = GetComments(id);
   return View(vm);
}
private List<CommentVm> GetComments(Guid bookId)
{
   return db.CommentToBooks.Where(c => c.BookId == bookId)
                                  .Select(x=> new CommentVm { Comment = x.Comment})
                                  .ToList();
}

并在您的视图中

@model ListAndCreateVm
@foreach(var c in Model.Comments)
{
  <p>@c.Comment</p>
}
<h4>Create new comment</h4>
@using(Html.BeginForm())
{
  @Html.ValidationSummary(false, "", new {@class = "text-danger"})
  @Html.TextBoxFor(s=>s.NewComment)
  @Html.HiddenFor(f=>f.BookId)
  <input type="submit" />
}

现在使用PRG模式,确保在模型验证失败时重新加载视图模型的Comments属性

[HttpPost]
public ActionResult Details(ListAndCreateVm model)
{
  if(ModelState.IsValid)
  {
    // to do : Save
    return RedirectToAction("Details,"Book",new { id=model.BookId});
  } 
  //lets reload comments because Http is stateless :)
  model.Comments = GetComments(model.BookId);
  return View(model);
}