Question

尝试通过创建一个简单的社交网络来学习mvc并且我试图让ajax工作但是不是更新目标div，而是将部分视图作为整个新页面返回。有人可以解释为什么吗？

（以下代码中的帖子和状态没有区别，命名差异来自于因为我试图在youtube上完全复制教程）

INDEX

@Html.Partial("_AddPost", new S1.Models.Post())

<div id="newStatus">
</div>

添加POST PARTIAL

@using (Html.BeginForm("CreatePost", "Wall", new AjaxOptions
{
    HttpMethod = "post",
    InsertionMode = System.Web.Mvc.Ajax.InsertionMode.InsertAfter,
    UpdateTargetId = "newStatus"}))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true) 

    <fieldset>
        <legend>Post</legend>

        <div class="editor-label">

        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.Username, new { Value = User.Identity.Name })

        </div>


        <div class="editor-label">
            @Html.LabelFor(model => model.PostContent)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PostContent)
            @Html.ValidationMessageFor(model => model.PostContent)
        </div>

        @{
    TempData["returnURL"] = Request.Url.AbsoluteUri;
        }
        <p>
            <input type="submit" id="postStatus" value="Create" />
        </p>
    </fieldset>
}

创建帖子行动

 [HttpPost]
        [ValidateAntiForgeryToken]
        public PartialViewResult CreatePost(Post Post)
        {

            if (ModelState.IsValid)
            {
                string wallID = TempData["wallID"].ToString();

                Post.PostDateTime = System.DateTime.Now;
                Post.Wallname = wallID;

                db.Posts.Add(Post);
                db.SaveChanges();
                return PartialView("_NewStatusPartial",Post);


            }

            return PartialView("All",Post);
        }

提前致谢

Answer 1

你不能使用这个Html助手 -

@using (Html.BeginForm("CreatePost", "Wall", new AjaxOptions
{
    HttpMethod = "post",
    InsertionMode = System.Web.Mvc.Ajax.InsertionMode.InsertAfter,
    UpdateTargetId = "newStatus"}))
{

您传递的AjaxOptions重载。您需要切换到使用Ajax.BeginForm（）

@using (Ajax.BeginForm("CreatePost", "Wall", new AjaxOptions
{
    HttpMethod = "post",
    InsertionMode = System.Web.Mvc.Ajax.InsertionMode.InsertAfter,
    UpdateTargetId = "newStatus"}))
{

此外，请确保您在项目中包含正确的Microsoft.Ajax javascript文件和HTML标记（可能在您的布局文件中）。

展望未来，使用jQuery处理表单提交和部分页面更新将为您提供更灵活的代码和设计网站的方式，但由于您正在学习本教程，因此我不想偏离您的问题而抛弃你的那些概念。

简单的MVC Ajax故障排除

1 个答案: