我的部分视图没有正确设置

时间:2018-02-12 21:02:05

标签: c# ajax asp.net-mvc

我在ASP.NET MVC中完成了一个应用程序,我遇到的问题是在提交表单后我的部分视图没有呈现。它的作用是重新加载整个页面。

这是我的模特:

using System.Collections.Generic;

namespace Portfolio.Models
{
    public class HomeViewModel
    {
        public List<User> User = new List<User>();
    }
}

以下是我的观点:

 @{
        ViewBag.Title = "Home Page";
    }
    @model Portfolio.Models.HomeViewModel

 @using (Ajax.BeginForm("FooForm",
    new AjaxOptions
    {
      HttpMethod = "get",
      InsertionMode = InsertionMode.Replace,
      UpdateTargetId = "FooView"
    }))
  {
    <button type:"submit" value:"Refresh/>

  }
@Html.Partial("_FooView", Model)

<script>
  window.onload = function () {
    window.setTimeout(function () { $("#FooForm").submit(); }, 5000);
  };
</script>

以下是我的部分观点:

@model Portfolio.Models.HomeViewModel
<div id="FooView">
        @for (int i = 0; i < Model.User.Count; i++)
        {
            <form>
                <div id="Name">@Model.User[i].Name</div>
                <div id="Email">@Model.User[i].Email</div>
                <div id="Date">@Model.User[i].Date</div>
            </form>
            <div>---------------------
        </div>
        }    
    </div>

最后,这是我的控制器:

using Portfolio.Models;
using System;
using System.Timers;
using System.Web.Mvc;

namespace Portfolio.Controllers
{
    public class HomeController : Controller
    {
        public HomeViewModel model = new HomeViewModel();
        Timer Timer = new Timer();

        public ActionResult Index()
        {
            ModelState.Clear();

            model.User.Add(new User() { Name = "A", Email = "a@email.com", Date = DateTime.Now.AddHours(-1) });
            model.User.Add(new User() { Name = "B", Email = "b@email.com", Date = DateTime.Now.AddHours(-2) });
            model.User.Add(new User() { Name = "C", Email = "c@email.com", Date = DateTime.Now.AddHours(-3) });

            if (Request.IsAjaxRequest())
            {
               return PartialView("_FooView", model);
            }
            return View(model)
        }            
    }
}

有人可以看到为什么我的索引操作返回整个视图而不是Ajax请求时的部分视图?我没有正确设置我的Ajax表单吗?非常感谢提前。

2 个答案:

答案 0 :(得分:0)

刷新后,此行上缺少双引号:new RegExp

答案 1 :(得分:0)

您的代码存在一些问题。

首先,您的脚本不会提交您的表单,因为您的表单没有id属性,其值为FooForm。您的Ajax.BeginForm()代码未添加id属性(实际上是在您的控制器中调用名为FooForm()的方法。假设您确实想要调用Index()方法脚本然后将BeginForm代码更改为

@using (Ajax.BeginForm("Index", null, new AjaxOptions(....), new { id = "FooForm" }))

将生成<form .... id="FooForm" >

然后,如果您实际上没有点击返回if (Request.IsAjaxRequest())的{​​{1}}中的代码,则表示您正在进行正常提交,这意味着您未在视图中包含PartialView(或者它没有正确加载或以错误的顺序加载)