MVC 控件在没有页面刷新的情况下无法正常工作答案

【问题标题】：MVC controls not working properly without page refreshMVC 控件在没有页面刷新的情况下无法正常工作
【发布时间】：2012-12-03 18:56:24
【问题描述】：

我有一个 MVC 控制器，可以在几个不同的地方通过表单提交来调用它。然后控制器呈现一个视图，其主要目的是允许用户发送文档或将其发布到外部站点，以及填写将在通知电子邮件中使用的文本字段。

我正在对这些字段进行验证 - 用户可以输入自定义主题/正文。如果他们不这样做，他们将收到一个弹出警报，并且可以返回到表单或使用占位符值中指示的默认文本提交它。

问题在于，当用户第一次到达此页面并单击发送按钮时，文本框中的任何输入实际上都没有注册，并且无论字段中实际有什么，它都会给出空字符串通知；但是，如果我按 F5 并再试一次，则输入完美。

我觉得这与最初通过 POST 操作完成调用此控制器的表单提交有关，而在页面刷新时使用 GET 似乎可以正常工作。我只是不知道如何在通过 POST 调用控制器时让内容正确响应，或者如何在不发布数据的情况下提交表单。

提前感谢您的阅读和任何帮助。

这里是调用控制器：

    public ActionResult Index(FormCollection collection)
    {
        //modelbuilding code
        return View (Model);
    }

调用控制器的代码总是使用这种格式：（在这种情况下，它将从 Recipients/Index 视图调用。

@using(Html.BeginForm("Index", "Distribution", FormMethod.Post )) {
    //form values
    <input type="submit" data-role="button" value="Done"/>
}

这里是视图和JS验证函数的相关部分：

<div id="SubjectTemplate">
    <p>Subject: <input id="emailSubjectTextBox" name="EmailSubject" placeholder="@EmailSubject" /></p>
</div>

<a href="javascript:validateInput();">Send Notification</a>

<script>               
    function validateInput() {
         var possibleErrors = [];   
         if (!(document.getElementById('emailSubjectTextBox').value)) {
               possibleErrors.push('@incompleteEmailSubject' + '\n');
         }
         //more validation that works the same way and has the same problem
         if (possibleErrors.length > 0) {
             if (confirm(possibleErrors))
             {
               window.location.href = '@Url.Action("Send")'
             }
         }
         else {
               window.location.href = '@Url.Action("Send")'
         }
    }                
</script>

【问题讨论】：

标签： asp.net-mvc model-view-controller

【解决方案1】：

我不确定我是否完全理解你的问题，但一般来说你不应该对 POST 和 GET 使用相同的操作。

更重要的是，如果您的操作没有某种副作用，则不应使用 POST。如果您在提交表单时所做的只是做出某种选择，那么您应该使用 GET。

有关如何使用 jQuery 执行 ajax GET 请求的更多信息和示例，请参阅以下帖子：http://www.jquery4u.com/ajax/key-differences-post/

无论您尝试做什么，POST 调用执行一些操作，然后重定向到返回给用户的 GET 操作是非常好的做法。

[HttpPost]
public ActionResult Index(FormCollection collection)
{
    //do whatever you need to save the record
    return RedirectToAction("Index")
}

[HttpGet]
public ActionResult Index()
{
    //modelbuilding code
    return View (Model);
}

这不仅可以帮助您的控制器遵守 RESTful 方法，还可以防止用户在碰巧按 f5 时出现烦人的“您确定要重新提交此页面吗”

希望这会有所帮助。

【讨论】：

嗯。有问题的控件仍然没有正确响应，尽管这确实帮助我清理了一些代码冗余，所以谢谢你。
很高兴我能提供一些帮助。我还发现可以帮助的是尝试隔离导致问题的代码。要么开始一个新项目，要么举一个可行的例子，一次一行地完成你正在做的事情。如果你慢慢地这样做，你会发现给你带来麻烦的线路或区域。祝你好运！

【解决方案2】：

我发现问题是由于 jQueryMobile 自动利用 AJAX 来发布表单。我通过在Html.BeginForm 语句中包含new {data_ajax = "false"} 解决了这个问题。

【讨论】：