刷新MVC局部视图中的更新数据

时间:2013-09-08 14:59:26

标签: jquery asp.net-mvc asp.net-mvc-partialview

我有一个局部视图,允许我使用强类型视图从数据库中检索和编辑数据。

我的模特:

  public partial class Associate
{
    public Associate()

    public int ID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
....

public Associate GetRow(int count)
    {
        Associate a = new Associate();
        var query = from rows in db.Associates orderby rows.ID select rows;
        if (count > 0)
        {
            foreach (var row in query.Skip(count - 1).Take(1))
            {
                a = row;
            }
            return a;
        }
....

我的控制器:

 public ActionResult GetRow(int count)
    {
        return PartialView("Edit", new MVC.Models.Associate().GetRow(count));
    }

    [HttpPost]
    public ActionResult Edit(Associate associate)
    {
        if (ModelState.IsValid)
        {
            db.Entry(associate).State = EntityState.Modified;
            db.SaveChanges();
            return PartialView("Edit",associate);
        }
        return RedirectToAction("../Error");
    }

我的索引视图:

   <script>
    $(document).ready(function () {
     $('#record').change(function () {
    if (/^[0-9]+$/.test($("#record").val()) == true) {
        $.ajax({
            type: "POST",
            url: "Associate/GetRow",
            data: { count: $('#record').val() },
            success: function (data) {
                $('#FormContainer').html(data)
            },
            error: function (result) {
                alert(result.responseText);
            }
        });
    }
})  
   });
   </script>

<div id="FormContainer">
</div>
<input type=text id="record" style="width:3em; top:-0.7em;position:relative" />

和我的部分视图:

  @model MVC.Models.Associate


 <script type="text/javascript" >
.....
 var form = $('#form1');
                $.ajax({
                    type: form.attr('method'),
                    url: form.attr('action'),
                    data: form.serialize(),
                    success: function (data) {
                    },
                    error: function (result) {
                        alert(result.responseText);
                    }
                });
....
</script>
 @using (Html.BeginForm("Edit", "Associate", FormMethod.Post, new { id = "form1" }))
{
@Html.ValidationSummary(true)
<fieldset>
    <legend>Contacts</legend>
    @Html.HiddenFor(model=>model.ID)
        <div class="editor-label">
        @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
        @Html.EditorFor(model => model.FirstName)
        @Html.ValidationMessageFor(model => model.Type)
        </div>

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

当我在索引表单的#record输入中输入新值时,Associates / GetRow返回正确的关联 - 这是有效的。当表单失去焦点时(代码未显示),将调用更新记录的ajax函数。当我在表单上编辑一个字段并移动焦点时,数据库中的基础数据将更改为新值 - 因此检索记录和更新记录都正常工作。

但是,当我编辑一条记录然后移动到下一条记录然后返回编辑的记录时,编辑记录中的更新值不会显示。因此,Associates / GetRow操作返回旧值,而不是从数据库中获取新值。或者,如果我编辑字段然后手动或通过代码刷新整个页面或部分视图,则新值将替换为旧值,即使新值存储在基础数据库中也是如此。

我试过了         我的控制器中的[OutputCache(Duration = 0)]没有成功。

我们非常感谢任何建议。

更新1:

响应标头是:

服务器:asp.net开发服务器/ 10.0.0.0

date:sun,08 sep 2013 19:21:16 gmt

x-aspnet-version:4.0.30319

x-aspnetmvc-version:3.0

cache-control:private

content-type:text / html;字符集= UTF-8

内容长度:2910

连接:关闭

如果我关闭浏览器窗口并清除缓存的网页,包括表单输入,甚至我的项目上的Ctrl和F5重建网页,仍会显示旧数据。我发现显示新数据的唯一方法是对项目进行更改并保存更改然后重建项目。然后显示新数据。

更新2:

我找到了另一种显示新数据的方法,可能会显示正在发生的事情。我已将我的索引视图更改为包括:

 <div id="FormContainer">
 @Html.Partial("Edit", new MVC.Models.Associate().GetRow(1))
 </div>

然后编辑第一条记录。 当我编辑第一条记录然后移动到新记录并使用#record输入返回时仍会显示旧值。但是,如果我手动刷新页面,则现在会为第一条记录显示新值。

当我在GetRow函数中包含您建议的代码时,即使我使用上面索引视图的更改刷新页面,也不会显示新值。

更新3:

我已经更改了索引视图,如下所示:

<script>
$(document).ready(function () {
    $('#Button1').click(function(){
        RefreshPartial();
    })
 });

  function RefreshPartial() {
    $('#FormContainer').load('/Associate/GetRow', {count:1});    
  }
</script>
 <input id="Button1" type="button" value="button" />
 <div id="FormContainer">
  @Html.Partial("Edit",new MVC.Models.Associate().GetRow(1))
 </div>

所以现在我有两种方法可以获得第一条记录。

如果我编辑记录中的字段,则单击RefreshPartial函数运行的按钮,新值将替换为旧值。如果我然后刷新页面以便运行@ Html.Partial代码,则旧值将替换为新值。如果我关闭浏览器并重新打开它,则会在所有情况下显示旧值。

底层数据库中的值始终是新值。

更新4

正如PaulD'Ambra在下面指出的那样,我的GetRow应该从模型中获取一个项目而不是模型的一部分。这是GetRow控制器操作,用于从数据库中检索记录:

 public ActionResult GetRow(int count)
    {
        Associate a = new Associate();
        var query = from rows in db.Associates orderby rows.ID select rows;
        if (count > 0)
        {
            foreach (var row in query.Skip(count - 1).Take(1))
            {
                a = row;
                a.record_count = count;
            }
        }
        else
        {
            foreach (var row in query.Skip(query.Count() + 1).Take(1))
            {
                a = row;
                a.record_count = count;
            }
        }
        return PartialView("Edit", a);
    }

3 个答案:

答案 0 :(得分:6)

尝试在Edit方法中使用ModelState.Clear()

[HttpPost]
public ActionResult Edit(Associate associate)
{
    ModelState.Clear();
    ...

答案 1 :(得分:0)

如果这是一个缓存问题,您可以通过添加(为了识别问题)来识别它

HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1))
HttpContext.Current.Response.Cache.SetValidUntilExpires(false)
HttpContext.Current.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches)
HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache)
HttpContext.Current.Response.Cache.SetNoStore()

进入你的GetRow方法。

这告诉客户端不要缓存响应,以便您可以对其进行排除(并且您将能够在响应标头中看到这些更改的影响)。

答案 2 :(得分:0)

试试这个。

 $(document).ready(function () {
            var url = "@(Html.Raw(Url.Action("ActionName", "ControllerName")))";
            $("#PartialViewDivId").load(url);
        setInterval(function () {
            var url = "@(Html.Raw(Url.Action("ActionName", "ControllerName")))";
            $("#PartialViewDivId").load(url);
        }, 30000); //Refreshes every 30 seconds

        $.ajaxSetup({ cache: false });  //Turn off caching
    });

它进行初始调用以加载div,然后后续调用的间隔为30秒。

在控制器部分,您可以更新对象并将对象传递给局部视图。

public class ControllerName: Controller
{
    public ActionResult ActionName()
    {
        .
        .   // code for update object
        .
        return PartialView("PartialViewName", updatedObject);
    }
}