ASP MVC表单以调用特定操作，而不重定向但更新原始页面

Question

我正在将ASP.net MVC 3用于一个项目，并且在这一点上我了解了更多信息，但是还试图了解它与我使用了很长时间的WebForms世界之间的区别。以前，在WebForms中，您只是将字段放在那里，添加一个按钮，创建一个事件，然后通过回发处理所需的一切。

例如，我有一个简单的视图，显示有关错误的详细信息。我想将有关此错误的一些信息推送到我们的问题跟踪器的API。可以说仅是错误的主题和内容。我会在HTML中执行以下操作：

<form action="@Url.Action("Send")" method="post">
    <input id="subject" name="subject" type="text" value="@Model.subject" />
    <br />
    <input id="content" name="content" type="text" value="@Model.content" />
    <br />
    <input type="submit" value="Send" />
</form>

我发现命名输入ID以匹配控制器中的参数名称将使我传递这些参数。这类似于您在Scott Guthrie的较早的文章中看到的内容。

首先，我想在我的Errors控制器中调用“发送”操作，而不是在Details中。这实际上确实调用了“发送”操作，但随后重定向到了我不希望它执行的本地主机/错误/发送。

我希望能够提交此表单，该表单将调用并执行操作并使用远程API进行工作，然后在当前页面上更新一条消息，指出错误已转移。

将问题提交给错误跟踪器后，例如，如何在原始页面上显示DIV，将内容传回给它（例如，在问题跟踪器中指向问题的链接）？

更新：这是我在控制器中正在做的事情：

HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create("http://localhost/redmine/issues.json");
request.Credentials = new NetworkCredential("username", "password");
request.Method = "POST";
request.ContentType = "application/json";
request.Accept = "application/json";

using (StreamWriter writer = new StreamWriter(request.GetRequestStream()))
{
    writer.Write("'issue': { " +
                      "'project_id': 'project', " +
                      "'subject': 'Test issue'" +
                      "}");
}

WebResponse response = request.GetResponse();
Stream stream = response.GetResponseStream();
string json = "";

using (StreamReader reader = new StreamReader(stream))
{
    json = reader.ReadToEnd();
}

另外，这是我的观点（简化后，在Phillip的帮助下）

@model webapp.Models.app_errors

<script type="text/javascript">
 function SendErrors() {    

           alert(@Model); // here I get a 'webapp undefined error'
           alert(Model); // Model is undefined. If I reference @Model.App_name or another value anywhere, works fine in rest of view

        $.ajax({
            type: 'POST', //(probably)
            url: '../SendToRedmine',
            cache: false, //(probably)
            dataType: 'json', //(probably)
            data: @Model,
            success: function(result)
            {
                alert("The error has been transferred");
                //you can also update your divs here with the `result` object, which contains whatever your method returns
            }
            });
    }
</script>

<input type="button" onclick='SendErrors()'/>

Answer 1

为了回答您的第一个问题，请尝试 Url.Action 的此重载：

Url.Action("ActionName","ControllerName")

第二个问题：您需要通过 AJAX 来完成此操作。

基本上，第一次加载页面时，返回您想要在屏幕上显示的任何内容。然后，有一个这种形式的 ajax 函数：

<script type="text/javascript">
    function SendErrorsOrWhatever()
    {
        dummy = 'error: myError, someOtherProperty = property';  //this of course assumes that 'myError' and 'property' exist
        $.ajax({
        type: 'GET', //i changed this because it actually probably better suits the nature of your request
        url: '../Details/Send',
        cache: false, //(probably)
        dataType: 'json', //(probably)
        data: dummy,  //json object with any data you might want to use
        success: function(result)
        {
            alert("The error has been transferred");
            //you can also update your divs here with the `result` object, which contains whatever your method returns
        }
        });
    }
</script>

需要注意的一些事项： 1) url 会自动附加以包含来自data. 2) 您的操作方法现在需要接受一个参数。有很多方法可以解决这个问题。我在下面的代码中添加了一个示例，说明您的操作方法可能是什么样子。

然后按钮的onclick事件将调用该函数，如下所示：

<input type="button" onclick='SendErrorsOrWhatever()'/>

这里发生的情况是，当您单击按钮时，Ajax 将异步（默认情况下）调用您的操作方法，并且您的操作方法将执行任何需要执行的错误操作，然后当完成时，将调用success回调。

编辑：现在，您的操作可能如下所示：

[AcceptVerbs(HTTP.Get)]
public static Error GetErrors(Error error)
{
    //do all your processing stuff
}

现在，假设 JSon 对象dummy具有与类相同的字段Error。如果是这样，MVC 将对其进行自动数据绑定。您还可以使用更通用的FormCollection参数。实际上，您可以使用任何您想要的东西，但您需要将任何您想要的东西包装在 JSon 对象中。

编辑 - 对于你的最后一个问题，这应该有效：

将以下扩展方法添加到您的应用程序中：

public static class JsonExtensions
{
    public static string ToJson(this Object obj)
    {
        return new JavaScriptSerializer().Serialize(obj);
    }
}

或者，如果您愿意，您可以将 ToJson() 方法添加到模型类中，然后：

var model = @Model.ToJson();

在ajax调用之前的js中。然后使用该model变量作为您的data参数。