MVC 3 从 JavaScript 中的视图调用操作方法

Question

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

所以我的视图需要调用初始化模型的报表控制器并调用报表视图。必须从 JavaScript 函数调用报表控制器。

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

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

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

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

URW

伪代码如下：

下面是我正在处理的视图的代码。这是一个搜索表格。 用户可以输入一些值（或不输入）并单击表单顶部的搜索。 表单重新显示以在搜索表单下方显示搜索结果。 在找到的项目列表下方，有 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"/>
}

我要调用的控制器在一个单独的 dll 中，源代码在一个名为 HomeController.cs 的文件中，控制器如下所示：

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 调用它可能是最简单的方法，传递填充视图所需的数据。下面是这个借自Dr. 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 部分，只使用一个按钮来加载报告（我们的按钮具有唯一的 loadReport id）。