Question

我是MVC新手，遇到了问题。我有一个视图，允许用户选择一个项目，然后单击一个按钮来查看该项目的报告。该报告也是一个MVC视图，期望它的模型被初始化。有一个控制器操作方法来初始化模型并调用报告视图。

因此我的视图需要调用初始化模型的报表控制器并调用报表视图。对报表控制器的调用必须来自JavaScript函数。

最后，我希望报告在新窗口中出现，同时保留原始视图。

我可以使用window.open直接调用报告View，但是当它尝试访问模型时，它会跳过报告初始化程序并且报告视图崩溃。

有没有办法使用window.open调用控制器？如果模型为空，我可以从报告视图中调用报告控制器吗？我可以在第一个视图中从我的JavaScript函数调用报表控制器吗？

或者您如何建议我处理这个？谢谢你的帮助！

URW

伪代码如下：

以下是我正在处理的View的代码。这是一个搜索表单。用户可以在表单的顶部输入一些值（或不输入）并单击搜索。表单重新显示以在搜索表单下方显示搜索结果。在找到的项目列表下方有2个按钮：一个用于调用ShowReport功能和一个称为向导。 2个按钮是单独的形式，因为两个按钮都需要提交。至少那是我现在看到的。我可以改变这一点，如果有2个表格是个问题。

// This is the function that should call the controller to show the report
function ShowReport() 
{

    if (ReportID != null && ReportID > 0) 
    {     
      // I need to call report controller passing ReportID
    }
    else 
    { 
      alert("The Report ID is not valid. Please select a different itemand try again.");
      return; 
    }
}

只要用户通过单击行开头的单选按钮选择列表中的项目，此函数就会存储reportID。它还启用或禁用ShowReport和Run Wizard按钮，具体取决于所选项目。该报告不适用于列表中的所有项目，因此此功能会检查报告是否可用于当前选择，并在报告可用时启用“显示报告”按钮。

function activateStart(annualWaterReportId) {

    // store the ReportID for this ID in a global 
    // in case the user wants to see the Full report
    ReportID = reportId;

    document.getElementById("startButton").disabled = false;
    if (ReportId > 0) {
        document.getElementById("viewReport").disabled = false;
    } else {
        document.getElementById("viewReport").disabled = true;
    }
}

当用户选择并选择项目并单击RunWizard按钮时，此功能将启动报告向导。

function startAction() {

var elements = document.getElementsByName("Select");
    var id = null;
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].checked) {
            id = elements[i].value;
            break;
        }
    }
    if (id != null) {
        document.getElementById("IDList").value = id;
        document.forms["runWizard"].submit();
    }
    else {
        alert("You must first select an item before pressing the Start Wizard button. " );
    }
}

以下表单显示3个字段，当用户输入/选择内容并点击搜索字段下方的搜索时，这些字段将成为搜索参数。

@using ((Html.BeginForm("Index", "Search", FormMethod.Post, new { onsubmit = "showLoadMask('Searching...')" })))
{
<table class="searchTable">
    <tr>
        <td>
            <div>
                Name:</div>
            <input name="searchName" type="text" value="@ViewBag.searchName" />
        </td>
        <td>
            <div>
                ID Number:</div>
            <input name="searchID" type="text" value="@ViewBag.searchID"/>
        </td>
        <td>
            <div>
                Year:</div>
            <input name="searchYear" type="text" value="@ViewBag.searchYear"/>
        </td>
</tr>
    <tr>
        <td colspan="4">
            <input type="submit" class="smallButton" value="search" />
        </td>
    </tr>
</table>

}

接下来是用户单击上面的搜索时找到的项目列表。每行前面都有一个单选按钮，用户可以在单击列表下方的两个按钮之一之前选择一行。

<table style="width: 100%" id="searchResults">
<thead>
    <tr>
        <th>
            Select Person
        </th>
        <th>
            Name
        </th>
        <th>
            City
        </th>
        <th>
            State
        </th>
        <th>
            Zip Code
        </th>
    </tr>
</thead>
<tbody>
@foreach (var searchVM in Model)
        {
            <tr>
                <td>
                    <input type="radio" name="Select" value="@searchVM.Number" onclick="activateStart(@searchVM.YearID) " />
                </td>
                <td>@searchVM.Number
                </td>
                <td>@searchVM.Name
                <td>@searchVM.City
                </td>
                <td>@searchVM.StateID
                </td>
                <td>@searchVM.PostalCode
                </td>
            </tr>
        }
</tbody>

搜索结果下方有2个关键按钮：一个用于显示向导，另一个用于显示报告。此表单仅用于允许用户在选择上面列表中的项目后访问向导。

<form id="runWizard" method="post" action="@ViewBag.wizardAction">
<input type="button" value="Start Wizard disabled id="startButton" onclick="startAction()" />
<input type="hidden" name="pageAction" id="pageAction" value="NEXT_ACTION" />
<input type="hidden" name="currentPage" value="3" />

我添加了此表单以用于“查看报告”按钮，以便我可以更好地控制当发生时会发生什么单击按钮。

@using (Html.BeginForm("CallFullReport", "Search", FormMethod.Post, new Dictionary<string, object>{"ReportID", }))
{
// Clicking this button should bring up the report in a new window, while leaving the current window as is.
<input type="submit" value="View Full Report" disabled id="viewReport" onclick="showReport()" />
<input type="hidden" id="ReportID" name="ReportID" value="-1"/>
}

我想调用的Controller是一个单独的dll，源代码在一个名为HomeController.cs的文件中，Controller看起来像这样：

public ActionResult FullReport(int reportID) {
        ReportModel reportModel = null;
        try {
            reportModel = _db.Reports.Find(reportID);
        }
        catch (Exception) {
                // gen up an error message
        }

        return View(reportModel);
    }

最后，还有控制器调用的视图。它使用reportModel中的数据显示报告由控制器加载我已经将代码减少到最低限度，以便我可以向您展示一些东西这是有道理的。

<table style="width: 100%">
foreach (Var item in ReportModel)
{
 <tr>
     <td class="tableLabel base">Name: </td>
     <td class="tableData base">@Item.Name</td>
 </tr>
 <tr>
     <td class="lineSpacer">&nbsp;</td></tr>
 <tr>
     <td class="tableLabel base">Address: </td>
     <td class="tableData base">@Item.Street1</td>
 </tr>
 @if (Item.Street2 != null && Item.Street2 != "") 
 {
  <tr>
    <td>&nbsp;</td>
    <td>@Item.Street2</td>
  </tr>
  }
  <tr>
     td>&nbsp;</td>
     <td>@Item.City, @Item.StateID @Item.PostalCode</td>
  </tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td class="tableLabel base">Phones:</td><td class="tableData base">@(new HtmlString(phones))</td></tr>
  <tr><td class="tableLabel base">Email:</td><td class="tableData base"><a href="mailto:@Item.Email">@Item.Email</a></td></tr>
}
</table>

这就是我拥有的所有伪代码。我继承了所有这些代码，我是MVC的新手，以及随之而来的一切。如果我能提供更多信息，请告诉我。

谢谢束

Answer 1

由于要发布的代码太多，我恐怕只能提供一些通用的建议。希望他们能帮助解决您的问题。

首先，任何新窗口的打开都必须在客户端完成。您无法从服务器返回新窗口。我知道你在用例中没有提到这一点，但重要的是要注意。

如果您需要填充报表视图中的模型，最简单的方法是使用Ajax调用它，传递填充视图所需的数据。以下是从Molle博士https://stackoverflow.com/a/3825419/1165998

借来的jQuery示例

为调用报告的按钮加载一个唯一的id：loadReport

$(document).ready(function () { 
    $('#loadReport').on('click', function (){
        $.post(url, { ReportId: reportId },  function (data) {
            var win=window.open('about:blank');
            with(win.document)
            {
                open();
                write(data);
                close();
            }
        });
    });
});

我认为您可以取消使用Html.BeginForm填充此数据，因为您希望在任何一种情况下将其推送到新的浏览器窗口。我会删除CallFullReport部分，只需要一个按钮来加载报告（我们的按钮具有唯一ID为loadReport）。

JavaScript中的View中的MVC 3调用Action方法

1 个答案: