在MVC / Razor中,如何打开新视图而不是部分视图?

时间:2015-05-15 17:54:58

标签: asp.net-mvc asp.net-mvc-4 razor partial-views asp.net-mvc-partialview

我有Razor的MVC项目。页面上有一个部分视图的视图。我在局部视图中有一个更新局部视图的按钮。这很好用。但是,我在视图中有另一个按钮,我想打开一个新视图; “突破”原始观点。相反,此新视图将打开部分页面所在的位置。如何“突破”父视图以打开新视图?

这来自我之前的问题:How do I get my MVC page to post to the same action in IE and Chrome?

以下是详细信息。我有一个部分视图的视图。单击ButtonB可从数据库中获取一些数据;一切都很好。

-------------------------------------------------
|                                               |
| MerchantApplicationSummary.cshtml             |
|                                               |
|                                               |
|    PartialDiv                                 |
|    -----------------------------------        |
|    | ApplicationReportPartial.cshtml |        |
|    |                                 |        |
|    |  [Button B]                     |        |
|    -----------------------------------        |
|                                               |
|    [Button A]                                 |
-------------------------------------------------

当我点击按钮A时,我想打开一个全新的视图:

-------------------------------------------------
|                                               |
| PrintApplication.cshtml                       |
|                                               |
|                                               |
-------------------------------------------------

相反,我得到了部分视图所在的视图:

-------------------------------------------------
|                                               |
| MerchantApplicationSummary.cshtml             |
|                                               |
|                                               |
|    PartialDiv                                 |
|    -----------------------------------        |
|    | PrintApplication.cshtml         |        |
|    |                                 |        |
|    -----------------------------------        |
|                                               |
|    [Button A]                                 |
|                                               |
-------------------------------------------------

我认为这种行为来自于设置UpdateTargetId以输出原始页面上div内的部分页面。我需要这个,所以ApplicationReportPartial会在正确的位置打开。

MerchantApplicationSummary.cshtml

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "PartialDiv" }))
{
   ...
   <div id="PartialDiv">
   @{
      Html.RenderPartial("ApplicationReportPartial");
    }
  </div>
  ...
}

这是控制器,它检查它是来自按钮A还是按钮B:

AdminController.cs

    [AuthorizeAdmin]
    [HttpPost]
    public ActionResult MerchantApplicationSummary(string[] ints, FormCollection form, int? page, string submit)
    {
      if (ints != null && (submit == "Print Spanish Application(s)" || submit == "Print Application(s)"))
      {
        return View(@"~/Views/Admin/PrintApplication.cshtml");
      }
    else
    {
      ...
     return PartialView("ApplicationReportPartial", obj_MrntApp);
    }

如何保留它以便在MerchantApplicationSummary中打开ApplicationReportPartial,但是PrintApplication在新视图中打开?

编辑:

以下是按钮A的代码:

<input id="Submit" name="submit" type="submit" class="btn btn-primary" value="Print Application(s)" />

我实际上确实将按钮A作为动作链接,但是我需要它来使其成为一个提交按钮以传递某些值。这是再次采取的行动:

public ActionResult MerchantApplicationSummary(string[] ints, FormCollection form, int? page, string submit)

当我点击按钮A时,我需要整数的值; ints是页面上选中的复选框ID的数组。如果我使用动作链接,我将如何将这些值传递给动作? - 我做了一些研究,看起来这是不可能的(见http://forums.asp.net/t/1470988.aspx?HTML+ActionLink+to+post)所以这让我回到原来的问题,即如何“突破”父视图。

2 个答案:

答案 0 :(得分:1)

我通过执行以下操作解决了问题: - 在父视图中,我使用BeginForm而不是Ajax.BeginForm,并且不使用UpdateTargetId赋值。 - 在控制器中,返回部分视图的视图而不是部分视图。

MerchantApplicationSummary.cshtml

@using (Html.BeginForm("MerchantApplicationSummary", "Admin"))
{
 ...
 <div id="PartialDiv">
   @{
      Html.RenderPartial("ApplicationReportPartial");
    }
 </div>
 ...
 <input id="Submit" name="submit" type="submit" class="btn btn-primary" value="Print Application(s)" />
}

AdminController.cs

[AuthorizeAdmin]
[HttpPost]
public ActionResult MerchantApplicationSummary(string[] ints, FormCollection form, int? page, string submit, string PrintApplications)
{
  if (ints != null && (submit == "Print Spanish Application(s)" || submit == "Print Application(s)"))
  {
    ...
    return View(@"~/Views/Admin/PrintApplication.cshtml");
  }
  else
  {
    ...
    return View(obj_MrntApp);
  }
}

答案 1 :(得分:0)

执行标准表单提交并返回重定向响应。

<强> MerchantApplicationSummary.cshtml

@(Html.BeginForm("PrintApplication", "Admin", FormMethod.Post)) {
    ...
    <button type="submit" id="buttonA">Print</button>
}

你的控制器将是

[HttpPost]
public ActionResult PrintApplication(FormCollection form)
{
    // do stuff with form
    ...
    // stash data you need in redirected view
    TempData["PrintApplication.Id"] = id;

    return RedirectToAction("PrintApplication");
}

[HttpGet]
public ActionResult PrintApplication()
{
    int? id = TempData["PrintApplication.Id"] as int?;
    ViewBag.Id = id.Value;
    return View("PrintApplication");
}

您提交表单,RedirectToAction会向浏览器返回302 Found,并会重定向到GET PrintApplication操作。

这里的杂乱部分是你需要与你的MerchantApplicationSummary AJAX帖子分享表格。放弃AjaxHelper可能最容易。

<div id="appForms">
 @(Html.BeginForm("PrintApplication", "ControllerName",
                  FormMethod.Post), new { id = "formId" }) {

    <div id="PartialDiv">
        @{ Html.RenderPartial("ApplicationReportPartial"); }
    </div>
    ...
    <button type="submit" id="buttonA">Print</button>
 }
</div>

然后连接按钮B以触发jquery AJAX帖子。确保按钮B不是提交按钮(例如<input type="submit"><button type="submit">)。

$("#appForms").on("click", "#buttonB", function(event) {
    var data = $("#formId").serialize();
    $.ajax({
        url: "/Admin/MerchantApplicationSummary",
        method: "POST",
        data: data,
        success: function(partialViewResult) {
            $("#PartialDiv").html(partialViewResult);
        }
    });
});

然后从PrintApplication删除所有MerchantApplicationSummary逻辑。

我不太了解您的具体信息,因此您可能需要在此进行一些调整。