ASP MVC 表单调用特定操作,而不是重定向而是更新原始页面
本文关键字:重定向 原始 更新 表单 MVC 调用 操作 ASP | 更新日期: 2023-09-27 18:35:18
我正在使用 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)的这篇旧文章中看到的相似。
首先,我想在我的错误控制器中调用"发送"操作,而不是我的详细信息。这实际上确实调用了我的"发送"操作,但随后重定向到本地主机/错误/发送,我不希望它这样做。
我希望能够提交此表单,该表单调用和操作并使用远程 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();
}
另外,在我看来,这是我正在做的事情(简化,并在菲利普的帮助下)
@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()'/>
为了回答您的第一个问题,请尝试以下 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 将异步(默认情况下)点击你的操作方法,你的操作方法将做任何它需要处理错误的事情,然后当它完成时,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
参数。
在MVC中,"动作"本质上是一个"页面"。 (不完全是,但通过路由,这最终大多是正确的)
也就是说,您的操作将分组到类别中,并导航到在 MVC 框架内使用路由。
我认为您在这里要做的是进行 AJAX 调用,将您的错误消息发送到 Web 服务。
除此之外,您可以使用 jQuery 插入一个隐藏div
,其中包含一个带有另一个操作页面的IFrame
。 不过,我不会推荐它。
有两种可能性。
-
在"错误/发送"操作中,将用户重定向回本地主机/错误/详细信息页面。这可以通过控制器上的
Redirect()
方法完成。这种方法的问题在于它是一个阻塞调用。用户将不得不等到远程 api 被调用并响应。 -
使用注释中提到的 AJAX 方法。缺点是它有点复杂,您可能需要轮询服务才能检索状态,除非它是火灾并忘记呼叫,否则它是金钱。
使用 AJAX 是更优雅的解决方案。
使用 AJAX 将是解决这个问题的方法之一。但是您可能需要重新考虑页面的危害。如果这是您的提交问题页面,您是否希望在提交问题后继续留在此页面上。如果我继续提交问题,您是否只想查看最新问题的链接?您可能需要轮询服务器以获取已提交问题的链接,这使得它更加困难。
在不知道要求的情况下,想出任何解决方案并不容易,但一般来说,一旦从提交页面提交,我会转到不同的问题页面(例如 ~/issue/id)。
此外,您可以使用Html.TextboxFor(m=>m.subject)
或类似的语法,这样就不必为每个属性手动匹配输入 ID。