查看不显示更新的值 asp.net mvc

Question

我们想对视图中的某些值执行一些计算...所以当用户在输入中输入一个值时...我们想返回服务器...执行计算并“刷新”使用新值查看...使用现在的代码，它会输入正确的（...或至少是我要求的）控制器操作，正确执行计算并将更新的 ViewData 返回到视图。当我通过为视图构建 html 的循环时，ViewData 具有更新的值，但是当视图显示在浏览器上时，值没有改变......

这里是javascript

$('input.changeValue').change(function() {
    $('body').css('cursor', 'wait');
    var changedAmt = this.value;
    var frmUpdate = $('form#frmUpdate').serializeArray();

    fooSoldObj = new Object();
    fooSoldObj.name = 'fooSoldAmt';
    fooSoldObj.value = changedAmt;

    frmUpdate[frmUpdate.length] = fooSoldObj;

    $.ajax(
            {
                type: $('form#frmUpdate')[0].method,
                url: $('form#frmUpdate')[0].action,
                data: frmUpdate,
                dataType: 'html',
                error: function(error) {
                    alert('frmUpdate error' + error);
                }
            }
        ); 

    setTimeout(function() {
        $('body').css('cursor', 'default');
    }, 0);
});

frmUpdate 表单的 html 如下所示

<form action="/Forecast/Update" id="frmUpdate" method="post" name="frmUpdate">
    <span>
        <input id="HiddenForecastID" name="HiddenForecastID" type="hidden" value="XXX" />
        <input id="HiddenForecastYear" name="HiddenForecastYear" type="hidden" value="2009" />
        <input id="HiddenForecastMonth" name="HiddenForecastMonth" type="hidden" value="3" />       
    </span>
</form>

现在只是为了进一步混淆，未正确显示的数据在视图中以不同的形式出现。我有两个表单的原因（对或错）是视图上的另一个表单启动了保存例程。

这是控制器动作的相关部分

 [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Update(FormCollection frmUpdate)            
    {
        //go off and do some stuff...this part works as the ViewData 
        //is correct....meaning it has the updated values that
        //we want to see displayed in the view
        return View("MyView", ViewData[someData]);

    }

我在想，它不起作用的原因可能是我正在更新一个表单，然后要求 MVC 视图引擎更新/刷新另一个表单（但请记住，当我通过循环时构建页面的视图，数据已更新但浏览器中的页面未更新）...如何使视图显示正确的 html？

/******************************************************
添加以下代码只是为了测试 RedirectToAction
上面的 return View("blah") 东西上的 ajax 调用不会出错
************************************************/

附：就像这样在控制器中尝试了 RedirectToAction

 [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Update(FormCollection frmUpdate)            
    {
        //go off and do some stuff...this part works as the ViewData 
        //is correct....meaning it has the updated values that
        //we want to see displayed in the view
        return RedirectToAction("MyView", new RouteValueDictionary( new { controller = "Forecast", action = "MyView", addMonth = monthAdd } ) );
    }

但随后 ajax 调用错误并出现 500 错误

谢谢，
格雷格

Answer 1

你快到了。我们就是这样做的。

在视图中，对于要通过 ajax 更新的部分，将此处的 html 复制到部分视图中，我们将调用 Partial_View_of_Form 并将其呈现在视图上。我们将把它放在一个唯一的 div 中，以便我们以后可以替换这些内容......

<div id="replace_me">
  <% Html.RenderPartial("Partial_View_of_Form", ViewData[someData]); %>
</div>

对于 Update() 而不是返回 View，返回我们刚刚创建的带有新值的局部视图：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Update(FormCollection frmUpdate)
{
    // do whatever processing you need here
    return PartialView("Partial_View_of_Form", ViewData[updatedData]));
}

最后，在 ajax 帖子中，获取您从操作返回的 html 并替换原始部分视图的内容。

success: function(html)
{
    $("#replace_me").html(html); 
}

这是相当粗略的代码，未经测试，但应该很容易从这里开始

Answer 2

您在这里有 2 个独立的环境。您的 MVC 代码在服务器上运行，而您的 javascript 在客户端（浏览器）上运行。当您提交表单时，浏览器会向服务器发送一个请求，您的控制器会处理它并提供数据以供视图呈现。呈现的视图被发送回浏览器，浏览器必须对其进行解释。

500 响应代码表示“服务器错误”。换句话说，服务器在向浏览器发送响应之前遇到了一些问题。尝试检查您看到错误时提供的错误详细信息。它应该给你一些关于出了什么问题的线索。您正在渲染的视图中可能只是一个错误。

Answer 3

我得到了显示更新数据的视图...只是不是 ajaxy...这是我对 javascript 所做的更改

$('input.changeValue').change(function() {
    $('body').css('cursor', 'wait');
var changedAmt = this.value;
var frmUpdate = $('form#frmUpdate').serializeArray();

fooSoldObj = new Object();
fooSoldObj.name = 'fooSoldAmt';
fooSoldObj.value = changedAmt;

frmUpdate[frmUpdate.length] = fooSoldObj;

$.ajax(
        {
            type: $('form#frmUpdate')[0].method,
            url: $('form#frmUpdate')[0].action,
            data: frmUpdate,
            dataType: 'html',
            /* the line below is the change */
            success: function() { window.location = document.location.href; },
            error: function(error) {
                alert('frmUpdate error' + error);
            }
        }
    ); 

setTimeout(function() {
    $('body').css('cursor', 'default');
}, 0);
});

所以现在 $.ajax 将数据 frmUpdate 发送到服务器...服务器对 Session 对象中的数据进行了一些更改...将保存的数据存储在 Session 对象中...然后视图是通过

加载

window.location = document.location.href

线，启动控制器动作

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult MyView(int monthAdd) 

然后在 Session 对象中查找，获取刚刚更改的数据并返回视图...似乎我正在绕过我的肘部来获得我的 a$$ :)