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

时间:2012-05-25 20:35:33

标签: c# jquery asp.net asp.net-mvc-3 forms

我正在使用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的旧帖子中看到的内容。

首先,我想在我的错误控制器中调用“发送”操作,而不是我的详细信息。这实际上会调用我的“发送”操作,但随后会重定向到localhost / Errors / Send,我不希望这样做。

我希望能够提交此表单,该表单调用和操作并使用远程API完成工作,然后在当前页面上更新消息,指出错误已被传输。

一旦将问题提交给错误跟踪器,我如何在原始页面上显示DIV并将内容传回给它(例如,问题跟踪器中问题的链接)? / p>

更新:以下是我在控制器中所做的事情:

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();
}

此外,这是我在我看来所做的事情(简化,并在菲利普的帮助下)

@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()'/>

4 个答案:

答案 0 :(得分:3)

在回答您的第一个问题时,请尝试使用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)自动附加网址以包含来自data的数据。 2)你的动作方法现在需要接受一个参数。有很多方法可以解决这个问题。我在下面的代码中添加了一个动作方法的示例。

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

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

这里发生的是,单击按钮时,Ajax将异步(默认情况下)命中您的操作方法,您的操作方法将执行错误所需的任何操作,然后在完成时,{ {1}}回调将被击中。

编辑:现在,您的行动可能如下所示:

success

现在,假设JSon对象[AcceptVerbs(HTTP.Get)] public static Error GetErrors(Error error) { //do all your processing stuff } dummy类具有相同的字段。如果是这样,MVC将对其进行自动数据绑定。您也可以为参数使用更通用的Error。真的,你可以使用你想要的任何东西,但是你想要在JSon对象中包装任何你想要的东西。

编辑 - 对于你的上一个问题,这应该有效:

将以下扩展方法添加到您的应用中:

FormCollection

或者,如果需要,可以将ToJson()方法添加到模型类中,然后:

public static class JsonExtensions
{
    public static string ToJson(this Object obj)
    {
        return new JavaScriptSerializer().Serialize(obj);
    }
}
在ajax调用之前的js中的

。然后使用var model = @Model.ToJson(); 变量作为model参数。

答案 1 :(得分:0)

在MVC中,“动作”本质上是一个“页面”。 (不完全是,但是通过路由,这最终会成为真实的)

也就是说,您的操作被分组到类别中并导航到使用MVC框架内的路由。

我认为你想要做的是进行一次AJAX调用,将你的错误信息发送到网络服务。

除此之外,您可以使用jQuery插入隐藏的div,其中包含IFrame和其他操作的页面。不过我不推荐它。

答案 2 :(得分:0)

有两种可能性。

  1. 在“错误/发送”操作中,将用户重定向回localhost / Errors / Details页面。这可以通过控制器上的Redirect()方法完成。这种方法的问题在于它是一个阻塞调用。并且用户必须等到远程api被调用并响应。

  2. 使用评论中提到的AJAX方法。缺点是它有点复杂,您可能需要轮询服务以检索状态,除非它是一个火灾和忘记呼叫,然后它是钱。

  3. 使用AJAX是更优雅的解决方案。

答案 3 :(得分:0)

使用AJAX将解决这个问题。但您可能想重新考虑页面的行为。如果这是您的提交问题页面,您是否希望在提交问题后留在此页面上。如果我一直提交问题怎么办,您是否希望仅查看最新链接?您可能必须轮询服务器以获取已提交问题的链接,这使得它更难。

在不了解要求的情况下,提出任何解决方案并不容易,但一般来说,一旦从提交页面提交(例如〜/ issue / id),我就会转到另一个问题页面。

此外,您可以使用Html.TextboxFor(m=>m.subject)或类似的语法,这样您就不必为每个属性手动匹配输入ID。