c# - MVC 3 在 JavaScript 中从 View 调用 Action 方法

Question

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

所以我的 View 需要调用初始化模型的报表 Controller 并调用报 TableView 。必须从 JavaScript 函数调用报表 Controller 。

最后，我希望报告在新窗口中显示，同时保留原始 View 。

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

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

或者您建议我如何处理？感谢您的帮助!

你好

伪代码如下:

下面是我正在处理的 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);
    }

最后是 Controller 调用的 View 。它使用 reportModel 中的数据显示报告由 Controller 加载我已经将代码减少到最低限度，这样我就可以给你看一些东西这是有道理的。

<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

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

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

如果您需要填充报告 View 中的模型，最简单的方法可能是使用 Ajax 调用它，传递填充 View 所需的数据。以下是从 Molle 博士那里借用的 jQuery 示例 https://stackoverflow.com/a/3825419/1165998

为调用报告加载的按钮提供一个唯一的 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)。